Sep.08

SharePoint branding with custom CSS?

The custom CSS filelets you apply custom CSS to a SP content. Be aware that option is available only within a SharePoint server publishing site. The custom CSS option also ensures that this CSS file will load last, which prevents the Corev4.css from overriding it.

Here are some useful css tricks:

<style type="text/css">
/* Change ribbon background color */
body #s4-Ribbonrow {
    background-color:#283A10;
} 
</style>
<style type="text/css">
/* Change header */
.s4-title {
height:125px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C3D6AA',     endColorstr='#283A10'); /* for IE */
background: -moz-linear-gradient(top, #C3D6AA, #283A10); /* for firefox 3.6+ */
}
</style>
<style type="text/css">
/* Change the breadcrumb in the title area */
.s4-title h1 a {
color:#1E4620;
font-variant:small-caps;
font-weight:bold;
}</style>
<style type="text/css">
/* Change the color of the page title in the header area */
.s4-title h2 a {
color:#383838;
}
/* Team Site*/
.ms-WikiPageNameEditor-Display {
color:#383838;
}
/*Blog Site*/   
.s4-titletext h2 {
color:#383838;
}
</style>
Tags:
Share this Story:
  • facebook
  • twitter
  • gplus

Leave a comment