1

I'm adding some custom less to product page on Magento 2.2.2

I've notice that now, many of my customization are included in gallery.css file and I'm not able to change them anymore in my custom less because it's loaded before gallery.css

Which should be the trick to override it without using !important?

  • Can you please let me know where are you adding your custom css? – Vishal Baghel May 23 '18 at 11:34
  • Please provide me file path – Vishal Baghel May 23 '18 at 11:36
3

please follow below step to compile "gallery.less"

  1. create "mage" folder under your theme
  2. copy "gallery" folder from "root/lib/web/mage/gallery/" and put under "app/design/frontend/vendor(packagename)/your-theme(custom theme)/web/mage/"
  3. open "root/dev/tools/grunt/configs/theme.js" and put below code in it (configure your theme in "theme.js")

    theme: {
    area: 'frontend',
    name: 'vendor/your-theme',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l',
        'mage/gallery/gallery',
    ],
    dsl: 'less'
    

    }

  4. clean root/var/ and pub/static folder

  5. run grunt exec:theme (your-theme)
  6. run php bin/magento setup:static-content:deploy
  7. run grunt watch:theme (your-theme)
  8. modify "gallery.less", now it is compile through grunt
0

If you want to remove this file then add below code in <theme_dir>\Magento_Catalog\layout\catalog_product_view.xml file.

<head>
   <remove src="mage/gallery/gallery.css" />
</head>

If you want to edit gallery style:

If you are not locate this file in <theme_dir>\web\mage\gallery then copy gallery.less file from <root>\lib\web\mage\gallery and add in your theme.

Run command:

  • php bin/magento cache:clean
  • php bin/magento setup:static-content:deploy

en_US folder is generate from themes when you run php bin/magento setup:static-content:deploy.

  • Yes, this is clear. But why inside gallery.css in pub/static is included my custom css for product page? – Daniele Rovatti May 23 '18 at 9:04
  • You need to default mage folder in your theme folder and then you need to apply your custom css. That's standard process. – Mayur Rathod May 23 '18 at 9:19
  • Can you please provide me more information. – Mayur Rathod May 23 '18 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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