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.

Rafael Corrêa Gomes
  • 13,309
  • 14
  • 84
  • 171
Holly
  • 4,863
  • 8
  • 70
  • 128

2 Answers2

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>
Rafael Corrêa Gomes
  • 13,309
  • 14
  • 84
  • 171
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.

Nfourteen
  • 145
  • 1
  • 7