0

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?
Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
7
  • I tried above method already. But then the icons are too large everywhere? The font-size is then 35px. In Luma it's 22px for all the icons and the line-height: 28px;. How do I fix this? But what about this approach? And what about my second question about content-heading styles?
    – meez
    Jun 8, 2016 at 10:30
  • You can always add some css to fix icons size. About content-heading i didn't find any reference inside luma theme, maybe it comes with sample data
    – Lorenzo
    Jun 8, 2016 at 11:01
  • Thanks. I am a bit lost in what is best way customizing blank theme. Example 1: 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? Example 2: I want to style the tabs on the productview page exactly like Luma theme. So it has a border around it?
    – meez
    Jun 8, 2016 at 12:01
  • but if you want to style blank like luma theme, why don't you start with luma directly? (luma is based on blank however)
    – Lorenzo
    Jun 8, 2016 at 12:28
  • Thats what I tried but I get issues when use luma as parent theme like I described here. If it's possible I definitely want to use Luma as parent theme! But why do I have those issues? I didn't find a solution yet... Thanks
    – meez
    Jun 8, 2016 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.