HOW TO: tweak SharePoint 2010 CSS just enough for minimal branding…

2010 05 24 MV: Made some decent gains this week on leveraging a custom CSS file to brand (as opposed to beating & twisting master pages, which I consider only when all other attempts at CSS-based branding to be insufficient) my client’s corporate deployment, so I thought I’d share a few tips & tricks for those branding requests which pop-up a LOT…

Request: Make the page centered in the browser/monitor window, so for large-aspect-ratio monitors (quite prevalent these days), a fixed-width page of say 1024px displays right in the middle of the browser…

Solution: One tiny bit of CSS in the custom CSS file is all it took. In the custom CSS file you’re going to ever-so-gently bend the BODY.v4master tag as follows;
/* 2010 05 17 MV: This mod should force all pages globally to a fixed width of 1024px AND centered in the browser (using “MARGIN: 0 auto;”)… */
BODY.v4master {�
 WIDTH: 1024px;
 MARGIN: 0 auto;            <– this single little property is what centers the entire display within a browser/monitor !!! 🙂 …
 BACKGROUND-COLOR: #999999;    <– this simply makes whatever background shows on left & right a nice light gray…
}

Request: Display a custom banner which fills the entire top of the banner section, but still lets all the other graphics display.
Solution: DON’T try setting the “icon” property – it’ll drive you crazy that it DOESN’T inherit, and that it DOESN’T sit on a “layer” beneath the breadcrumbs and new social network buttons. INSTEAD, if you examine the CSS using the ever-handy IE Developer Toolbar, you’ll see that all you have to do is gently nudge the class “.s4-title” as follows:

/* 2010 05 14 MV: These mods change the banner graphics & underlying background color…*/
.s4-title {
 HEIGHT: 150px;
 BACKGROUND-IMAGE: url(/sites/EP/Images/CoolCo%20EP%20Banner%20v0.00.png);
 BACKGROUND-COLOR: #999999;   <– TIP: make this a HIDEOUS color at first so it shows up obviously, then CORRECT it 🙂 …
 BACKGROUND-REPEAT: no-repeat;
}

Changing graphics at THIS level is GLOBAL, and tres elegant to manage going forward…

That’s it for now – there’s more, but the goal of my blogging about all this is to share some tips which will save you hours but which only take me a minute or two to share…

Cheers,

-MV

Advertisements
This entry was posted in Sharepoint Tips and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s