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].
267
questions
2
votes
2
answers
49
views
Is there a way to use a boilerplate for CSS?
I have to redesign an existing M2-Shop with a given style guide.
That guide defines structures for headlines, sub-lines, product etc. like a style guide does.
My problem is that there is no given ...
- 702
5
votes
1
answer
934
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 ...
- 3,025
1
vote
1
answer
394
views
Change icon color of the grid or list mode buttons in the Category toolbar
I have my own child-theme based on the Luma parent theme.
How do I change icon color of the grid or list mode buttons in the Category toolbar?
In /vendor/magento/theme-frontend-luma/Magento_Catalog/...
- 417
2
votes
1
answer
814
views
Change background color Magento 2 header panel and compile less on Staging server
In /app/design/frontend/MyThemeName/my-theme/web/css/source/_theme.less I added @header-panel__background-color: @color-green-green1;
To change the background color of the header panel (I have a ...
- 417
0
votes
2
answers
1k
views
Magento 2 extend styles-m.less
I'm working on a custom Magento 2 theme and I added couple of my own elements in it. When I write (for example):
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
...
2
votes
0
answers
529
views
Magento2: Mixin is undefined on deploying static content
I have created several mixins in my custom theme within the file "_mixins.less", these work locally and are loaded properly from my other less files. However, when I want to deploy static content I ...
- 21
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 '...
- 560
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....
- 343
3
votes
2
answers
801
views
Magento 2 compile less files on staging server
I have a local repo with my Magento 2 development environment. I use
grunt watch to compile my local less files.
I push my edited less file with Git to my Beanstalk remote Develop branch
I deploy (...
- 417
3
votes
1
answer
2k
views
How to create custom breakpoints in magento2?
How can i create custom breakpoint with min and max like @media only screen and (min-width:768px) and (max-width: 1023px) {...} in my custom theme in magento 2.1 ?
- 3,025
4
votes
3
answers
965
views
How can magento2 support .less or css for multi language locale?
For CSS, I found that we can add web/i18n/en_US/mymodule.css for module
If I want to add some locale specific CSS for the core module, where should I put them in? e.g. app/design/frontend/mypackage/...
- 1,228
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 ...
- 123
3
votes
1
answer
802
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 ...
0
votes
2
answers
654
views
Best way to locate LESS and CSS variables?
Does anyone know an efficent way to determine which less file or css file is responsible for a certain element in my magento shop? Sometimes it gets really frustrating if you want to change simple ...
- 231
3
votes
2
answers
725
views
Why does Magento 2 use PHP to compile less files?
What I don't understand is that since the .less files are already going to be compiled during development through Grunt, why does Magento 2 still uses oyejorge/less to compile less files through PHP?
...
- 875
1
vote
1
answer
480
views
Edit CSS/LESS problems
so I would like to change this css
.navigation,
.breadcrumbs,
.page-header .header.panel,
.header.content,
.footer.content,
.page-wrapper > .widget,
.page-wrapper > .page-bottom,
...
- 624
3
votes
1
answer
529
views
Magento Grunt Less Compilation behaves weird
I have a custom theme Mycompany/mytheme including <Magento>/<blank> as parent.
The locale is set to de_DE.
When I execute php bin/magento setup:static-content:deploy de_DE everything ...
- 671
0
votes
2
answers
138
views
less Extend file values are overwritten
I want to extend .less values from another theme, in my theme I've added the following file "web\css\source\ _extend.less" that is containing:
/* Import: Layouts extensions */
@import '...
- 113
1
vote
1
answer
183
views
Extend part .less file
I'm new to magento and couldn't find an answer for the following question: Is it posible to extend only a part/property of the parent .less file?
So when the original for example looks like:
......
- 113
0
votes
0
answers
28
views
M2 - Method to automatically include module css?
I am trying to avoid adding a head tag for every module I create. The other method of doing it via design css files would be that they depend on each other then and are no longer separated - that is ...
- 1,533
2
votes
1
answer
3k
views
Adding custom font to _typography.less parse error
I try to add some custom fonts to my theme, so I created file app/design/frontend/vendor/theme/web/_typography.less and added the code inside of it:
.lib-font-face (
@family-name:'OpenSans ...
- 448
0
votes
1
answer
916
views
Magento 2 change Footer Text color
How can i change the footer text color in .less file?
Which variable is this?
- 11
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 / ...
- 231
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/...
- 145
4
votes
2
answers
5k
views
How to use Magento 2's LESS grid system
How are the grid mixins in Magento 2 (vendor/magento/magento2-base/lib/web/css/source/lib/_grids.less) supposed to be used.
For example: I want to display 3 divs as equal columns with margin in ...
- 13.7k
2
votes
1
answer
231
views
Different icon for login / logout
I want a different style (background-image) for login / logout in the .authorization-link - there seems to be no class-difference whether I am logged in or logged out.
How do I target the login-state ...
- 13.7k
1
vote
1
answer
933
views
How to override css properties from a specific module?
I created a custom theme, that inherits from magento/blank theme. And I am able to override and extend css classes that are defined in
vendor/magento/theme-frontend-blank/web/css/source/*.less
...
- 13
2
votes
1
answer
3k
views
Magento 2.1 less not updating on frontend
Im using Magento 2.1 with ubuntu.
I am creating a custom theme that inherits from a third party theme.
The problem I am encountering is that I am overriding the .less files and making my changes, ...
- 161
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(@...
- 393
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 ...
2
votes
0
answers
423
views
How to proper extend variables and override module style?
I am new to Magento and currently developing a child theme inherited from the Magento blank theme. I read the developer documentation and doing okay.
I created my own style.less in my web directory ...
0
votes
1
answer
232
views
Using LESS in existing Theme
My company picked up a project where we have to edit a clients existing Magento site. I am a WordPress developer and have NEVER used Magento.
I looked at the docs for the CSS Preprocessing on ...
- 1
10
votes
4
answers
6k
views
Magento 2 : How can I use LESS variables in Modules' LESS files? (not theme)
I try to include specific LESS variables in my Modules' LESS stylesheet. Note: my module, not my theme.
For example have a file called app/code/Vendor/Module/view/frontend/web/css/stylesheet.less. ...
- 12.2k
1
vote
2
answers
344
views
Grunt configuration Magento 2
Using the php bin/magento and deploying static content does work without throwing errors. This means that it's just having a problem getting Grunt going.
Processed Area: frontend, Locale: en_US, ...
- 560
3
votes
2
answers
1k
views
Less file changes not taken in production
In prod mode with Magento 2.0.5
Making changes to app\design\frontend\mythemes\2016\web\css\source\_extend.less
Then ,
rm -rf var/cache/* var/view_preprocessed/* pub/static/*
php bin/magento setup:...
- 199
1
vote
1
answer
1k
views
Upgrade to 2.1 breaks grunt theme fallback?
Since the upgrade to 2.1 I get the following error on grunt exec:mytheme:
$ grunt exec:mytheme
Running "exec:mytheme" (exec) task
Running "clean:mytheme" (clean) task
>> 231 paths cleaned.
...
- 13.7k
2
votes
0
answers
183
views
Some LESS variables not working
I'm creating a custom theme inheriting from Magento Blank. I'm overriding LESS variables in my theme.less file. Must are working fine, but there are a few that arn't working. Example; Neither @...
- 51
0
votes
2
answers
752
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 ...
- 15.6k
2
votes
2
answers
8k
views
Fatal error: Unable to find Gruntfile
I have been following a few tutorials to try and get started creating a theme and workflow for Magento 2, and am trying to setup so that I can compile all my LESS files locally, as outlined here.
...
- 514
5
votes
1
answer
519
views
Use UI library mixins in custom module
I need to use some UI components in a custom module, so I included Magento2 Ui base library in my less file in this way:
@base-dir: "../../";
@import '@{base-dir}css/source/lib/_lib';
This works ...
- 456
0
votes
2
answers
1k
views
Debugging Magento 2 css files in Chrome developer tools shows multiple css files
I setup a custom theme based on Magento Blank theme. If I inspect the styles I see different css styles? I thought it should only show styles-l.css and style-m.css? Whats wrong here?
- 417
0
votes
1
answer
2k
views
Customize Magento 2 Blank theme
I have setup my custom theme and using Magento 2 Blank theme as the parent theme <parent>Magento/blank</parent>
I like the Luma icons more. How do I add the Luma icons in my custom theme?
...
- 417
3
votes
0
answers
92
views
Email.less won't compile
I tried to customize my emails with the _email-extend.less in my theme.
But no matter what I try to do at the end Magento only compiles the email-inline.css instead of the email.css.
I also tried to ...
- 702
3
votes
1
answer
2k
views
See less source files in chrome dev tools
How do you see the less file that is generating the style in chrome dev tools?
working in developer mode, in less.js:
var lessOptions = {
options: {
sourceMap: true,
and in config.less....
- 6,227
0
votes
1
answer
1k
views
Identify default variables from less files
I have a custom template with some variables set on _theme.less, it´s working fine. I need to remove "margin-bottom" from class named "sections nav-sections" but I cannot find this variable on ../lib/...
- 355
2
votes
1
answer
3k
views
Child Theme Change Colors - Less Mixins in Magento 2
I would like to know how to change colors and follow the proper naming conventions in my _theme.less file. I have grunt working on my local developer machine to compile the LESS files into css.
From ...
- 560
25
votes
3
answers
21k
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....
- 15.6k
0
votes
2
answers
172
views
Design magento2 theme with css instead of Less
i can add my custom css and over-ride theme's defaut css etc, Can i go this way and not use LESS.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:...
- 183
4
votes
3
answers
10k
views
Magento 2 - Importing LESS mixins/variables from lib
Explanation
I'm really not a fan of loading all the CSS on every page regardless of whether it's required, to me this is bad practice. Therefore I am creating CSS files for certain areas, e.g ...
- 15.6k
7
votes
2
answers
6k
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 ...
- 927