We’re rewarding the question askers & reputations are being recalculated! Read more.
21

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 bin/magento cache:clean - php bin/magento setup:static-content:deploy


20

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. Read more here Use _module.less when you want to make major changes in styles for a module and use _extend.less for minor adjustments. You'll find more ...


19

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', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(e) { onThumbLeave(); isOverThumb = false; $largeWrapper.addClass(MagnifyCls.magnifyHidden)...


14

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 outputted both to styles-m.css and styles-l.css files.


13

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 command: grunt watch Edit Alex: Basically working and the right solution, but with the limitations of https://github.com/magento/magento2/issues/6367


12

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/checkout/_tooltip.less app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout/_tooltip.less Replace the following piece of code, ...


11

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: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } Removing previously declared ...


9

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\_sources.less import your file (if there is not available _source.less file in your theme then go to vendor\magento\theme-frontend-blank\web\css\source folder and ...


9

You can try with app/design/frontend/{Vendor}/{Theme}/web/css/source/lib/_navigation.less Read more: How to override gallery.css


8

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 theme if the file exists there. From there, it will use the fallback scheme to find that file and use it. So in your case, using the _extend.less file is the ...


8

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, customUserOptions); Replace it With. $box.on('mousemove', onMousemove); $box.on('mouseleave', mouseleave); function mouseleave(e) { ...


6

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-navigation-desktop(); this lib navigation style. OR 2) you can override navigation variable's value in custom theme's _theme.less, you can find variable name ...


6

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\Magento_Theme\layout/default_head_blocks.xml <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/...


6

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(e) { onThumbLeave(); isOverThumb = false; $(largeWrapper).addClass(MagnifyCls.magnifyHidden); } // _init($box, gOptions); ...


5

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/module directory and whenever a user visits website, static files and referred/shown from pub/static/ directory. Initially you will be developing your frontend ...


5

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 configure css compilation? - php bin/magento cache:clean


4

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 materializes in pub/static/.... I found that this folder was missing the jquery-storageapi.js So the solution I Applied Download the jquery storage api https://...


4

I faced the same problem I had to explicitly add .htaccess file in pub/static then theme worked fine as it was missing.


4

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 them, your styles selectors must be more or equally specific. I will not post details of the concept itself here as there are plenty of articles can be found ...


4

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 "extrem" browser caching. Browser cache URLs with versionXXXXXXX in it so when there is a new release of static content Magento set URLs to versionYYYY to force ...


4

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. In some cases, the files in the pub will create sym links to the source file. When that is a the case, you don't have to delete it first, so check the pub ...


4

Use calc as below. .main-class{ .page-title-wrapper{ width: calc(~"100% - 45px"); } }


3

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 from this file, create a _navigation_extend.less file in your themes web > css > source file and add your styles in there. If you want to overwrite it ...


3

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 bin/magento cache:flush php bin/magento setup:static-content:deploy I hope your changes will be reflect.


3

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/themes.js didn't match that set in the core_config_data table.


3

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/_theme.less Read more here


3

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, @button-primary__border); .lib-css(color, @button-primary__color); .lib-css(background, @color-gray94); .lib-css(padding, @indent__s); } Also .lib-css() ...


3

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 --locale=en_US --area=frontend --theme=Package/theme So before running grunt commands you need to make sure that your comand line php is the same as the server ...


3

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 styles in your custom theme, all you need to do is create a new file _buttons_extend.less under web/css/source in your custom theme and adjust styles in there. ...


3

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 currently has 4977 selectors (due to having Luma as a parent (bad idea!)). The styles inside the media-common mixin aren't displaying as they are placed last, ...


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