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-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 h1 a,.s4-title h2 a,.s4-title h2 {color: red;} |  | |
| .s4-title .s4-pagedescription,.s4-title .s4uniqpermdescription {color:red;} |  | |
| .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*/ |  |
Thanks for the Useful Info Mark.
Ref Link http://sp2010notes.wordpress.com/sharepoint-2010-css-chart
No comments:
Post a Comment