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

SPFx Fantastic 40 Web Parts

SPFx Fantastic 40 Web Parts Ref Link :  https://github.com/OlivierCC/spfx-40-fantastics Menu & Carousels & News Management Overview Web Part Description News Carousel Insert a classical, responsive, cool & touch ready News Carousel. With this web part, you can add easily news focus in your SharePoint site. The users can easily navigate in news items, with buttons or with touch. Tiles Menu This Web Part allows you to very easily create a menu in form of tiles that is responsive and adapted for mobile. You can directly manage the items on your menu, with a title, an image and manage Visual rendering options. 3D Carousel Insert a 3D Carousel in your SharePoint pages. With this Web Part, you can manage your menu items and create automatically a 3D carousel. Coverflow Generates a Coverflow Apple like menu in your pages. Manage your menu items with title and picture and create a cool coverflow menu. News Slider Insert a News Slider Tiles control to your pages....
Post a Comment
Read more

HOW TO CREATE A SHAREPOINT EMPLOYEE DIRECTORY?

Option 1: Use the Contact List Web Part available in SharePoint If you are a small organization, you can simply use an out of the box Web Part called Contacts to manage contact information. The beauty of this approach is that you can customize your Contacts Web Part with any columns/metadata that you wish. That means you can add all sorts of phone numbers, notes, other information and group/organize it in any way you wish on your SharePoint site or page The second option when it comes to  SharePoint Employee Directory  is to create custom sites/pages using  Content Search Web  part. This option works well when you have a larger organization and want to create an Employee Directory that allows you to filter the different properties using left-hand-side metadata criteria. You do need to be an advanced SharePoint User to create this sort of Directory. If you are comfortable with some customization and want to give it a try, here are couple of blog posts ...
Post a Comment
Read more

Delete unused workflow status columns in SharePoint list views using PowerShell

Delete unused workflow status columns in SharePoint list views using PowerShell SharePoint 2010 seems to be better than 2007 for removing workflow status columns from list views after a workflow has been removed or updated, but it does still leave them behind every now and again. I have been unable to trace exactly why this happens, but rather than waste time looking, I decided to write a quick PowerShell script to remove these columns as they cannot be deleted from the UI. This script works as a function – meaning that there are two parts to running it in the SharePoint 2010 Management Shell. First, you have to run the script shown below: function Delete-WorkflowColumn ($webURL, $listName, $columnName) {     #Setup variables from the user input     $web = Get-SPWeb $webURL     $list = $web.Lists[$listName]     $column = $list.Fields[$columnName]         #Make sure the column is not hid...
Post a Comment
Read more