Skip to main content

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
5 votes
3 answers
6k views

How to change color of cart icon in minicart?

I am trying to change color of cart icon in header/minicart , as currently it's in grey shade I tried changing via adding following css in my custom.css at \web\css\custom.css .minicart-wrapper ....
user avatar
40 votes
1 answer
35k views

How do you override LESS in a custom theme?

I've spent the better part of this week trying to find a clear guide on how to properly create a custom theme and extend exist LESS/CSS without having to copy the entire magento-blank theme. The ...
andyjv's user avatar
  • 3,242
3 votes
1 answer
5k views

Magento 2 Custom Theme : Which files to edit in order to customize home page / category css?

I'm trying to insert some CSS changes, after already inserting the html changes in the "content" part of the Home Page cms page.Changes to category pages will follow the same process, once proven that ...
Horace Foca's user avatar
10 votes
3 answers
16k views

Overriding Blank Theme Styles in Magento 2

How would you go about overriding the navigation styles for a custom theme when inheriting from the blank theme in Magento 2? I have a theme.css file in my app/design/frontend/<Vendor>/<...
Gareth Daine's user avatar
6 votes
3 answers
5k views

Why clear pub/static/frontend after css changes in dev mode?

I am working with Magento2 and have a question. I am working in the development mode. But when I do some CSS changes in my theme, why I have to manually clear the pub/static/frontend folder every ...
user3310748's user avatar
4 votes
1 answer
9k views

How to use bootstrap in my custom theme [duplicate]

In my extended LUMA theme , how to integrate Bootstrap JS and CSS . So I can make my CMS page's layout on Bootstrap grid . Already seen few post here : How to develop theme using twitter bootstrap ...
Kay Lina's user avatar
7 votes
2 answers
7k views

Problems with less variables in _theme.less

I use below media queries in my custom _theme.less like & when (@media-common = true) { } but when I execute this command bin/magento setup:static-content:deploy I get variable @media-common is ...
fefe's user avatar
  • 937
7 votes
5 answers
33k 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 ...
Abid Malik's user avatar
20 votes
1 answer
12k views

Best way to extend module less found in web/css/source/module, like _minicart.less?

Which is then the best way to extend less files content in <module>/web/css/source/module/, like for instance Magento_Checkout/web/css/source/module/_minicart.less? Assuming that to A) ...
Loreena's user avatar
  • 640
10 votes
2 answers
8k views

Magento 2: How to override gallery.css?

