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
0
votes
2
answers
714
views
Debug css in Magento 2
I read the page: https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html
And I am trying to see the code from the less file rather than the css so that I can debug the ...
- 7,618
1
vote
1
answer
358
views
Magento 2 Autoprefixer in production mode
Magento 2 comes with a preinstalled autoprefixer for Grunt.
But is it possible to use the autoprefixer in the production mode too?
I have a lot of CSS which does not work without the vendor prefixes ...
- 21
0
votes
1
answer
185
views
Add page specific CSS to 1 single page in Magento 2.2.2?
I have 1 specific page in Magento 2.2.2, that I'd like CSS on. In my _extend.less file, if I include the CSS there, it'll effect other pages that have the same classes. I don't want that to happen.
...
- 163
3
votes
0
answers
566
views
Plugins less with Magento Theme
Good morning,
I would like to know if somebody has worked with less plugins in Magento Environment?
Indeed, I met no difficulties with grunt tools, but when Magento compile all files (through setup:...
0
votes
1
answer
367
views
Gulp Not working with Magento2
unfortunately I am new to Gulp, and I really need it to debug and sourcemapping, so to better understand less too, which is also quite new for me.
Anyway everything in place, I deploy trough usual ...
- 103
0
votes
2
answers
1k
views
Magento 2.2: How to apply breakpoints in custom .less files
Magento 2.2.3
Ubuntu 16.04 Server VM using VirtualBox with icewm window manager
Apache 2.4
MySQL 14.14
PHP 7.0
Custom theme which inherits from Magento/blank
I have a custom .phtml file:
Vendor/...
- 699
3
votes
2
answers
1k
views
Include and compile custom.less file after removing the style-l and style-m css
I am new in magneto2. I am working on LUMA theme and I have to customize it. So my approach is that I am removing all the existing i.e. style-l.css and style-m.css by writing code in the ...
- 133
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 {...
- 103
0
votes
2
answers
45
views
What are the benefits of modularized styling?
What are the benefits of modularized styling?
For example, I'm using
app/design/frontend/<vendor>/<theme>/web/css/source/_extend.less
For all of my styling. However, the Magento Dev ...
- 163
1
vote
1
answer
976
views
How to install node_modules in server for grunt configuation
As a designer I am totally new to magento 2 file structure and preprocessing.
As far as my understanding is correct, magento uses less files and uses gruntfile.js for preprocessing so that via ...
- 342
1
vote
1
answer
524
views
Multiple themes in Magento 2.2 that extend off of each other?
I've created a theme at:
app/design/frontend/<vendor>/default
That I call my "default" theme with some base styles, that inherit from Magento Blank as it's parent. Default just has universal ...
- 281
1
vote
1
answer
314
views
Is there a way to order the CSS assets in Magento 2.2? [duplicate]
Is there a way to order the CSS assets in Magento 2.2?
I want to include https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css Bootstrap's CSS before styles-m and styles-l css ...
- 281
1
vote
2
answers
3k
views
Magento 2: Font family does not change. How to troubleshoot?
I created a child theme that inherits from theme X that in turn inherits from Magento Luma Theme. Hence, Theme inheritance is as follows:
Magento Blank <- Magento Luma <- Theme X <- My Theme
...
- 391
2
votes
1
answer
1k
views
How to override CSS of module via LESS?
I want to modify all css files in path:
app/code/Aheadworks/Autorelated/view/frontend/web/css
What is the best way to do it?
- 23
2
votes
3
answers
2k
views
Error when running grunt exec
I have followed the docs for setting up Less compilation. Running grunt clean and grunt less works without errors, but when I run grunt exec (with or without appending a specific theme name) I get the ...
- 304
1
vote
0
answers
497
views
Change default Magento 2 theme to use a boxed layout instead of full width?
Change default Magento 2 theme to use a boxed layout instead of full width?
I'd like to change my Magento 2 theme to use a boxed layout instead of a full layout. I've already started customizing the ...
- 281
6
votes
2
answers
7k
views
Magento 2.2 LESS not compiling locally on Ubuntu
I'm using Ubuntu with Magento 2.2 installed locally for development.
I'm updating my LESS, but it's just not compiling for some reason.
I have all caching turned off in Cache Management, and I run ...
- 281
2
votes
1
answer
2k
views
Magento2 LESS extend/override custom theme
I have been going through research and tests for whole day and still found answers do not work for my case or I just do not understand how to properly implement them - therefore post here:
I have ...
- 232
0
votes
2
answers
41
views
How do I get Magento2 to process my _theme.less?
I can't figure out how to get the LESS files in my theme to update. I've tried every different .less file the docs recommend. I've tried copying this file from samples:
https://github.com/magento/...
2
votes
1
answer
782
views
What are the required skills to work on Magento 2 Front-end?
I am a fresh front-end developer and I want to start working with Magento 2.
I would like to know what are the required skills to start working on the Luma theme as a first step?
With what grid is ...
- 23
1
vote
1
answer
2k
views
(Magento2) Grunt Less problem with a new theme
I've cloned the blank theme for app/design/frontend/lima/mdl, swapping Magento/blank for lima/mdl and give this error:
Processed Area: frontend, Locale: pt_BR, Theme: lima/mdl, File
type: less.
...
- 33
1
vote
2
answers
1k
views
Magento 2 | deploy static content error
I got this error when running setup:static-content:deploy on Magento 2.1.8:
Compilation from source: /microcloud/domains/vampm2/domains/mydomains.co.uk/http/vendor/magento/theme-frontend-blank/web/...
- 2,919
1
vote
0
answers
73
views
Change colour of discount code dropdown on cart page in Luma - Magento 2
On the cart page in the Luma theme there is a dropdown that when clicked expands to allow you to enter a discount code.
What is the less variable to change this colour please?
This is the CSS that ...
- 344
0
votes
1
answer
214
views
Magento 2 | Troubles changing CSS class attribute value.
I am struggling changing a CSS class attribute value of "float :left" to "float: none" for ages now.
I have a class in here:
I tired everything... I found the class in http\app\...
- 2,919
2
votes
0
answers
261
views
Grunt - is it possible to watch custome module less files?
I figured out how to watch less files changes inside my custome theme folder using Grunt, but is there any way how to watch less files in custome module?
Let's assume module like so:
app/code/...
- 45
4
votes
1
answer
6k
views
Magento2 : How to override less variable value
How to override default blank theme less variable value?
Generally veriable are declare in lib\web\css\source\lib\variables directory.
i.e from file
lib\web\css\source\lib\variables_typography....
- 2,593
3
votes
2
answers
5k
views
Magento2 : Adding my own Background Image to a Custom Theme
I've added a custom magento theme, and now im trying to add a background image to it.
But the dev console in chrome & firefox keeps saying:
"Could not load the image".
I've put the image in ...
- 281
0
votes
2
answers
1k
views
Using media queries in
I'm extending the blank theme and adding styles to an _extend.less file located in
/app/design/frontend/neil/mytheme/web/css/source/_extend.less
Inside the file iv've got the following code
// ...
0
votes
1
answer
673
views
Cannot override _forms.less
Ive tried to override the _forms.less file in my theme but its only extending the original _forms.less.
My file is placed under app/design/frontend/Vendor/Theme/web/css/source/_forms.less.
I am ...
- 201
9
votes
3
answers
2k
views
How does Magento 2 work with CSS grunt-autoprefixer
From looking at a fresh install of Magento 2 (v2.1.8) I see from their Gruntfile.js and package.json files that Magento is using grunt-autoprefixer
This is great, CSS autoprefixers are really useful. ...
- 4,823
0
votes
1
answer
1k
views
Using LESS variables in extended LESS file Magento 2
I need to use LESS Variables in my extended LESS file in my theme.
I've this code in my _extend.less in this location My_Magento\app\design\frontend\<My_Vendor>\<My_Theme>\web\i18n\fa_IR\...
- 109
1
vote
0
answers
398
views
Adding Bootstrap RTL LESS to Magento 2 theme
I need to include bootstrap-rtl LESS files to my theme when using fa_IR locale.
So I did:
Add those downloaded LESS files to: app/design/frontend/<Vendor>/<Theme_Name>/web/i18n/fa_IR/...
- 109
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 ....
user56319
4
votes
1
answer
8k
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 ...
- 43
1
vote
1
answer
446
views
How to amend header to include background image - Magento 2.1.7
I have a custom theme on Magento 2.1.7 installation, based on the Blank theme. I am trying to amend the header block to have a background image (behind the logo - though this is not important). I have ...
- 11
1
vote
0
answers
382
views
Override _colors.less in backend
I need to override _colors.less to change color on admin backend.
The file is here : vendo/theme-adminhtml-backend/web/css/source/variables/_colors.less
I don't find solution to do it, I need to ...
1
vote
1
answer
110
views
How to setup grunt themes.js for my theme. Should I point to css folders of blank theme?
I don't know if I should point to the folders I have created under my theme or should I use the ones that I inherit from which is blank. I have created my own folders but they are empty. Can I import ...
- 327
1
vote
2
answers
2k
views
How to make buttons Add to Compare and Add to Wishlist in different parent blocks?
I try to make buttons Add to Compare and Add to Wishlist the same thing as in the picture.
Important is that in sheet mode, they both should be on right, as in the default theme. In the grid mode - ...
- 678
1
vote
1
answer
1k
views
Category grid Display - Item Hover
On main category page when I mouse over each product - this is how they show. Product image displays - Title/Price get covered up.
There seems to be another hover box behind and below the main one ...
- 47
0
votes
1
answer
387
views
Magento 2 - Create also symlink to .css
I have managed to successfully install Magento 2 with a downloaded theme after many hours of struggling... Now I'm facing the symlink issue.
I've installed everything, php intl extension, grunt, ...
- 623
2
votes
1
answer
978
views
Difference between _extend.less . and _extends.less
While working on a custom theme with blank parent theme , I noticed strange behaviors:
First of all, gulp and grunt give a different output. Mostly these are parts of code in different order (on gulp'...
- 187
1
vote
0
answers
148
views
Add Custom Mixin To Lib Less
I can use .lib-clearfix() in source/_module.less files within custom modules, I want to add a mixin similar to that so I can call it from all modules but have it stored within the theme. What is the ...
- 1,533
2
votes
0
answers
118
views
magento 2 Grunt watch loads old css when changing imported css file
When I use Grunt Watch my less compile does not work as I expect it to be.
When I work directly in my theme. less file all perfectly changes and even with livereload works absolutely great.
But ...
- 1,503
0
votes
1
answer
47
views
Magento 2 : Where I put my css?
I have installed magento 2.1.7 with custom theme. Now I want to add a custom css file for modifying theme css.
In that case what's the best practice to add css file.
Create a .less file and include ...
- 2,723
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 ...
- 33
0
votes
1
answer
744
views
Magento 2 How to correctly change the size of the minicart icon on the desktop?
Copy theme Luma.
I tried to find the correct solution in the documentation and found that this is done using .lib-dropdown in app\design\frontend\Vendorname\default\Magento_Checkout\web\css\source\...
- 678
1
vote
1
answer
2k
views
How to use Magento 2's UI Library Layout LESS variables
In the Magento 2 UI library there are LESS variables for the layout grid. See Magento UI Library > Layout.
Particullarly there are these two:
Variables list names Default value ...
- 4,823
1
vote
2
answers
5k
views
How to add style rules to print.css
In M2 they use custom .media-width mixin rules to add to styles-m.css or styles-l.css.
//
// Common
// _____________________________________________
& when (@media-common = true) {
.catalog-...
- 4,823
0
votes
1
answer
363
views
Can edit .less and .css file though FTP?
I have several question about how to modify files in Magento2.
I only have an FTP user. Is possible to modify .less and .css files using FTP
I read something about compiling the .less, how can i do ...
0
votes
2
answers
382
views
Proper Magento 2.1 Frontend develop flow
I am approaching Magento 2 for some projects and I am trying to setup an efficient workflow for frontend developing.
So far I followed this guide to setup a theme with a blank theme as a parent.
I ...
- 1