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;
}
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/
/* 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;
}
/* 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
Post a Comment