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].

Filter by
Sorted by
Tagged with
0
votes
0answers
11 views

How do you know what CSS name an element is to override it

If I see an element such as this in the code, how do I work out what to put in my less file to override the CSS used on it? button id="bundle-slide" class="action primary customize" type="button" I ...
0
votes
0answers
10 views

Change order of merged css in porto theme

I have been having trouble getting my css to version correctly. I am using Porto theme on magento 2.3.4. In the past, all my css was handled in a file called custom.css. This is fine but the problem ...
0
votes
1answer
17 views

Can i import theme variables to custom less file?

I want to add a variable that located in "web/css/source/_theme.less" to my custom less file, that I created specialy for home page. I added my less file in "Magento_CMS/layout/cms_index_index.xml" &...
0
votes
0answers
23 views

Multistore with Luma Override as Default Theme with Child Themes for each store?

I seem to be having trouble properly setting up my frontend themes in Magento 2.3.3. We have three Magento 1.9 websites that we're migrating into a single Magento Commerce Cloud installation. I'd ...
0
votes
1answer
19 views

@baseDir variable not working in less file for background-image. Says undefined

Several other questions/answers here say to use the variable @{baseDir} to get the URL for background-image. I added this to my themes less file, however, when I compile, it crashes. variable @...
0
votes
1answer
5 views

Magento 2 - When to use the parameter `@_prefix: 1` when calling mixin .lib-css()?

I wonder when I need to use the parameter @_prefix: 1 with .lib-css() I always use it with the css transform property .lib-css(transform, scale(0.65), @_prefix: 1); so that it generates this code: ...
0
votes
1answer
18 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 ...
0
votes
1answer
20 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.
0
votes
1answer
20 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 ...
0
votes
1answer
66 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 // -------------------...
1
vote
2answers
33 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(); ...
0
votes
2answers
46 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 /...
0
votes
1answer
22 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\...
0
votes
1answer
46 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 ...
1
vote
1answer
55 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 ...
0
votes
3answers
52 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 ...
0
votes
4answers
66 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 ...
0
votes
0answers
20 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 selector ...
0
votes
1answer
33 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?
0
votes
0answers
12 views

How to edit Magentos less compiler options

I need to pass a parameter to less for my files to not throw an error (--math=strict). How do I get to the configuration layer of Magento's (server-side) less build process?
0
votes
0answers
28 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 ...
0
votes
0answers
20 views

Website pulls from style-l.css that doesn't exist

After upgrading to Magento 2.3.3 on Windows, and being successful, I attempted to change some CSS but found that while my code is being generated, it is being overwritten by the old code which doesn't ...
0
votes
0answers
13 views

w3c validation parse error

I am getting parse error for following code @media screen and(-ms-high-contrast: active),(-ms-high-contrast: none) { .rating-box{width:65px;height:12px;font-size:0;line-height:0;text-indent:-999em;...
0
votes
0answers
26 views

How to Remove the tab styling from tabs from Magento 2.3.3?

I want to restyle the tab widget. Remove the Tab borders etc. so that the content looks as it were not in tabs. I try to use to overwrite the web/css/source/lib/_sections.less but don't understand ...
0
votes
3answers
40 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 ...
0
votes
0answers
33 views

How to use grunt to compile specific .less in magento 2.1.9 child theme module directory?

I need to make massive changes on a purchased magento 2.1.9 theme. I created a child theme, copied the files I want to edit. For now I can use grunt to compile .less files located in the web/css ...
0
votes
1answer
20 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 ...
0
votes
2answers
142 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 ...
2
votes
1answer
63 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. ...
0
votes
0answers
34 views

Override module specific styles.css using less

In my magento 2.3 installation I am using a 3rd party module that has its styles defined in <vendor>/<module>/view/frontend/web/css/styles.css. I need to override this in my custom theme ...
1
vote
2answers
51 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 ...
0
votes
1answer
25 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
vote
0answers
47 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....
1
vote
0answers
24 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/...
0
votes
0answers
14 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 ...
0
votes
1answer
260 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 ...
0
votes
1answer
38 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
0answers
44 views

M2 css/less priorities

CCS styles in M2 locates in two CSS files: style-m and style-l. I should use & when (@media-common = true) mixin to put styles just to style- m and they will work for both mobile and deskop ...
0
votes
0answers
27 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 ...
1
vote
0answers
27 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 ...
0
votes
0answers
33 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="...
1
vote
3answers
309 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. ...
4
votes
2answers
93 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/...
1
vote
0answers
39 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/...
0
votes
0answers
21 views

Get a list of added CSS files

I'm doing some optimizations to a few sites and I was wondering if it's possible to get a list of all CSS/Less files loaded in the head of the site. I'd like the list in Array or Collection form so I ...
1
vote
0answers
52 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 ...
1
vote
0answers
16 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) { ... } //...
1
vote
2answers
1k 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 ...
0
votes
0answers
23 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 ...
0
votes
2answers
43 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("../...

1
2 3 4 5