SharePoint 2010 Branding – Part Six

In the last post we took a look at moving the home link and adding our own header image to the Master Page and in this post we will be adding our nice banner image as well as talking CSS for a little.

Now the banner image is actually a background image and as such only requires a div block with some creative CSS to allow it to be visible.
Therefore if you find the area where the ribbon starts (were you paying attention in the last post?) then you can add this simple piece of code

<div id="headerimage" class="s4-notdlg">
</div>

This will create the area for you to style but without any additional CSS it will not change anything visually on the screen.

The next step would then be to add a little CSS as follows

#headerimage
{
	background:url('/SiteAssets/header0.jpg');
	margin:0 auto;
	height:175px;
	width:960px;
}

Here we are selecting the #headerimage code block and applying the image to the background, centering the content and adding a width and height to the code block. The header0.jpg image must exist otherwise you will get a code block which has the right height and width but you will have nothing inside it.

Getting somewhere right?

Specificity and Style Preference

At this point it is worth talking about Specificity as it directly applies to what we are doing in our branding, Specificity relates to the way in which a browser applies your styles and we should think about the preference the browser puts on styles in general as it helps when trying to think of why my styles are not applying, there are many good posts which go into more detail including Smashing Magazine and HTML Dog.

External Style Sheets

These take the least preference and will usually be linked to in the head section using a bit of code like;

<link rel='stylesheet' id='thickbox-css' href='thickbox.css' type='text/css' media='all' />

Page Styles

Page styles will take a higher preference to the external style sheets and can be anywhere in the page using a code block like this;

<style type="text/css">
.someclass {
  attribute:value;
}
</style>

Inline Styles

Inline styles will generally take preference given that they are the last style to be applied like this;

<div style="color:blue;"></div>

If you can’t think of how this might relate to SharePoint you may have heard of a situation where someone wants to remove the quick launch bar for one page, the answer you will find in forums is to add a Content Editor Web Part and add the following code (there’s more to it than this but for a simple example this works)

<style type="text/css">
.s4-ql
{ display:none; }
</style>

Now if we added this to our external style sheet it would then apply to all pages but by adding it as a page style we can then assure that it only applies to the page we are on as well as knowing that it will override anything in the external style sheet due to the preference the browser places on the code.

How Specificity adds even more to this is what you might call conflict resolution, what happens if we have,

.s4-ql
{ display:none; }

in the external style sheet and,

<style type="text/css">
.s4-ql
{ display:block; }
</style>

in a page style, well we know preference would kick in and so the latter would be applied but then what happens if we have

<style type="text/css">
.s4-ql
{ display:none; }
.s4-ql
{ display:block } 
</style>

well now it gets complicated, or does it? Style sheets work top down and so the last style referenced would take effect and one last example,

<style type="text/css">
#s4-leftpanel .s4-ql
{ display:none; }
.s4-ql
{ display:block } 
</style>

Which of the styles would take preference, well the top style would take preference as it is more specific than the last one, this is so important to know and I definitely recommend checking out the two posts I referred to above as they go into lots more detail but even armed with the above information you should be able to figure out why some styles take preference over others.

Lastly, Smashing Magazine makes the point about the use of !important, using this at the end of a style will force this to take preference and should never be used in a production environment, don’t get me wrong I will admit to having used it however, it is usually just a lazy way of creating your style sheets and figuring out the right selector is much more developer friendly especially when working in a team.

I hope I have not lost you in this post and you should see the value in learning about things like specificity and style preference as it will make your branding experience much more enjoyable and yes it should be enjoyable as there is nothing like taking a standard site and making it look beautiful.

Thanks

Matthew Hughes

Series Navigation

<< SharePoint 2010 Branding – Part FiveSharePoint 2010 Branding – Part Seven >>