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.
Add a comment
|
2 Answers
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>
answered Apr 14, 2017 at 1:07
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.
