Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.


Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Cloudy theme - how to make changes in theme colour


5 Posts   1206 Views


23 May 2012 at 1:31pm (Last edited: 24 May 2012 7:27pm), Community Member, 22 Posts

how do I change the top area (the first inch of background) gradient grey colours in the cloudy theme to a gradient light blue? I normally know how to change #colours in a css, but not in a CMS. I dont know which files or lines of code in the css or scss to change, or if it is in the third party/bootstrap somewhere ... as there are hundreds of options to choose from. I cant install compass because it says I need ruby, and cant find ruby anywhere.
I would also change the navigation bar from black, to a complimentary dark blue....not sure which line of code in which file to change either.
many thanks


25 May 2012 at 8:20am (Last edited: 25 May 2012 8:22am), Community Member, 5 Posts

Look in the Sitename/themes/Cloudy/layout.css file. Look in the section for "container" or the like to set the background color or image. Look for the section titled "Navigation" in the same css file and look for "Primary Wrapper" and "Secondary" wrapper to set the background colors for the navigation bar.


26 May 2012 at 4:58pm Community Member, 22 Posts

thanks they were in theme/css/cloudybase.css.
the gradient was in a .html class under layout and was easy to change, thank you.
The navigation was more problematical as there were dozens and dozens of nav classes and I tested out changes to over half of them and it took 2 hours but still could not find the class that controlled the nav bar. so I will leave that to the too hard basket.


6 June 2012 at 6:09pm Community Member, 28 Posts

.navbar-inner controls the colour of the navbar.


6 June 2012 at 7:27pm Community Member, 22 Posts