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?

2
  • Can you please let me know where are you adding your custom css? Commented May 23, 2018 at 11:34
  • Please provide me file path Commented May 23, 2018 at 11:36

2 Answers 2

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.

3
  • Yes, this is clear. But why inside gallery.css in pub/static is included my custom css for product page? Commented May 23, 2018 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. Commented May 23, 2018 at 9:19
  • Can you please provide me more information. Commented May 23, 2018 at 12:13

Your Answer

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

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