2

How do you extend gallery.css in Magento2?

gallery.css is loaded after styles-m.css so anything that I put in my theme's _extend.less the file gets overwritten by it.

I don't want to override everything in it, just a few CSS rules.

2 Answers 2

1

You need to copy this file below and paste to this folder on you custom theme:

from

lib/web/mage/gallery/gallery.less

to

app/design/frontend/{Vendor}/{Theme}/web/mage/gallery/gallery.less

Yes it will override, but now you can add a new extend property, like this last line below, after the natives lines, then you can create a new LESS files:

@import 'module/_variables.less'; //Default gallery variables
@import '../../css/source/lib/_lib.less'; // Global lib
@import '../../css/source/_theme.less'; // Theme overrides
@import '../../css/source/_variables.less'; // Local theme variables
@import '../../css/source/lib/_responsive.less';
@import 'module/_mixins.less'; //Mixins in gallery
@import 'module/_extends.less';
@import 'module/_focus.less';
@import 'module/_fullscreen.less';
@import 'module/_custom.less'; //Your custom LESS 

This file is called here vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml, if you want add a new CSS in the sequence just create to your custom template:

app/design/frontend/{Vendor}/{Theme}/Magento_Catalog/layout/catalog_product_view.xml

And add your custom.css for example:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="mage/gallery/gallery.css"/>
        <css src="Magento_Catalog::css/custom.css"/>
    </head>
</page>
0

In this case, I would take the few CSS rules that you want to overwrite out of _extend.less and put them in a custom CSS file. Then, add that CSS file to the default_head_blocks.xml file in Magento_Theme extension.

Specifics on how to add custom CSS and have it load last (to overwrite gallery.css) can be found here.

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.