Magento – Customize Magento 2 Blank theme

lessluma-thememagento2theme

I have setup my custom theme and using Magento 2 Blank theme as the parent theme <parent>Magento/blank</parent>

  1. I like the Luma icons more. How do I add the Luma icons in my custom theme?
  2. The Luma homepage have styles for the content-heading. Where/in
    which less file are those styles added in the Luma theme? And what
    are best practices to add those to my own custom theme?
  3. I want to style the wishlist, compare and email links (below tocart
    button) on the productview page exactly like Luma theme. I see in
    /vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/_module.less‌​
    those styles. Do I have to copy those styles over to
    /app/design/frontend/Vendor/theme/web/css/source/_theme.less? Or is
    there a better/other preferred way to do it?
  4. I want to style the tabs on the productview page exactly like Luma
    theme. So it has a border around it? Where are those less styles in
    Luma theme and where do I have to add those styles?

Update:

  1. If you look at Luma's <div class="panel wrapper">, they added a
    background-color. What is the preferred way to add this class and
    it's variable to my custom theme? (I know in Luma theme it's living
    in
    /vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/_module.less.
    But how do I get this in my own theme? What is the preferred
    workflow?

Best Answer

Look at vendor/magento/theme-fronted-luma/web/css/source/_theme.less (line 19-20) and you will find:

@icons__font-path: '@{baseDir}fonts/Luma-Icons';
@icons__font-name: 'luma-icons';

inside vendor/magento/theme-fronted-luma/web you will also find the fonts dir. Try to copy the font dir in the appropriate dir inside your custom theme and change the 2 less variables.

Related Topic