Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

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;
}