CSS Style SharePoint 2010 Branding

I had some issues with styling a SharePoint 2010 site with custom dark blue backgrounds and I need white foregrounds for most of the title, breadcrumb, and list view drop downs.  The following two were elusive but I figured them out by trial and error.  I suggest changing an elements color to lime so that you can see each change one at a time and confirm it's use.  Then you can change the color and whether or not you want it bold, italic, etc.

/*  This changes the context-specific menu links that show up on certain lists like Permissions, Picture Libraries, and Slide Libraries.  */
.ms-menu-a:link {
 color: black;
}

/* This styles the View Selector drop down menu as shown statically on the page to see the views. */
.ms-viewselector a:link {
 color:white;
}

Here is my entire CSS that I use for my master page styling (it includes the above 2 styles):

Icons:

dark-search-icon_24.png  This is from Icon Archive - a great site for icons, size 24 pixels:
http://www.iconarchive.com/show/dark-blog-icons-by-brainleaf/search-icon.html

HeaderBackground_BlueGradient_DiagonalLines_4x128_2.png
This is an adobe photoshop file I created as a blue gradient.  I used this guide to create it:
http://www.sitepoint.com/web-2-0-effects-photoshop-1/

CSS:

/*  MASTER PAGE  */
/* This style replaces the background of the main banner stripe which holds the site logo, Site Title, and breadcrumbs.  */
.s4-title {
 padding: 0px 0px 0px 10px;
 margin: 0px;
 min-height: 64px;
 background: url('/combat/customersolutions/PublishingImages/HeaderBackground_BlueGradient_DiagonalLines_4x128_2.png') repeat-x;
 word-wrap: break-word;
 -ms-word-wrap: break-word;
 overflow-x: hidden;
 border-bottom: 1px #212121 solid;
 border-top: 1px #212121 solid;
}
/*  This is applied to a span element to change the size and color of the Site Title text */
.LargeBreadcrumb {
 color: white;
 font-weight: bold;
 font-size: 20px;
}
/* These styles modify the First Element of the breadcrumbs at the top of the page */
/* Controls ANCHOR elements in the site title text. */
.s4-title h2 a {
 /* [ReplaceColor(themeColor:"Dark1")] */
 color: black;
 display: inline-block;
}
.s4-title h1 a {
 /* [ReplaceColor(themeColor:"Dark1")] */
 color: black;
 display: inline-block;
}
/*Hover state for 's4-title h1' ANCHOR element. */
.s4-title h2 {
 font-size: 1.4em;
 font-weight: normal;
 display: inline;
 padding: 0px;
 margin: 0px;
}
.s4-title h1 {
 font-size: 1.4em;
 font-weight: normal;
 display: inline;
 padding: 0px;
 margin: 0px;
}
/* These styles modify the Second Element of the breadcrumbs at the top of the page (Think view drop down and final location)*/
/* Controls ANCHOR elements in the title breadcrumb text. */
.s4-title h2 {
 /* [ReplaceColor(themeColor:"Dark2")] */
 color: black;
}
/* Hover state for the 's4-title h2 a' ANCHOR element. */
.s4-title h2 a {
 /* [ReplaceColor(themeColor:"Dark1")] */
 color: white;
 font-weight:bold;
 display: inline-block;
}
.s4-title h1 a {
 /* [ReplaceColor(themeColor:"Dark1")] */
 color: white;
 display: inline-block;
}
/*  This changes the context-specific menu links that show up on certain lists like Permissions, Picture Libraries, and Slide Libraries.  */
.ms-menu-a:link {
 color: black;
}

/* This styles the View Selector drop down menu as shown statically on the page to see the views. */
.ms-viewselector a:link {
 color:white;
}

/* Applied to DIV element that wraps the DIV element that contains the page description text; child of the 's4-titletext' TD element. Included in master page. */
/* I need to style the description white */
.s4-title .s4uniqpermdescription {
 margin-top: 6px;
 font-size: 1em; /* [ReplaceColor(themeColor:"Dark2")] */;
 color: white;
 font-weight: normal;
}
.s4-title .s4-pagedescription {
 margin-top: 6px;
 font-size: 1em; /* [ReplaceColor(themeColor:"Dark2")] */;
 color: white;
 font-weight: normal;
}
.ms-listdescription {
 color: white;
}
/* Applied to the "I Like It" and "Tags & Notes" elements */
.ms-socialNotif-text {
 color: white;
}
.ms-socialNotif:hover {
 border: 1px solid #E5E5E5;
 background-color: #2664A3;
}
/* These styles are overwritten to re-style the Global Navigation  */
/* Global Nav Borders */
body #s4-topheader2 {
 /* [RecolorImage(themeColor:"Light1")] */
 /*background:url("/_layouts/images/selbg.png") repeat-x left top; */
 /* [ReplaceColor(themeColor:"Light2")] */
 background-color: #444444;
 vertical-align: middle;
 min-height: 25px; /* [ReplaceColor(themeColor:"Light2-Lightest")] */ /* border-top:1px solid #333333;
 /* [ReplaceColor(themeColor:"Light2-Lighter")] */;
 border-bottom: 1px solid #111111;
}
/* Navigation list */
.s4-tn {
 background-color: #00557B;
 padding: 0px;
 margin: 0px;
}
/* Global navigation */
.s4-tn li.static > .menu-item {
 color: #fff;
 white-space: nowrap;
 border: 1px solid transparent;
 padding: 4px 10px;
 line-height: 12px;
 height: 15px;
}
/* Hover */
.s4-tn li.static > a:hover {
 background: url("/_layouts/Images/selbg.png") repeat-x left top;
 background-color: #0087C1;
 color: #fff;
 text-decoration: none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected {
 background: url("/_layouts/images/selbg.png") repeat-x left top;
 background-color: #0087C1;
 color: #fff;
 text-decoration: none;
 border: 1px transparent solid;
 padding-right: 10px;
 padding-left: 10px;
 margin: 0px;
}
/* Customized Search Box */
.s4-search input.ms-sbplain {
 height: 12px;
 padding: 4px;
 padding-right: 0px;
 margin: 0px;
 background-color: #A7C5E4;
 border: 1px #8BA0BC solid!important;
 color: #111111;
 font-family: Calibri;
 font-size: 13px;
}
.s4-search .ms-sbgo {
 padding-top: 5px;
 padding: 0;
 margin: 0;
}
.s4-search .ms-sbgo a {
 background-image: url('../PublishingImages/dark-search-icon_24.png');
 background-repeat: no-repeat;
 width: 22px;
 height: 22px;
 display: block;
}
.ms-sbscopes, .s4-search .srch-gosearchimg {
 display: none;
}

Comments

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Change SharePoint server hostname and Web Application Names

The Timer Service Failed to Recycle