Sample theme help

[mikefifield]

Can someone please post a sample theme for magento based on either luma or the blank theme in a zip file with simple instructions on how to install it? I have been going in circles for a while now trying to create a theme based on luma but have been unable to make any progress. 

[gtcmage]

Sure

Dwload: http://magento2test.a2hosted.com/app.zip

1) Extract directly to your magento folder, you should get <public_html> / app / design / frontend / gtc / theme-plasma /

2) Logoff/login your Admin Panel and go to Store > Configuration > Design > Theme

3) Set it to GTC Theme-Plasma.... etc etc etc

4) How to to extend or override the layouts, templates, css, etc : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/bk-frontend-dev-guide.html

Hope this helps a tad

[mikefifield]

Thanks for the reply and for the the example. The part I am actually having the most trouble with is making changes to css. If you or someone else could give an example of how to go about making a css change to a custom theme and getting magento to display the change it would be greatly appreciated. The css change I have been testing with and having no luck is setting the dark grey bar across the very top of the luma theme to some other color... white for example. Can someone demonstrate how to do this? Thanks again for your reply and demo files.

[gtcmage]

Sure

Create a new file _extend.less and save it in the folder below:

app / design / frontend / gtc / theme-plasma / web / css / source/ (_extend.less)

For instance, to change the color of the action buttons from blue to red, add below to your _extend.less files.

// Template: _theme.less
//  --------------------------------------------
@button-primary__background: @color-red10;
@button-primary__border: 1px solid @color-red10;
@button-primary__hover__background: @color-red9;
@button-primary__hover__border: 1px solid @color-red9;

Delete the content of  / var / view_preprocessed / and / pub / static/

And refresh your browser! You'll get the idea

I haven't invented any of this stuff, all from: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html

ps. you want to "extend" as much as possible instead of making core file changes.

[gtcmage]

Let's change your header bg color for instance:

Using Firefox built-in "Inspect Element (Q)", I right-click on the top header and select Inspect Element. It shows that the class for the header color is .header.panel

Using Notepad++, I go into menu Search > Find in Files > and search for ".header.panel" inside the stock Luma theme folder (/ vendor / magento / theme-frontend-luma/) to find the variable for that class

Search returned variable @header-panel__background-color (with a bit of digging)

I go back to my _extend.less file, add the variable and add a color to it:

@header-panel__background-color: @color-red10;

ps: For css I've just notice that you only need to empty the /var/view_preprocessed/ content to get the theme to update.

$ cd /var/view_preprocessed/

$ rm -r css  source

Couldn't be easier mate. All good fun

[mikefifield]

Thank you for the detailed response! I have followed your instructions but the css files do not seem to be loading properly as you can see here http://summayoga.com/ . Not sure what I'm missing? 

And thank you again for all the time you put into trying to help with this!

[gtcmage · Accepted solution]

No worries.

Had a quick look at your domain and the top header class is completely gone. I mean the bar with the welcome msg, sign-in and my account link. Presume you are working on it atm.

RE the CSS not updating; make sure you delete everything in /var/view_preprocessed/ and delete the content of /pub/static/frontend/ to be on the safe side. You might also want to flush everything from your Admin > Store > Cache Management > click all the buttons in there (bottom ones, flush, update)

That should do it

[mikefifield]

I think I've got it sorted. It seems it was a cache problem. Deleting everything from the cache /pub/static/frontend/ and clearing the cache in the backend took care of it. Thank you again for all your help. Cheers.