Questions tagged [less]
Less is an open-source stylesheet preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. For the UNIX command, use [less-unix].
269 questions
0
votes
1
answer
2k
views
Magento 2 LESS - Unable to resolve the source file for ..., after deleting source file
I deleted a less file which I don't need anymore. I also removed the entry from default_head_blocks.xml so that it does not load anymore.
I searched my whole theme for main.css and removed all ...
- 3,431
1
vote
1
answer
346
views
Magento 2 - Find LESS version
How can I figure out the version of LESS used by Magento 2?
I need it for a bug report.
- 3,431
1
vote
1
answer
324
views
How to use .abs- (from abstract) from UI library LESS?
Magento Documentation for UI Library has said to use "Extend class names should have prefix .abs- (from abstract)"
There is no other explanation for the usage in the documentation
How should we use ...
- 681
0
votes
1
answer
1k
views
Magento 2 - How to override LESS code from _extends.less?
I try to remove the box-shadow of a button in the customer area.
I found the code in
vendor\magento\theme-frontend-luma\web\css\source\_extends.less:
//
// Secondary button
// -------------------...
- 3,431
1
vote
2
answers
1k
views
Magento 2 - Where to find LESS Mixin definition?
In the file vendor\magento\theme-frontend-luma\web\css\source_breadcrumbs.less there is this code getting called:
& when (@media-common = true) {
.breadcrumbs {
.lib-breadcrumbs();
...
- 3,431
0
votes
2
answers
3k
views
Magento 2 - Change font-size of element with LESS
I try to change the font-size of the element with class box-content in the customer area from 1.6rem to 1rem.
As you can see it shows that this is defined in _module.less Line #406 :
//
// Desktop
//...
- 3,431
1
vote
1
answer
706
views
Magento 2 - Grunt watch not detecting changes of _extend.less
I have these files:
THEME = app\design\frontend\company\base
THEME\web\css\source\lib\extend\variables\_typography.less
THEME\web\css\source\lib\extend\variables\_colors.less
THEME\web\css\source\...
- 3,431
0
votes
1
answer
977
views
Magento 2 - LiveReload is connected, but changes are only visible after manual reload
I try to use grunt watch in combination with livereload. But there is almost no documentation on the topic.
I installed livereload like this:
npm install -g livereload
Then I added the following ...
- 3,431
2
votes
4
answers
3k
views
Magento 2 - css source maps not working
I created a new theme which extends from magento luma. I try to develope with less instead of css.
I need to enable CSS Source maps, so that I can debug my less, it helps to see in which less files ...
- 3,431
0
votes
3
answers
482
views
Magento 2 - Why is less so painfull to use compared to css? (css vs. less)
I started to learn .less but it brings more difficulties than benefits.
In css, I can just edit files in the browsers developer tool after I activated "Enable Local Overrides", and see the result ...
- 3,431
1
vote
4
answers
3k
views
Magento 2 - Change primary button color by using .less files
I try to learn how to use .less by reading the official documentation. There is a very simple example which shows how we can change the color of a button from blue to orange.
So I created a fresh ...
- 3,431
0
votes
2
answers
493
views
Magento 2 - How to know which .less file I have to change and what I have to change
I want to change the background color of a certain button in the customer area.
It is the "Compare Product" Button at the left sidebar.
How do I know which .less file I have to change?
The ...
- 3,431
0
votes
1
answer
949
views
Magento 2 - Is it allowed to override styles-m.css / styles-l.css?
I read that these files are generated from .less files. So it is even allowed to override them?
- 3,431
0
votes
2
answers
1k
views
Magento2 - Change position of wishlist on catalog-category view page
I want to change the position of Wishlist icon on the top of image .
Do I have to achieve this through xml or through css?
I tried through xml but I couldn't move it over the image.
Here is the ...
- 681
0
votes
3
answers
1k
views
Custom .less files not compiling at all
I have found that the less files are not compiling in my custom theme. at all. originally I discovered the problem when I made changes to my _extend. less file and no changes occurred, but now I have ...
- 43
0
votes
1
answer
243
views
How to change number of items in a row Magento 2
I've been through topics like this:
Magento 2 change number of items per row
All of them claims, that if I wanna change my items row to display 4 instead of 5, then I would have to change in a file ...
- 13
0
votes
2
answers
2k
views
Admin is returning a 404 on styles.css and theme.js on Magento 2.3.3
The backend of my Magento installation is not loading CSS/JS. I have reached a point where I just cannot work out why this is happening and hoping that someone might have an idea.
This is what I am ...
- 348
2
votes
1
answer
532
views
Variable @button__shadow-active is undefined while running deploy static content in Magento 2
I am getting this error whenever running php bin/magento setup:static-content:deploy.
It showing variable @button__shadow-active is undefined in file en_US/css/source/_extends.less in _extends.less. ...
- 525
1
vote
2
answers
175
views
CSS and LESS files are ignored in custom theme
I'm trying to customize this component:
As I read from the documentation, in order to override the style of this search bar you need to create a folder called Magento_Search and add an _extend.less ...
- 11
0
votes
1
answer
344
views
Magento 2 + media query syntax
I have found there is syntax for desktop devices is
.media-width(@extremum, @break) when (@extremum = 'max') and (@break =
@screen__m) { }
But i need media query for 768px to 1240px desktop ...
- 1,523
1
vote
0
answers
147
views
Which LESS files do you compile in a child theme?
I'm trying to create a theme based on Pixtron. I'm using Gulp rather than Grunt, but everything I've read about compiling LESS files has the same instructions: you have point to the source file(s) (e....
- 21
1
vote
1
answer
121
views
My checkout got a width of 1500%, how do UI library grid make sense here?
After upgrading to Magento 2.3.2 and using the latest Magento, the <div class=".opc_wrapper"> in our checkout got a width of 1500% making it ugly.
We are actually using https://github.com/...
- 14k
0
votes
0
answers
22
views
Magento2 less modification command
Might this is basic query.
I am using "Pedona magento theme" for my website, now I need very small modification in style.less
/app/design/frontend/pedona/pedona_default/web/css/style.less
do have to ...
- 169
0
votes
1
answer
2k
views
Operation on an invalid type in _typography.less in _utilities.less in _listings.less
Updated to Magento 2.3.2 yesterday and have noticed that the CSS for css/styles-m.css is failing to generate with the below error:
Operation on an invalid type in _typography.less in _utilities.less ...
- 5,535
0
votes
1
answer
627
views
Magento 2 Component less/css editing best practices
Please help to understand below 2:
1. How to override component css using less files?
2. Is anyone can provide some of examples to write css in _extend.less file.
0
votes
1
answer
54
views
How to edit .less or css files
I like to change some styles in my website, so i edited .less and CSS files
for example: app/design/frontend/Templatemonster/theme/web/css/styles-l.less
I used "flush Magento cache" from backend ...
- 589
1
vote
0
answers
37
views
Which css format is best for Magento 2 theme?
I am aware that Magento 2 uses Less CSS Format, I have just one daught what if I am use Sass CSS?
Can anyone please answer below questions.
What if I am using a simple CSS format?
What are the ...
- 2,200
2
votes
0
answers
240
views
How magento decides order of all _module.less file imported through @magento_import directive?
I am trying to add module specific less file named _module.less inside my custom module Mynamespace_Mymodule in M2.
For that I have created module.xml file with below sequence.
<module name="...
- 352
2
votes
3
answers
2k
views
Magento 2: How to override theme LESS styles within custom module
I am running Magento 2.3 on Ubuntu 18.04 server with Apache 2.4, MariaDB and PHP 7.2. Magento is running in developer mode.
I have created a custom theme which inherits from the Magento/blank theme.
...
- 709
4
votes
2
answers
166
views
Create less file for custom Theme
How to create new *.less file in Magento 2.3 project ?
Here is my existing Theme:
Here is my existing less file that DOES NOT work:
Nothing is work here:
My question is how to add custom less code/...
- 551
1
vote
0
answers
285
views
How to edit responsive.less file in theme magento 2?
I setup unero theme which has responsive.less file in the dire
web/css/responsive.less. I need to edit this file.
first I took a copy of that file and past it to my theme dire which is app/design/...
- 41
1
vote
0
answers
71
views
Magento 2.3 Client Side less compilation static files not found
if I enable the Client side less compilation and flush the static file cache I will get 404 Errors for all files in the media and pub/static direction.
I'm using nginx.
If I compile the files manual ...
- 11
1
vote
0
answers
54
views
Magento2 CSS groups in styles-m.css in wrong order
my themes "_extend.less" file looks like this:
//common
& when (@media-common = true) {
...
}
//mobile
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
...
}
//...
- 11
3
votes
3
answers
7k
views
Magento 2 Theme Development - grunt watch not detecting changes of custom LESS file
We are running Magento 2 in version 2.3.1, but the error occurred in version 2.3.0 also. The situation is the following:
we've created a custom theme which has Magento/luma theme as parent.
according ...
- 31
0
votes
0
answers
259
views
How to add custom less file for particular page (product listing page)
I am building a custom theme in Magento and Luma theme is my parent theme. I am trying to customize the product listing page with my own style.
Here is what I did
I copied list.phtml from module ...
- 109
0
votes
2
answers
326
views
Magento 2 image not found
I'm writing a callback module and when i try to insert image like following:
a#popup-button{
display: block;
width: 50px;
height: 50px;
background: url("../...
- 676
0
votes
1
answer
141
views
Keep getting <style> for css file and not actual file - trying to use Gulp sourcemaps
So I have updated the default_head_blocks.xml file with my css file like so and the theme loads the CSS.
<css src="css/master.css" />
This is my gulpfile.
const gulp = require("gulp");
const ...
- 103
0
votes
1
answer
628
views
Magento 2 Load _extend.less last
I am using a custom theme and then a child theme for the custom theme. I believe the easiest way to overide the themes css is to use _extend.less in the <MYCOMPANY>/<MYTHEME>/web/css/...
- 407
0
votes
2
answers
2k
views
Magento 2 change colours
I am trying to change the colours from the standard Magento 2 blank theme via the _theme.less file. I currently have the following file structure /public_html/app/design/frontend/GladiatorFitness/...
- 264
0
votes
1
answer
232
views
Show "View as" in toolbar before grid and list modes
I want to show "View as" in toolbar just before grid and list modes.
I found its already exist in template file but is hidden:
vendor/magento/module-catalog/view/frontend/templates/product/list/...
- 1,777
0
votes
2
answers
153
views
CSS are compiled but not called in frontend
I added css on my website. One is bootstrap and one is a custom css.
I addedd it on my Magento_Theme folder (inside layout/default_head_block.xml)
<css src="css/bootstrap/css/bootstrap.css" order="...
- 99
0
votes
1
answer
112
views
change the default magento image background white color to diffrent color
Am attaching the screenshot , want to change image background color.
https://prnt.sc/m2fvyp
- 325
0
votes
1
answer
529
views
custom less not working in magento 2 production mode
I've a less file inside app/design/frontend//web/css/source/_test.less and included in default.xml like
<head>
<css src="css/source/_test.css" />
</head>
It's working perfectly ...
- 31
7
votes
5
answers
34k
views
Magento 2 less compilation error while setup:static-content:deploy
After updating to Magento 2.1.16 on my staging server with nginx server and php7.0 I am facing issue in compiling less and css files.
The files styles-l.css and styles-m.css are missing - not ...
- 443
8
votes
2
answers
952
views
Grunt compile of LESS fails with Error compiling lib/web/css/docs/source/docs.less
I'm hoping to get some advice. I pulled a project that I haven't touched in some time and in developer mode I ran 'grunt exec' followed by 'grunt less' and once running 'grunt less' I receive the ...
- 534
1
vote
1
answer
876
views
Magento 2.2.5 styles-m.css and styles-l.css not load
I'm working with new project and editing front-end css (working with less files), everything goes well but suddenly styles-m.css and styles-l.css in front-end not loading. Any ideas why this happened ...
- 41
0
votes
0
answers
339
views
Magento 2: Cannot change less variables
I have a problem with a custom theme in Magento. I am trying to change some variables for less. But nothing that i change has any effect on the output css.
I followed https://devdocs.magento.com/...
- 113
0
votes
1
answer
321
views
Magento 2 - Custom style _listings.less not working
We are using Porto theme. We have our product list with the style:
<div class="product details product-item-details"> code </div>
We checked the porto .less which corresponds to:
app\...
- 790
0
votes
1
answer
1k
views
How to include LESS in specific page layout
I have created my custom page_layout in magento 2 and now I want to add some less only in my page_layout. I don't want to load those less file in other layouts.
How I can achieve it?
- 1,003
1
vote
0
answers
394
views
Magento2 : How to create custom less file in magento 2 for particular store?
In Magento2, how to create custom.less file for a particular store ?
i created custom themes like theme1, theme2 and theme3 in magento2
and also i created custom.less file only in theme but when i ...
- 25