2

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.

Improve this question
2

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.

Improve this answer
2
  • Thank you, finally! Now my question is... is _extend.less the right way to do it or is it the quick way? Does it slow the site down more than finding the editing the real .less files for the theme? – mitchellsk Jun 10 '16 at 0:08
  • The way magento looks at it, this is the real .less file. When it does compilation of the styles, this one just gets added to the bottom when is merges everything together. The only thing you are adding is more css, which is then minified into the pub/static folders into two files, css/styles-m.css and css/styles-l.css. There is a lot more that goes into that whole process, but for what you need, this is the 'official' correct way to add in override styles. There are a lot of other ways to do it, for given your question, this is what i would recommend. – circlesix Jun 10 '16 at 13:31
0

Magento always seems unnecessarily complex at first, but I assure you there are good reasons that things are implemented this way.

When working with the frontend in developer mode, the first thing you will want to do is install Grunt, which will allow you to easily compile your LESS files. You'll want to avoid deleting all your CSS files and having the PHP-based LESS processor to rebuild your CSS each and every time. Here is a link to Magento dev docs which covers installing and configuring Grunt.

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html#grunt_prereq

Magento 2 does adds a little extra to standard LESS compilation in order to do a type of "file fallback" and to use a magento-specific directive called //@magento_import. It's this @magento_import which makes modifying styles so easy.

Since you created a theme, in your theme directory, add web/css/source/_extend.less, and put your styles here. A lesson in LESS is beyond the scope of this answer, but you could add line that says the following:

.product-info-main .page-title-wrapper .page-title {
    color: blue;
}

Good luck!

Improve this answer
0
  • create a new theme if you have not created yet inside app/design/frontend/{vendor}/{yourTheme}/. You can use Blank or Luma theme. You can also create new theme which inherites from Blank (inheritance is defined within theme.xml). If you are already using some theme then skip this step.
  • edit .less within your theme so the changes stay visible and don't get replaced when clearing the cache or upgrading the system.
  • Use grunt to compile your .less into deployment files.
  • You can also setup sourcemaps to pin point your styling within the theme .less files so you can be more productive.

Some useful references:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.