Skip to main content

SharePoint 2010 CSS Chart


SharePoint 2010 CSS Chart

CSS CommentsScreenshots
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*/

Thanks for the Useful Info Mark.

Ref Link http://sp2010notes.wordpress.com/sharepoint-2010-css-chart


Comments

Post a Comment

Popular posts from this blog

Site Logo Not Changing on Web Part Pages

I tested and reproduced your issue in my local machine. Since the Web Part Pages would override the content in PlaceHolderPageTitleInTitleArea place holder, the site logo would not change automatically. So would you please try remove or comment the following control TitleBarWebPart: See the similar scenario and solution: http://emanonsolutions.blogspot.com/2010/02/left-navigation-webpart-pages.html Hope this can help.
Post a Comment
Read more

Create a Custom Site Definition with Additional Content in SharePoint 2010 Using Visual Studio 2010

·          Web Templates ·          Site Definitions and Configurations ·          Deciding Between Custom Web Templates and Custom Site Definitions ·          Understanding Onet.xml Files ·          How to: Create a Custom Web Template ·          Overview of Creating Custom Site Definitions Site Template Configurator utility http://stefan-stanev-sharepoint-blog.blogspot.com/search/label/SharePoint%202010 Create a Custom Site Definition with Additional Content in SharePoint 2010 Using Visual Studio 2010 http://community.bamboosolutions.com/blogs/sharepoint-2010/archive/2010/11/11/sharepoint-2010-cookbook-how-to-create-a-custom-site-definition-with-additional-content-in-sharepoint-2010-using-visual-studio-2010.aspx http://blogs.msdn.com/b/allenwang/...
1 comment
Read more

SharePoint 2010 Branding

Real World Branding with SharePoint 2010 Publishing Sites http://msdn.microsoft.com/en-us/library/gg430141.aspx#Y13640 The most important source of information is the  SDK . I can’t stress that enough. There is so much more documentation with this release than there was with 2007. However, we are all in the habit of looking to each other for information first. Researching the SDK and walking through the Development classes, even if you aren’t a developer. is an important step in understanding the complex relationships between the objects in SharePoint and ASP.NET. Planning Strategy and Design Visual Design SharePoint 2010 Layered Photoshop File!  – Erik Swenson Universal Usability Guidelines The Pursuit of Interface Design Simplicity  -Luke Wroblewski Visible Narratives: Understanding Visual Organization  -Luke Wroblewski Common Visual Design Misconceptions  – Luke Wroblewski Usability 20 Do’s and Don’ts of Effective Web Design Introduction to Good Usab...
2 comments
Read more