I want to override lib/web/mage/gallery/gallery.less and some module files in lib/web/mage/gallery/module/*.less I need to override them because I want to change the style of product gallery images....
Mr Tim's user avatar
  • 343
5 votes
1 answer
7k views

How to utilise the existing LESS variables in my new less file

As the title says, i want to use LESS variables that are already defined by Magento. for example, there is variable called @color-white defined in following file. ROOT/lib/web/css/source/lib/...
Nero's user avatar
  • 769
3 votes
3 answers
13k views

Accidentally deleted .htaccess file inside pub/static folder

I accidentally deleted my .htaccess file. Before that I could just delete everything in the var and pub/static folder (except the .htaccess file of course) and just reload the page to see my CSS / ...
Dawesign's user avatar
  • 231
3 votes
4 answers
2k views

Grunt, .less, and Live Reload - Can't get them working

Good afternoon, I am having a devil of a time getting my front-end flow working. I have grunt CLI working, along with theme.js setup properly (see images below). Still, when I make changes within my {...
AdamJSim's user avatar
  • 103
2 votes
1 answer
2k views

How to correctly add my less file to Magento 2?

Create theme app/design/frontend/Vendorname/default Try add my.less file for impot, or add code with new class and style to _extends.less to app/design/frontend/Vendorname/default/web/css/sourse. rm -...
Sylon's user avatar
  • 678
2 votes
1 answer
6k views

Magento 2 CSS Media Queries not working on

I am facing the problem that my media queries in my custom theme derived from luma do not work as expected, when I am deploying the static files via the command line. The result is, that the styles ...
xeed's user avatar
  • 123
2 votes
1 answer
525 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. ...
Kowsigan Atsayam's user avatar
0 votes
1 answer
2k views

Magento 2: Add CSS / JS to custom layout - only applied to single page

I have a custom page layout for Home Page. I created this custom layout this way: app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml <?xml version="1.0" encoding="UTF-8&...
Kalvin Klien's user avatar
0 votes
1 answer
3k views

Override Less file

im work on a new magento 2 page. Now i want change a css class over my custom theme.less file. But how can i override the css class? I want override the padding from the .header.content class which ...
user3778868's user avatar
0 votes
1 answer
951 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 ...
Black's user avatar
  • 3,392
25 votes
3 answers
22k views

Difference between _module.less and _extend.less

Is there any difference between extending a theme using _module.less and _extend.less? And what is the best practice when extending a module/theme? My first thought was it's better to use _module....
Ben Crook's user avatar
  • 15.7k
18 votes
1 answer
10k views

@media-common - Why do we need to use this?

In the Magento 2 lib documentation it contains the following: @media-common: true|false - sets whether to output common styles. For common styles every time you want to add some styles you should use ...
Ben Crook's user avatar
  • 15.7k
16 votes
4 answers
25k views

Less files in custom modules

How do you use less inside custom module having created code/Vendor/module/view/frontend/web/css/source/custom.less how do I include and compile?
fefe's user avatar
  • 937
7 votes
5 answers
3k views

Changing breadcrumbs separator symbol

By default the breadcrumbs look like: homepage > category > product. I would like to change the greater than (>) symbol. The code that generates it is in vendor/magento/magento2-base/lib/web/css/...
ella_beeriPrint's user avatar
5 votes
1 answer
983 views

How to compile gallery and calendar css with grunt?

I have put gallery.less and calendar.css in web\mage\gallery and web\mage respectively in my custom theme, But they are not compile with grunt. How can i compile these files with grunt like other ...
Dipesh Rangani's user avatar
4 votes
1 answer
3k views

Create new M2 breakpoint with .media-width mixin?

I want to change the breakpoint of some some styles inside a native M2 module (specifically Magento_Catalog/web/css/source/_module.less). Here is a link to the bp in question. .media-width(@...
Joshua Soileau's user avatar
4 votes
2 answers
9k views

How to create custom less file? magento 2

I'm having a problem creating my own less file in my Magento 2? there's a tutorial by Alan Storm through the way he creates a custom less file is by using a module, is there a way to do it without ...
Richmond Azarraga's user avatar
3 votes
1 answer
823 views

Theme inheritance not working _extend.less shouldn't be merged?

I have a custom theme, extends the luma theme, everything works properly. My custom less modifications were added in web/css/source/_extend.less Now I would like to create a subtheme from this custom ...
Koncz Szabolcs's user avatar
1 vote
2 answers
4k views

Magento 2: Failed to open the required lessc.inc.php

My server cant seem to run Failed opening required vendor/oyejorge/less.php/lessc.inc.php PHP message: PHP Fatal error: Magento\Framework\View\TemplateEngine\Php::main(): Failed opening required '...
Sohaib Khan's user avatar
1 vote
0 answers
2k views

bootstrap into luma extended theme - magento2

I created theme that extend luma. I have integrated bootstrap into magento using this link after that product detail page and page header alignment are not nice. Due to commonalities between these ...
Bilal Usean's user avatar
  • 10.1k
0 votes
1 answer
103 views

Magento 2.4 Commerce cloud - After push the code from dev to live server less not compiled to css file

I have created a custom theme, for the listing page i have created custom less file, app\design\frontend\Zero\my_theme\Magento_Catalog\web\css\source\ _custom_listing_page.less On the Website listing ...
zus's user avatar
  • 173
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 //...
Black's user avatar
  • 3,392
0 votes
2 answers
4k views

Error in Magento 2 when trying to deploy

I have this error: Fatal error: Class 'Locale' not found in vendor/magento/framework/Locale/Bundle/DataBundle.php on line 64 in Magento 2 when I try do use this command to clear the cached ...
Mihai Ilie's user avatar
0 votes
2 answers
756 views

Magento 2 styling / CSS not displaying in IE 9

For some reason any Less I have written inside the @media-common = true media query does not load in IE9. I can't find any specific code to prevent this from rendering out in IE9. It happens whether ...
Ben Crook's user avatar
  • 15.7k
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?
Gaurav Agrawal's user avatar
0 votes
1 answer
2k views

Magento 2 Blank Theme: How to reduce the height of Navigation, header and top links?

I want to reduce the height of the top sections (navigation, logo, search and top links) in the default Magento Blank theme but I cannot figure out how to do this. I have created _extend.less and ...
Phillip Meyer's user avatar