SharePoint 2010 CSS Chart

CSS Comments Screenshots
body #s4-ribboncont{background-image:none;} /*Globally turning off bordersThis is needed to have any of the style below to take effect.  
.ms-cui-groupSeparator {border-right:1px solid #E7E7E8 !important; }.ms-cui-topBar2{border-width:0px;}*/ /*Turn on separators in the Ribbon  
.ms-cui-ribbonTopBars{background: red url() repeat-x !important;

padding-top:0px;
}
/* Set the background for the tabs at the top (Browse / Page) */ ms-cui-ribbonTopBars
.ms-cui-cg-i{background-image:url() !important;

background-position:bottom left;
background-repeat:no-repeat !important;
height:15px;
margin-bottom:2px;
}
.ms-cui-cg-db .ms-cui-cg-t{height:17px; background-image:url(‘http://integration.echn.ca/Media/SiteImages/bgBackground.gif’) !important; background-position:bottom right !important; background-repeat:no-repeat !important; margin-left:4px;}
.ms-cui-cg-t-i{ color:white; font-weight:bold; }
.ribbon-wrapper{position:relative;}
/* Set the background for the additional dynamic tabs (Web parts / Lists etc.) */  
.fixed-ribbon{position:fixed; top:0; width:950px; z-index:21;}    
.s4-title{height:34px; background: red url() repeat-x;

}
  s4-title
.s4-title h1 a,.s4-title h2 a,.s4-title h2 {color: red;}  
.s4-title .s4-pagedescription,.s4-title .s4uniqpermdescription {color:red;}   s4-title-s4-pagedescription
.ms-cui-tt-s .ms-cui-tt-a {color:red !important;

background: red url();
}
 
.ms-cui-tabBody{background:red url();

}
/* Set the background of the Tab Body */
  The next section changes the style one of the additional tools menu items. There are several in the Corev4 CSS to change.  
.ms-cui-cg-db .ms-cui-cg-t{color: red;

background:url(“/_layouts/images/bgximg.png”) repeat-x -0px -834px;
}
/* Font color of the Library Tools and background using bgximg.png offset by -834px */
.ms-cui-cg-db .ms-cui-tt-a:hover {border-color: red;

border-top-color:red;
background:url(“/_layouts/images/bgximg.png”) repeat-x -0px -834px;
}
/*Borders and background of Library Tools when menu is not selected.
.ms-cui-cg-db .ms-cui-cg-i{border-color: red;} /* Border above library tools when not selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-cg-i{border-color: red;} /* Border above library tools when sub-menu item selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-ul{background-color: red;

border-color: red;
}
/* Gap between menu items in the Library Tools when sub-menu item selected */
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-cg-t{color: red;

background:url(“/_layouts/images/bgximg.png”) repeat-x -0px -834px;
}
/* Background of Library Tools when sub-menu item selected */
.ms-cui-cg-db .ms-cui-ct-first .ms-cui-tt-a{border-left-color: red;} .ms-cui-cg-db .ms-cui-ct-last .ms-cui-tt-a{border-left-color: red;} /*Borders of the Library Tools when Browse tab selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{border-left-color: red;} /* Border color on the first sub-menu item when selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{border-right-color: red;} /* Border color on the last sub-menu item when not selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{border-left-color: red; border-right-color: red;} /* Border color on the last sub-menu item when it’s selected*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a{border-color: red;

border-top-color:red;
background-color:red;
}
/*None selected sub-menu item*/
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a:hover{background-color: red !important;

border-top-color: red;}
/*Library tools none selected sub-menu item on hover */
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-cg-t{

color:#0e400d;

background-color:red;

background-image:none;

}
 

.ms-cui-cg-gr .ms-cui-tt-a:hover{


border-color:#56c553;

border-top-color:#56c553;

background:red;

}
 

.ms-cui-cg-gr .ms-cui-tt-a:hover{


border-color:red;

border-top-color:red;

background:url(“/_layouts/images/bgximg.png”) repeat-x -0px
-832px;

}
 

.ms-cui-cg-gr .ms-cui-ct-last .ms-cui-tt-a{


border-right-color:red;

}
 

.ms-cui-cg-gr .ms-cui-ct-first .ms-cui-tt-a{


border-left-color:red;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-cg-t{


color:#0e400d;

background-color:red;

background-image:none;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a{


background-color:red;

border-color:#56c553;

border-top-color:#56c553;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{


border-color:#03a200;

background-color:red !important;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a:hover{


background-color:red !important;

border-color:#56c553;

border-top-color:#56c553;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{


border-left-color:red;

border-right-color:red;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{


border-right-color:red;

}
 

.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-ul{


background-color:red;

border-color:#03a200;

}
 
  /*Start of the Browse menu formatting.*/  
.s4-tn {background:red url();} /*Menu Bar background*/
.s4-tn li.static > a:hover{/* [ReplaceColor(themeColor:”Accent1″)] */ color:red;} /*Browse none selected menu items on hover */
.s4-toplinks .s4-tn a.selected:hover{color: red;} /*Color of selected menu item on hover event.*/
.s4-toplinks .s4-tn a.selected{border-color: red;

border-bottom-color: red;
border-top-color: red;
background-color: red;
}
/*Border and Background of selected menu item.*/
  /*Start of the Main Area formatting.*/  
body #s4-mainarea.s4-pr{background: red url();} /*Below the Ribbow half of the page.*/
.s4-ca.s4-ca-dlgNoRibbon{background: red url();} /*Behind the Main Content*/
body #s4-leftpanel-content{background: red url(); } /*Background of the Left Panel*/
.s4-specialNavLinkList{background: red url();} /*Background of the navigation link list on quicklaunch*/
body #s4-leftpanel-content{ padding:0px 0px 0px;

border:1px solid #ffffff;
border-top-width:0px;
border-right-width:1px;
border-bottom-width:0px;
border-left-width:1px;
}
/*Border of the quicklaunch*/

To help find additional styles in corev4.css please see this post on using the IE8 Developer Tools.

It will help you identify all the CSS that is affecting a selected region. 

31 Responses to SharePoint 2010 CSS Chart

  1. Pingback: SharePoint Foundation Master Page CSS « Marc's SharePoint Notes and Findings

  2. Pingback: Tweets that mention SharePoint 2010 CSS Chart « Marc's SharePoint Notes and Findings -- Topsy.com

  3. glai says:

    Thanks Marc, this is a great help. I am having trouble updating the colors of the Library Tools – “Documents” and “Library” I have the hover over and when clicked but after clicking and unhovering there is still the green color showing. I’ve searched my entire page in designer and am not able to find that green to change it out. Any tips?

  4. marcsimo says:

    Hi glai,

    I think you are referring to:
    .ms-cui-cg-db .ms-cui-cg-t{color: red; background:url(“/_layouts/images/bgximg.png”) repeat-x -0px -834px; }

    It is the image that is offset to display the green colour behind the Library Tools. In this case -834px is the offset. For blue you would use -856px. You can access this by browsing to your SharePoint site at http://mysite/_layouts/images/bgximg.png. Zoom in, right-click on the image and save it locally. Then open the image in something like mspaint to determine the offset you want to use. Or just remove the url in the css and add your own colour.

    If your were talking about another section like the Calendar Tools, their css is different. I’ve added that to the css table on the blog.
    Note: that these ‘Tools’ are part of a series all using different colours. Search for ‘.ms-cui-cg-‘ in in the corev4.css file to see them.

    Cheers,
    Marc

  5. tim says:

    excellent work ! thanks alot

    cheers,
    tim

  6. glai says:

    thanks Marc for the quick reply – that did the trick. I wasn’t looking for an image. 🙂

    Another question, I am working on editing a Search Center site and I am not able to change the dark blue color at the top. It lets me change the site actions button but I can’t figure out the bar above that. It is not called the same as a regular site.

    Any guidance very appreciated.

    • marcsimo says:

      Hey there glai,

      The search center is set to use the custom.master page for the site.

      <%@ Page language="C#" MasterPageFile="~masterurl/custom.master" ...>
      

      You’ll have to copy your customized master page into the Master Page Library for that site in SharePoint designer. The right-click it and select ‘Set as Custom Master Page’. Should do the trick.

      It’s actually using the minimal.master page. I would copy this page and add your custom css overrides to it, then set it to be the custom master page.

      Cheers,
      Marc

      • glai says:

        thanks Marc, that helped get the page to show. I am still unable to edit the very top color above where the breadcrumb would be. Do you know what the that area is called in the search center?

        Thanks!

      • glai says:

        Thanks Marc, I just realized what you meant that there is a custom master page and minimal master page, when editing both I get the outcome I am looking for.

        Thanks again!
        Ga-Hsin

  7. Robyn says:

    I’m having trouble changing the thin horizontal line under Site Actions and above the ribbon that goes all the way across the page. Spent much of the day today searching for it. Any help is appreciated.

    Thanks!
    Robyn

  8. k2 says:

    Robyn,
    Is it this? .ms-cui-topBar2

    k2

  9. Louise says:

    Thank you! this is brilliant 🙂 I started makign one myself, but I always got side tracked with the little things… like pixels were out 😛 May I have permission to pop this onto my blog? I think my readers will seriously benefit, and as a “cheat sheet” this is awesome.

  10. Thanks for the Info! For 2007, look at heather solomon’s SP 2007 chart

  11. J says:

    This is great! Definitely a life saver/time saver! A few books don’t even take it this far.

    Is there any specific lines of CSS that apply specifically to the flyout menus on the menu bar when you have additional inks? Say you had a flyout on the ‘Team Site’ above on the menu bar, any help?

    Thanks!

  12. Guilherme says:

    Great!!!!!!! Nice Work!!!

  13. Pingback: Design Especializado para SharePoint « Douglas Romão

  14. Marcel says:

    very helpful – thanks a lot!

  15. abc says:

    Nice Effort …..Thanks a1 lot

  16. saumil says:

    Really Good work

  17. Ken Thompson says:

    Does anyone know how to change the font color of “.ms-cui-ct-first” and “.ms-cui-ct-last”.

    Thanks for any answer

  18. Ken Thompson says:

    Thanks.

    I just tried to change the css code but it didn’t worked.
    Other changes worked perfectly:

    The following links shows what I like to do.

    Thanks for your answers

  19. Ken Thompson says:

    One more question:

    How can I use the same custome css for all site collections?

  20. Chip says:

    Thank you for your post this has been a big help. I do have something that I am coming up against and I am wondering if you can help. I have modified .s4-toplinks .s4-tn A.selected to show the selected menu items in red like the example above and it works great. I also have added a grouping/folder in the menu items to get the drop down for a group of similar sites and I do not have a page to link to so I left it blank. The drop down works great but it does not turn the red color when an item in that grouping/folder is selected. If I add a link to it then it works as I expected. Is there a different section in the css file that covers this scenario? Any help you can provide is greatly appreciated.
    Thanks,
    Chip

  21. Ken Thompson says:

    One more question.

    I would like to change the font-color of the navigation. Could someone explain how I can change the color of the font in the main navigation and that drop down font-colors in the navigation has different color. As shown in the pic.

    This is the part of the .css I used to change to navigation font-color in general.
    .s4-tn .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
    color: #00224b;
    font-weight:bold
    }
    Thanks for your Help

  22. Ken Thompson says:

    Details:

  23. Pingback: SharePoint 2007 and 2010 do not display navigation « Solutions …

  24. Megha says:

    I am trying to add a banner image on top of the page where site logo is displayed. I tried below variations, only the color changes in first example, but image does not show in 2nd and 3rd examples. Only a white blank space shows instead of image!
    body .s4-title{ height:34px; background: red url() no-repeat !important;}
    body .s4-title{ height:34px; background:url(“/_layouts/images/banner.png”) no-repeat !important;}
    body .s4-title{ height:34px; background:url(“/Style%20Library/Images/banner.png”) no-repeat !important;}
    Any suggestion?

    Thanks

  25. Pingback: Handy Tool: SharePoint 2010 CSS Reference Charts | Welcome!

Leave a reply to Marcel Cancel reply