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.
Solved! Go to Solution.
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
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.
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:
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
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!
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
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.