30 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 ...
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. ...
  • 410
21 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 ...
  • 326
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/...
  • 384
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', ...
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: ...
  • 15.3k
13 votes
Accepted

Magento 2 grunt exec does not actually create symlinks

Remove Cache Clean theme by the command: grunt clean Run CMD command prompt with administrator privilege. Run the command: grunt exec:yourthemename Run the command: grunt less:yourthemename Run the ...
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\...
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
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 ...
  • 4,173
8 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\...
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, ...
7 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 ...
  • 2,958
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 ...
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-...
6 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. ...
  • 4,173
6 votes
Accepted

less issue with calc function

Use calc as below. .main-class{ .page-title-wrapper{ width: calc(~"100% - 45px"); } }
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(...
  • 163
5 votes

Where to place Magento 2 Theme customizations?

In Magento 2, there is a term called static content deployment. You see js/css files links coming from pub/static/ directory because Magento deploys js/css files to this directory from your theme/...
  • 6,757
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="...
  • 2,116
4 votes

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

The .lib-css() mixin is used to set any css property if there is a value passed to it by a variable. (e.g.) [![.class { .lib-css(border-radius, @button__border-radius); .lib-css(border, @...
  • 1,461
4 votes

how to fix error after deploy:mode: developer?

I was facing this issue after deploy. My Magento 2 install was not loading jquery-storageapi.js I figured out magento2 loads the the core resources from the following folder lib/web/jquery/ and ...
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.
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 ...
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 ...
  • 458
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 "...
4 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-...
3 votes

Magento2 : How to change the footer background color in luma-theme?

I made changes in _variables.less file i.e (/app/design/frontend/web/css/source/_variables.less) @footer__background-color: #ff0000; (RED) Please try below command: php bin/magento clear:cache php ...
3 votes
Accepted

Magento 2 grunt watch is not pre-processing LESS for main locale

I found the answer. I had added my theme to the dev/tools/grunt/configs/themes.js file, but had specified en_GB instead of en_IE. To put it another way, the locale inside dev/tools/grunt/configs/...
3 votes

Where is set the main/primary color value in Luma theme

I believe it comes from: vendor\magento\theme-frontend-luma\web\css\source\_theme.less You should be able to override it in your theme with app/design/frontend/yourpackage/yourtheme/web/css/source/...
  • 282

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