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

Post a Comment

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Image
Adding Comments to a SharePoint 2013 Approval Workflow I needed the ability to capture comments from Approval Tasks in a workflow.  This has changed greatly in 2013 workflows.  Everything is more modular and as such must be built somewhat from scratch.
SharePoint 2013 workflows can become corrupt.  This may have been fixed by a patch, but please refer to a previous post before creating any 2013 workflows in Designer: http://www.ericjochens.com/2014/12/sharepoint-2013-workflow-observations.htmlSharePoint 2013 does not have a built-in approval workflow, nor does a built-in task item include comments.  I solved this by building my own approval workflow, and using a custom content type to include a comments field.A SharePoint 2013 Workflow will not store the Task ID when a task is created, so you cannot do a lookup into that task list to grab comments or any other field.  I solved this by creating a separate workflow in the task list to read the Related Items column, and update the origin…
Read more

SharePoint Search - Content Processing Pipeline Failed to Process the Item

Image
SharePoint 2013 Search Crawls Stop Crawling All Content Recently the search system stopped successfully crawling content.  ASPX pages were crawled, but no content was being indexed. Opening up the crawl log showed thousands of errors with this message:
The content processing pipeline failed to process the item.  (Index was out of range.  Must be non-negative and less than the size of the collection.  Parameter name: index; SearchID = [GUID]) Note: the resolution is in the resolution section for those who cannot or refuse to read. What does this mean?  Honestly initially it made no sense.  So I learned a valuable lesson: I misguidedly spent the next 2 days trying the usual fixes like resetting the index, rebuilding the 2013 search components, and lastly what EVERYONE does: they fix it with a sledgehammer (in this case rebuilding the search service application).

But what if rebuilding the search service application is a horrible pain?  We have thousands of query rules, 30 result source…
Read more

Change SharePoint server hostname and Web Application Names

Note: I realize that many admins are reluctant to delete web applications.  I personally know why I ma doing it and how to achieve this easily.  You should always retain any customization you have added to the site, like web.config mods, etc.  The Alternate Access Mappings are always available, but they leave open holes that I do not wish to keep active.  I like a clean setup.
Why? Perhaps you need to clone a development, test, or some SharePoint server and you need to change the hostname so that it can exist on the same domain without a SID conflict.  Or you just have a use-case for wanting to rename the hostname of a SharePoint server.  It can be done, just make sure you go through all of the steps.

The Rename-SPServer PowerShell command can also be used to change the SQL Server name, for the case where you might move the databases to a new SQL server or instance and you need to point all of the farm servers to this new hostname\instance.

Changing the hostname isn't that bad, bu…
Read more