How to extend gallery.css in Magento2? Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?How to add a custom CSS file in Magento 2Change the order of CSS files. Load module's CSS before theme's CSSless Extend file values are overwrittenWhy does gallery.less include _theme.less?Best way to extend module less found in web/css/source/module, like _minicart.less?Magento 2: Override/extend the email.css that is being used in the transactional email headerExtend theme css Magento 2Multiple themes in Magento 2.2 that extend off of each other?Magento 2 : How To Extend a Layout File From Third Party ModuleMagento 2 Load _extend.less lastHow to add custom less file for particular page (product listing page)
Why do C and C++ allow the expression (int) + 4*5?
How do Java 8 default methods hеlp with lambdas?
How can I list files in reverse time order by a command and pass them as arguments to another command?
My mentor says to set image to Fine instead of RAW — how is this different from JPG?
Keep at all times, the minus sign above aligned with minus sign below
Are there any irrational/transcendental numbers for which the distribution of decimal digits is not uniform?
An isoperimetric-type inequality inside a cube
New Order #6: Easter Egg
What is "Lambda" in Heston's original paper on stochastic volatility models?
NIntegrate on a solution of a matrix ODE
Is the Mordenkainen's Sword spell underpowered?
Vertical ranges of Column Plots in 12
First paper to introduce the "principal-agent problem"
Does the main washing effect of soap come from foam?
Determine whether an integer is a palindrome
By what mechanism was the 2017 UK General Election called?
Is the time—manner—place ordering of adverbials an oversimplification?
Why not use the yoke to control yaw, as well as pitch and roll?
Does the universe have a fixed centre of mass?
Diophantine equation 3^a+1=3^b+5^c
What should one know about term logic before studying propositional and predicate logic?
Why are two-digit numbers in Jonathan Swift's "Gulliver's Travels" (1726) written in "German style"?
Flight departed from the gate 5 min before scheduled departure time. Refund options
Can two people see the same photon?
How to extend gallery.css in Magento2?
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?How to add a custom CSS file in Magento 2Change the order of CSS files. Load module's CSS before theme's CSSless Extend file values are overwrittenWhy does gallery.less include _theme.less?Best way to extend module less found in web/css/source/module, like _minicart.less?Magento 2: Override/extend the email.css that is being used in the transactional email headerExtend theme css Magento 2Multiple themes in Magento 2.2 that extend off of each other?Magento 2 : How To Extend a Layout File From Third Party ModuleMagento 2 Load _extend.less lastHow to add custom less file for particular page (product listing page)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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.
magento2 frontend less
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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.
magento2 frontend less
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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.
magento2 frontend less
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
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.
magento2 frontend less
magento2 frontend less
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
edited Apr 14 '17 at 3:06
Rafael Corrêa Gomes
4,74023366
4,74023366
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
asked Apr 13 '17 at 11:08
HollyHolly
2,37033578
2,37033578
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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.
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
add a comment |
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 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f170071%2fhow-to-extend-gallery-css-in-magento2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
add a comment |
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.
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
add a comment |
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.
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
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.
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
answered Apr 14 '17 at 0:24
NfourteenNfourteen
13414
13414
add a comment |
add a comment |
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 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
add a comment |
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 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
add a comment |
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 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
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 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
edited Apr 14 '17 at 15:12
answered Apr 14 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
answered Apr 14 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
answered Apr 14 '17 at 1:07
Rafael Corrêa GomesRafael Corrêa Gomes
4,74023366
4,74023366
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f170071%2fhow-to-extend-gallery-css-in-magento2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
