Saturday, April 10, 2010

Branding in SharePoint 2010 - CSS Classes

I was working on a project where I happened to implement Branding on SharePoint site. I created/modified the existing CSS Classes to achieve the desired result.
Here are some CSS classes listed below that I modified:

To hide Quick Launch

.ms-quicklaunchouter
{
display:none;
}
#s4-leftpanel-content
{
display:none;
}
.s4-ca
{
MIN-HEIGHT: 324px; BACKGROUND: #fff; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}

Change global navigation background color

.s4-tn
{
background:white;
}

Change the font color of the site actions text

.ms-menu-a span
{
color:black;
}

To hide title logo - breadcrumb

.s4-titlelogo
{
display:none;
}

Make breadcrumb bar height small
.s4-title, .s4-lp
{
background:white;
}

To hide breadcrumb tag & Notes section - breadcrumb

.ms-socialNotif
{
display:none;
}

Change the font color of Browse and Page text in the menu
.ms-cui-tt-span
{
color:black;
background:white;
}


Change the background color of top bar (site actions, browse, page)

.ms-cui-topBar2
{
background:white;
}

Make all menu item color black

.s4-tn li.static > .menu-item
{
color:black;
border-color:black;
}

Menu item background color

.s4-tn li.static a.menu-item
{
background:white;
}

Global navigatioh selected item color red i.e. first tab

.s4-toplinks .s4-tn a.selected
{
color:red;
border-color:black;
}

Global navigation menu item hover - black

.s4-toplinks .s4-tn a.selected:hover
{
color:black;
}

Menu item hover

.s4-tn li.static > a:hover
{
background:white;
border-color:black;
border:thin;
color:red;
}

Change the Action Button background color -Logged on Username

.ms-SpLinkButtonActive a,.ms-SpLinkButtonActive a:hover{
color:red;
text-decoration:none;
background:FFDBAD;
}

Change the background color of the web part header where the Title is 'Working at ABC'

.ms-WPHeader TD[title^="Working at ABC"]
{
background:#FF9900;
}

Change the font color of logged on username

.ms-SPLink A:link,.ms-SPLink A:visited
{
color:gray;
text-decoration:none;
font-size:14px;
font-weight:bold;
text-decoration:underline;
}

2 comments:

Cheryl Summers said...

A professionally crafted logo design price is one of the greatest blessings for a company; whether it is big or small. It gives them an identity of their own and makes them different from others.

Len Rivers said...

With CSS, You can control the look of ASP.NET hosting server manages by establishing various overall look qualities such as ForeColor, BackColor, Size, and Size. Moreover, some manages assistance design things that reveal additional style-related configurations.