cancel
Showing results for 
Search instead for 
Did you mean: 

Sample theme help

SOLVED

Sample theme help

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. 

 

 

7 REPLIES

Re: Sample theme help

Sure Smiley Wink

 

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

Re: Sample theme help

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.

Re: Sample theme help

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.

 

Re: Sample theme help

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

Re: Sample theme help

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!

Re: Sample theme help

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

Re: Sample theme help

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.