Skip to main content
33 votes
Accepted

Magento2 : How to path for background image in .less file?

First add image in app\design\frontend\vendor\theme\web\images folder and write css as below: background: url('@{baseDir}images/icon_sprite.png'); after add new image run command as below: - php ...
Dipesh Rangani's user avatar
26 votes
Accepted

Difference between _module.less and _extend.less

The answer is somewhat hidden in the Magento docs: Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles. ...
c.norin's user avatar
  • 410
22 votes
Accepted

@media-common - Why do we need to use this?

Magento 2 follows Mobile First approach and @media-common = true was designed to define styles that are base (mobile) and must be present in styles-m.css. If you drop this declaration styles will be ...
Olga's user avatar
  • 336
20 votes

Magento 2 less compilation error while setup:static-content:deploy

For all Porto Theme users upgrading to Magento 2.3: Edit the following files (also other language codes if available): app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/...
schnere's user avatar
  • 472
19 votes
Accepted

Product image zoom issue on product details page when drop-down menu have overlap area with it

You need to replace the code of lib/web/magnifier/magnifier.js in your theme as below. $(document).on('mousemove', onMousemove); _init($box, gOptions); Replace it With. $box.on('mousemove', ...
Nitin Vala's user avatar
14 votes

What is the purpose of the LESS lib-css mixin?

The only uses I can see are the prefixes and removing previously declared rules: Prefixes body { .lib-css(transition, color .5s ease, @_prefix: 1); } Will output: body { webkit-transition: ...
Ben Crook's user avatar
  • 15.7k
12 votes
Accepted

How can I add custom less file and in a particular theme compile less file in Magento 2

Just add new file here app\design\frontend\Vendor\Themename\web\css\source\_new.less and import this file in source file given path below app\design\frontend\Vendor\Themename\web\css\source\...
Dipesh Rangani's user avatar
9 votes
Accepted

Magento 2 How to override vendor/magento/magento2-base/lib/web/css/source/lib/_navigation.less?

You can try with app/design/frontend/{Vendor}/{Theme}/web/css/source/lib/_navigation.less Read more: How to override gallery.css
Khoa TruongDinh's user avatar
9 votes

Magento 2 : How to Include New Fonts

You can add your custom font in your custom theme, creating the custom.css file and include css in the default_head_blocks.xml like the below files: app\design\frontend\Vendor\CustomTheme\...
mageDev0688's user avatar
8 votes

Difference between _module.less and _extend.less

Simple explanation or difference between both: _extend.less is the way to extend/modify parent themes styles for example you're happy with your parent theme Luma and just want to change the button ...
Devtype's user avatar
  • 3,008
8 votes

Magento 2 - Overriding CSS without using !important everywhere

You only want to have your styles in the _theme.less file if you want to override the parent theme's _theme.less file. For that file, only one of them is loaded, and it will always be the selected ...
circlesix's user avatar
  • 4,303
8 votes

Product image zoom issue on product details page when drop-down menu have overlap area with it

For magento version 2.2.6 replace below code in your theme. File path lib/web/magnifier/magnifier.js Replace in app/design/frontend/vendor/module/web $box.on('mousemove', onMousemove); _init($box, ...
Aniket Prajapati's user avatar
7 votes
Accepted

Magento 2.2 LESS not compiling locally on Ubuntu

Did you delete the compiled file in the pub/static folder first? You should delete those css files (the styles-m.css and the styles-l.css), clear the var/view_preprocessed folder and then run compile. ...
circlesix's user avatar
  • 4,303
6 votes
Accepted

How do you change the color of buttons to a custom color?

You have to override variable value in your custom theme _theme.less file as below: @button__color: red; @button__background: yellow; If you did,t configure compilation then refer this How to ...
Dipesh Rangani's user avatar
6 votes

Magento 2 How to override vendor/magento/magento2-base/lib/web/css/source/lib/_navigation.less?

1) You have to copy _navigation.less from your parent theme to app\design\frontend\vendor\theme\web\css\source(your custom theme) and override your css after .lib-main-navigation(); and .lib-main-...
Dipesh Rangani's user avatar
6 votes

Magento 2.2 LESS not compiling locally on Ubuntu

This should work: rm -rf var/view_preprocessed rm -rf pub/static/frontend You don't have to run setup:static-content:deploy if you are in developer mode. It's possible that the user created the ...
Czettner Sándor's user avatar
6 votes
Accepted

less issue with calc function

Use calc as below. .main-class{ .page-title-wrapper{ width: calc(~"100% - 45px"); } }
Kishan Patadia's user avatar
6 votes

Product image zoom issue on product details page when drop-down menu have overlap area with it

I upgrade to v2.2.6 and it doesn't work anymore after that I edit the code like this and it works : $box.on('mousemove', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(...
rudak's user avatar
  • 163
5 votes
Accepted

magento 2.2.2 - How to transfer the product thumbnail to the left side

If you want to set the slider on the right side: - 1) Find the file "app/design/frontend/[Your_Theme]/[Your_Theme]/etc/view.xml" and look for these lines: <vars module="...
Jaimin's user avatar
  • 2,146
5 votes

Magento 2 less compilation error while setup:static-content:deploy

Update: This is not a permanent fix, but to get your website back up & running, /frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/checkout Rename _tooltip.less to _tooltip.less-...
Conor Tomkins's user avatar
5 votes

Issue deploying Magento 2: Unable to get content

Make sure the lib folder is created properly (should be automatically created when composer installs magento/magento2-base) as that's where the css/source/lib/_lib.less file comes from. You might be ...
Thomas Wiringa's user avatar
4 votes

Magento2 - pub static css not found

I faced the same problem I had to explicitly add .htaccess file in pub/static then theme worked fine as it was missing.
user48970's user avatar
4 votes

How to customize styles from navigation menu in Blank theme?

You can extend or overwrite the _navigation.less file. (you can find this in vendor > magento > theme-frontend-blank > web > css > source ) If you want to just change a few elements ...
knarfeolhc's user avatar
4 votes

Difference between _module.less and _extend.less

The _extends.less with an S at the end within the Blank Theme, is a file where they created all the classes that can be extended via LESS later within the theme, without the need of creating new ...
Ezequiel Alba's user avatar
4 votes

Magento 2 - Overriding CSS without using !important everywhere

If you are able to have your styles apply in _extend.less file, this means that you have problems with css specificity. Since Magento2 uses less compilation, most styles are very specific. To override ...
Timik's user avatar
  • 478
4 votes

Static files aren't deploying in developer mode

You have "Sign Static Files" options set to Yes in your backend : http://docs.magento.com/m2/ce/user_guide/system/static-file-signature.html Magento 2 add versionXXXXXXX to his URL to avoid "...
Matthéo Geoffray's user avatar
4 votes
Accepted

Deploying static content not updating css

Depending on your configuration, there's a few folders you might need to clear before your changes are caught. Are you using server-side or client-side rendering? Are you in production mode, default ...
Olivier's user avatar
  • 305
3 votes
Accepted

Magento 2 styling / CSS not displaying in IE 9

Magento 2 no longer supports IE9 so this is unlikely to ever be fixed by Magento It's looking very likely that this is down to the fact IE9 can only support up to 4096 selectors, my styles-m.css ...
Ben Crook's user avatar
  • 15.7k
3 votes
Accepted

Magento 2: How to use Grunt properly for CSS changes

I finally figured it out as seen in this topic. At the time I posted this question my main feat was the error (".. no source files were found"). This was solved by running setup:static-content:deploy ...
Asitis's user avatar
  • 1,247
3 votes

grunt exec command not working in magento2 - Unable to find local grunt

grunt exec is esentially a shorthand for clearing the folders var/view_preprocessed, var/generation, var/log/system.log and pub/static and running php bin/magento dev:source-theme:deploy --type=less -...
Claudiu Creanga's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible