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].
35
questions
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 ....
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 ...
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 ...
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>/<...
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 ...
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 ...
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 ...
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 ...
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) ...
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....
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/...
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 / ...
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 {...
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 -...
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 ...
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. ...
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&...
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 ...
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 ...
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....
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
...
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?
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/...
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 ...
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(@...
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 ...
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 ...
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 '...
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 ...
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 ...
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
//...
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 ...
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 ...
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?
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 ...