SharePoint 2010 Branding – Part Eight
- SharePoint 2010 Branding – Part One
- SharePoint 2010 Branding – Part Two
- SharePoint 2010 Branding – Part Three
- SharePoint 2010 Branding – Part Four
- SharePoint 2010 Branding – Part Five
- SharePoint 2010 Branding – Part Six
- SharePoint 2010 Branding – Part Seven
- SharePoint 2010 Branding – Part Eight
- SharePoint 2010 Branding – Part Nine
In the last post we looked at centreing the content area including the ribbon and now we will look at how to change the scrolling back to the old method of scrolling.
In our current site we have the main content area, scrolling leaving the ribbon at the top this is fine if that’s how we want it but in our site it is meant to be a public facing site and so we would like to jump back to the traditional method of scrolling i.e. the whole page scrolls together.
To achieve this we need to take a look at the master page and find the following piece of code
body {
height:100%;
overflow:hidden;
width:100%;
}
Which will sit in the Master Page in between the <head> and </head> tags.
Remove the overflow attribute completely and then add the following code to the CSS file
body #s4-workspace {
overflow:visible;
}
How does this all work? By hiding the main overflow scrolling effect from the page the workspace or our content area is effectively allowed to steal the overflow and make use of it itself if you play around with the overflow settings you can see this happen, with that said by using the code we have above this reinstates the standard scrolling and everything is good in the world.
Before
After
Exciting isn’t it? Well I don’t want this post to be uber short so let’s take a look at adding a background to the site, there’s quite a lot of white space going on in the site at the moment and the final design included a green gradient.
So where do we start, well we want the background colour to apply to the whole site so a good place try try first would be the Body as this is a standard tag and applies to the whole site.
Something like this would make sense;
body
{
background-image:url('/SiteAssets/samworthbg.gif');
background-color:#325e13;
background-repeat:repeat-x;
height:100%;
}
Here we specify a background image as well as a background colour, we tell the image to repeat across the x-axis (left to right) and give it a height of 100%, how does this translate to the page?
Seemingly fine right? Well if we scroll down a little we can see that there is still a few problems, however, never fear we will deal with this tomorrow.
If anyone out there is following along, please do have a go and see if you can figure out what is wrong.
I’ll tell you tomorrow but for now good day to you
Thanks
Matthew Hughes
Sign up for our newsletter!
Supporters
Top Authors
No Comments
Trackbacks/Pingbacks