32
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 ...
- 2,987
25
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.
...
- 400
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/...
- 424
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', ...
- 475
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 ...
- 15.5k
13
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.5k
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\...
- 2,987
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
- 31.5k
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\...
- 698
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 ...
- 2,978
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,203
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, ...
- 332
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.
...
- 4,203
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 ...
- 2,987
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-...
- 2,987
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 ...
6
votes
Accepted
less issue with calc function
Use calc as below.
.main-class{
.page-title-wrapper{
width: calc(~"100% - 45px");
}
}
- 5,489
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,827
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,126
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-...
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.)
[
- 1,471
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 ...
- 140
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.
- 41
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 ...
- 167
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 ...
- 413
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 ...
- 468
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 "...
- 2,654
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 ...
- 305
Only top scored, non community-wiki answers of a minimum length are eligible