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
13 views

How to add ttf file in less using typography.less file?

I want to call .ttf file instead of .woff2 file in typography.less. But, it's not call and return 404 error. Code : .lib-font-face( @family-name: @roboregular, @font-path: '@{baseDir}...
0
votes
0answers
7 views

M2 Live reload not refreshing sourcemaps

Magento 2.3.4 Apache Chrome 83.0.4103.97 Dev tools Everything started, everything working, watcher is watching. Opened the page, saw the correct path to the less file in Dev tools. Made the less ...
1
vote
0answers
32 views

Missing cached stylesheet for Magento 2 Theme

We are using the free HiddenTechies theme "Bizkick" for our Magento 2 store and we are having an issue with a missing stylesheet. On the front page, the theme is displaying correctly except for two ...
0
votes
0answers
17 views

Less file not included on frontend. Magento 2.3.4

I've got a really strange issue, If I choose to minify and merge css (or either or), then my site layout breaks because the less file style-l.css doesn't get included on the front page. This doesn't ...
0
votes
0answers
10 views

Custom font not loaded in Magento 2

I have new custom font that i want to add, before i already had a custom font which is PT Serif now i want to add new font PT Serif Pro, i tried to add it like this: app/design/frontend/Vendor/theme/...
0
votes
0answers
13 views

Magento Undefined Less Variables After Upgrage

I upgraded from magento 2.2.9 to 2.3.5 and now I am getting this error. I looked in my custom theme and there is no file /app/var/view_preprocessed/pub/static/frontend/Corra/graphik/en_US/css/source/...
0
votes
0answers
17 views

How to implement between breakpoints

How to make a style block for magento 2 between two breakpoints Analogue:@media (max-width:900px) and (min-width:400px) but with the magento methods that she uses for less compilation: .media-width(@...
0
votes
1answer
34 views

How to get pub media url in .less file?

I have an image that i need to use in .less file, the image is located in: pub/media/kool/setting/blank.gif in the .less files i tried to define it like this: @footer_bg_file:~"../kool/setting/...
1
vote
1answer
29 views

Adding CSS to child themes _extend.less has no effect

I have set up a child theme of Luma and can see it is being loaded by looking at the page source in the browser. I now want to customise the styling of the theme. I followed the instructions here: ...
0
votes
2answers
23 views

CSS and LESS, what is the correct way for including them in a Magento 2 module?

Let's say I have my module which adds a slider to the homepage and there are many styles to define. I know I can add the styles in 2 different ways: Adding a css file MyBrand/MyModule/view/frontend/...
0
votes
1answer
34 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
25 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
20 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
37 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
120 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
9 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
83 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
24 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
36 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
125 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
61 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
213 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
53 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
149 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
214 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
56 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
142 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
22 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
48 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
13 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
48 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
22 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
16 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
34 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
56 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
56 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
21 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
266 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
107 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
37 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
69 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
30 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
61 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
1answer
31 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
15 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
398 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
60 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
28 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
28 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 ...
1
vote
0answers
50 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
2 3 4 5