Magento 2 – Simple Tutorial on How to Change a Color

cssmagento2

I know css and I come from a asp.net and mysql background but with all the Magento2 .less files and seemingly endless nested folders I can not figure out how to do what should be a very simple thing after two weeks and many tutorials.

I've done Alan's Hello World and it works, I've created a theme file and assigned it to my store, I've added our logo, I have shell access and mysql workbench connecting and can see everything, I have developer mode on so I can see the block names and module paths.

Please tell me how to change something simple like the color of the product title on the product details page.

I love the database and flexibility of M2 and am sure it will do whatever we want it to but how can I hope to use M2 if one little thing like a font color is so hard to change… I need to start making M2 look like our current site or we need to abandon M2 quickly. Extremely frustrated with the lack of online tutorials, admin area hints, and apparent unnecessary complexity.

Best Answer

I really liked this book for getting up and running with Magento 2. It's not super deep in the topics it dives into, but does a great job covering the basic day to day tasks needed. There aren't a lot of resources for Magento 2 yet since the platform is so new and so much is changing from beta when it was released a few months back that most writers have had a hard time keeping up.

Magento 2 Development Cookbook

I also think the Dev Docs are really good for getting up and running. There is a lot to front end dev with Magento 2, and it takes some time to get the way they are defining the front end workflow, but once you have the basics down, it can be really enjoyable.

Magento Dev Docs

To answer your direct question, if you have a theme already created you need to make _extend.less file for your theme in app/design/frontend/{{Vendor_Namespace}}/{{Theme_Name}}/web/css/source/_extend.less.

In this file you can place what ever css or less code you need to override any other styles on the site. When you compile the code, your styles will show up at the end of the file, giving you the ability to have css specificity over the theme you are inheriting from (avoiding !important tags).

While you are getting set up and comfortable with the system, I would recommend setting your site to "client side less compilation" set in Stores-> Config-> Advanced-> Front-end development workflow. This will compile all your styles when you refresh the page you are working on. It's not as fast as using Grunt to compile, but since Grunt has a few more steps involved with getting it working, I would wait until you are more comfortable with the workflow first.

Related Topic