Changing the colour of the upper Blue horizontal bar

Question

Is there a way to change the colour of the Upper horizontal tool bar from the default blue colour to a custom color? Thanks

Answer 1

You can try with this style in either your master page or a css file:

div#suiteBarLeft{
background-color: red;
}

In this example, the top blue color will be changed to red, you can change it to any color you want.

Answer 2

yes you can, add this css to change:

create a css file called customstyles.css and add the following:

.s4-ribbonrow
{
   color:purple!important;
}

i would like to note that you need important to persist the changes(overwrite) default settings otherwise it wouldnt change

now add this to the masterpage:

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/Custom/customstyles.css %>" After="corev4.css" runat="server"/>

add the css file to the Style Library located here:

site actions -> View all site content -> under 'document library' select Style Library -> create a new folder called 'Custom' -> go into the new folder and import the css file

now refresh page! you will need to update the style library for every change to css obviuosly! or you can add it to _Layouts folder in 12/14/15 hive instead and its easier to ammend ;)

and the result is:

use ie F12 developer to find out the css class/id name and add it to the css file to brand/style ;)

for 2013

div #suiteBarLeft
{
   color:purple!important;
}