none
Sharepoint Change Top Bar Color

    Question

  • Hello There, 

    I would like to change the Top Bar color  on Sharepoint 2016 

    I have found this css

    .s4-ribbonrow
    {
       color:purple!important;
    }
    But i don't think is correct as no class with that name in html 

    Also I don't know where to find the css file. I am using sharepoint designer but can't seem to find that "SuiteNav.css" file 

    Please Help 

    here is a print screen i don't know if it helps 

    Many Thanks 

    Andrea


    jeudi 6 juillet 2017 17:19

Réponses

  • Hi Andrea,

    Please use the following CSS code:

    <style type="text/css">
    .o365cs-base .o365cs-navMenuButton{
    background-color:purple!important
    }
    .o365cs-topnavBGColor-2.o365cs-base{
    background-color:purple!important
    }
    
    .o365cs-base .o365cs-topnavLinkBackground-2{
    background-color:purple!important
    }
    </style>

    The result is:

    Thanks,

    Wendy


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marqué comme réponse Andreamancino samedi 8 juillet 2017 13:23
    vendredi 7 juillet 2017 09:36
    Modérateur

Toutes les réponses

  • Hi

    this class is applied in corev15.css file, the main css file 

    You should apply your custom colur in a separate css file 

    More details about css files in sharepoint 2016

    https://msdn.microsoft.com/en-us/pnp_articles/use-css-to-brand-pages 


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Proposé comme réponse Raghava Chary jeudi 6 juillet 2017 19:43
    jeudi 6 juillet 2017 19:24
  • Hi ,

    try this

    .o365cs-base.o365cs-topnavBGColor-2

    {

    background-color:purple;

    }

    SuiteNav.css  is stored in _layouts folder and not recommend to make any changes to the file .

    jeudi 6 juillet 2017 19:42
  • Hi,

    I saw that you have the Online version, so this bar is related to Office 356 not to SharePoint, i already do that

    .o365cs-topnavBGColor-2.o365cs-base

    {

    color:purple!important;

    }

    Good luck

    vendredi 7 juillet 2017 00:55
  • Thanks for your reply, 

    yes I  have downloaded office 365 for it, so in which css file do I add that class code?

    I am struggling to find which css file does what and where is located. I have sharepoint designer 2013 which browse all files. Are there not default locations like worpdress for example? 

    thanks Again

    Andrea  

    vendredi 7 juillet 2017 08:26
  • Hi Andrea,

    Please use the following CSS code:

    <style type="text/css">
    .o365cs-base .o365cs-navMenuButton{
    background-color:purple!important
    }
    .o365cs-topnavBGColor-2.o365cs-base{
    background-color:purple!important
    }
    
    .o365cs-base .o365cs-topnavLinkBackground-2{
    background-color:purple!important
    }
    </style>

    The result is:

    Thanks,

    Wendy


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marqué comme réponse Andreamancino samedi 8 juillet 2017 13:23
    vendredi 7 juillet 2017 09:36
    Modérateur
  • Hi Wendy 

    I really Appreciate your help, But can you please advise on which file do I Add those styles ? 

    Many thanks 
    Andrea 

    vendredi 7 juillet 2017 17:08
  • Hi ,

    You can upload your style sheet in any sitelibrary.

    Go to sitesettings >Masterpage   

    Under Alternate CSS section specify your new style sheet.

    vendredi 7 juillet 2017 19:42
  •  I know this is an old thread and possibly not checked... However

     Thank You.. !!! Thank You!!! I have been searching for this for months. I have the .css for 2007 to 2016. Just couldnt find this. 

     Thank you so much!

    - Joe


    J.Johannes

    vendredi 13 juillet 2018 16:43