CODEWITHSUNDEEP
csslessmagento2magento-2.0
Gordova
Gordova

Reputation: 347

Change CSS in Magento 2.0 Theme

I use Magento Blank as a parent theme.

I have created _theme.less.css in /app/design/frontend/MYVENDORNAME/MYTHEMENAME/web/css/source/ that contains this code:

@button-primary__background: @color-orange-red1;
@button-primary__hover__background: @color-orange-red4;
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;

I have flushed cache.

But buttons are still blue.

What am I doing wrong?

Upvotes: 0

Views: 3356

Answers (3)

Gordova
Gordova

Reputation: 347

All you had to do was to copy files from:

/vendor/magento/theme-frontend-blank/web/css/

Into theme directory:

/app/design/frontend/MYVENDORNAME/MYTHEMENAME/web/css/

You don't have to move all files, you can just replace the files you want to make changes to.

I think you have to learn LESS to be able to style the theme properly. But for simple static CSS changes this might work:

1) Add /dev1/vendor/magento/theme-frontend-blank/web/css/_styles.less with the following content:

@import 'source/lib/_lib.less'; // Global lib
@import 'source/_sources.less'; // Theme styles
@import 'source/_components.less'; // Components styles (modal/sliding panel)

body{background:#f00}

Upvotes: 0

Ashish Patel
Ashish Patel

Reputation: 772

First add your custom css

Go to:

/app/design/frontend/Magento/MYVENDORNAME/MYTHEMENAME/layout/default_head_blocks.xml

And add css under head block looks like this:

<head><css src="css/custom.css" /></head>

And than after create custom.css file in this path:

/app/design/frontend/Magento/MYVENDORNAME/MYTHEMENAME/web/css/custom.css

Run your css, hopefully it's work for you.

Upvotes: 0

Ty T.
Ty T.

Reputation: 586

This code needs to go into a .less file and be compiled into a .css file as this isn't code styles that can be read natively in a css file.

Upvotes: 1

Related Questions