Abount customizing styles and colors
October 26, 2015 at 8:09 amPosts: 12Member Reply #3352
Hi, I’m a Metronic theme user, and I wish to customize some of its parts. Basically these changes will comprise colour, although also I want to fine-tuning some elements to adapt to our brand styles. Is there any “white paper” or user guide to understand SCSS hierarchy? What I want is to avoid recursive styles and bloat the site with thousands of repetitive and unused code.
As I work with SASS, I would appreciate some hint about which “scss” file I must use to override the default Metronic theme. Should I to work over any of the “scss” files contained in the “Themes” folder (for example “blue.scss”)?
On the other hand, about “layout.scss”, “_base.scss” and “custom.scss” files. Which are their mission in the hierarchy? Which should I customize?
(I know the “custom.scss” from Bootstrap kits, but I’m not familiarized by the other two)
Many thanks in advance.
October 27, 2015 at 12:16 pmPosts: 4527Support Staff Reply #3370
Thanks for your feedback.
Our advice depends on the Metronic version. Could you please let us know what Metronic version are you using ?
October 28, 2015 at 4:20 pmPosts: 4527Support Staff Reply #3397
Please note there are layout based scss files, global scss component and plugin files under “scss” folder. Each admin theme has own layout scss files under “scss/admin/layout”, “scss/admin/layout2”, “scss/admin/layout3”. etc.
Each layout has own theme colors defined under “themes” folder of each layout. _base.scss defines base styles for each theme color and in blue.scss for example you will just set the color through variables. I would suggest you to change some variables and compile scss to update the actual css files under assets folder.
If you need any further assistance please let us know.
November 9, 2015 at 6:10 pmPosts: 12Member Reply #3617This reply has been marked as private.
November 11, 2015 at 8:37 amPosts: 4527Support Staff Reply #3630This reply has been marked as private.
April 25, 2016 at 3:31 pmPosts: 2Member Reply #5967
I used keenthemes for my major business website aspects, however, does it still covers its terms when I have someone from other source like some expert at http://eatmywords.com/ works on it? like altering some themes attributes and values?
April 25, 2016 at 6:54 pmPosts: 4527Support Staff Reply #5977
Yes, sure. You can purchase the theme and hire any consultant or developer to develop your site further by altering Metronic according to your project requirements. This is normal approach when you purchase a premium themes.
July 11, 2018 at 1:17 amPosts: 1Member Reply #18750
I’m still using Metronic v. 4.7.5 and would like to use my custom color. And I followed your advice above by adding new colorname or change colorcode in _colors.scss under sass/global but still not working
“pinkk”: (base:#FF69B4, font: #ffffff),
Would you please suggest what I need to do to make it working?
Many thanks in advance 🙂
July 13, 2018 at 5:13 amPosts: 4527Support Staff Reply #18800
By right it should work if you just added a new color, as the rest of the colors already work. Did you compile the sass files to regenerate the css files ? Please refer to the documentation on how to compile the theme sass.
May I ask if you have active support subscription ? Metronic support subscription must be renewed every 6 months according to the Envato’s recent changes in the support policy. Could you please provide your support subscription to continue with the theme support.
You must be logged in to reply to this topic.