The design we were after was not a look and feel of out the box sharepoint so we needed to build a page that was different.
Step one:
Go to the MSDN site and grab their minimal master page, it makes life a little easier as you cover most of the bases sharepoint requires.
Step two:
Open sharepoint designer and edit this page.
OK that's the simple version.
Reason for step one - this is so don't miss any of the important controls needed to run sharepoint. Menus, being able to access "site actions" etc.
The first task is to add your own style to the master page, but NOT using <link> command as sharepoint designer not always likes this but use:
<sharepoint:cssregistration name="">" runat="server"/>&
As this seems to work better in designer!
Now my next task was to override all the horrible core.css styles - there are many ms- (ms-titlearea, etc.) styles to make life easier I replaced the ms- with XX- where XX is any meaningful name i.e. Site name.
Now I can add each of these XX's into my stylesheet and those controls keeping will look how I want and not how MS thought should look.
Now I have a master page with all the standard sharepoint stuff but with my theme/colours applied.
For my site I decided I only wanted the top bar in this master page. So after my top menu I cut most of the code out of <body> and just left a place holder that took up the full width of page area.
Now I created a "new from master page" and then this allowed me to alter the content place holder to custom content and saving this page as a master gave me a nested master page.
The outer master allows me to control the top menu and overall branding of site.
The inner master(s) allows me to control left navigation menus and main content area; and use own CSS stylesheet
Now do a "new from master" using the inner master add some webpart zones to this ASPX file and I now have a site template page I can create pages from.
I also created a second inner master to have a second look for some pages, just comes in handy when I don't want the left menu to appear.
No comments:
Post a Comment