The SharePoint Designer

Brand. Design. Amaze.

Sep 15

Adding a touch of Glamour – Part Two: The Menu

No Gravatar

As seen on EUSP

Veronique Palmer of Lets Collaborate mentioned this in the comments on Part One of this series: She is completely right, and it is an easier way to do it too. But in my article I wanted to introduce you to searching and working with the master page. If you ONLY want to add your company logo this is how you do it:

Veronique Palmer: “Yes, but you can also change the site logo without using SharePoint Designer. Upload a pic to library, copy the shortcut, then Site Actions – Site Settings – Title, Description and Icon, and paste it into the URL. Easy peasy for site owners.”

So onto the menu, and how to style it. So far our site looks like this, the menu looks like just another block of text.

2011-07-21-AddingGlamour-Part02-01.png
Figure 1: How the site looks so far

This is all done with CSS (Style sheets). Open you site in SharePoint Designer 2010, and edit your master page. We are working on _starter_foundation.master. For this theme I have created a simple Image for the background, you can also use a solid colour, or do some fancy foot work with CSS gradients. You can download this image and use it freely as well, just change the red to be the colour of your brand.

2011-07-21-AddingGlamour-Part02-02.png
Figure 2: Enlarged 15px by 30px MenuBG.jpg

Add this image to your image library.

2011-07-21-AddingGlamour-Part02-03.png
Figure 3: Imported image into the Images Library

Now we move onto the Styling.

In SharePoint Designer 2010, click All Files > Style Library. Right click in the white space and click new > CSS. Name it (in my case I called it EUSP.css) and then click on it to edit.

2011-07-21-AddingGlamour-Part02-04.png
Figure 4: The new style sheet

Copy and paste the code below into your empty style sheet.

I know that this is probably very foreign to most of you, but your main goal here is to just change the colour of the background image, so it suits your look and feel. You can do this in Paint, or any graphic editing program.

Once you have saved your style sheet it is now time to link it to your master page. Go to your master page, edit the file and search for this line:

<!– link to our custom css –>

Then change the line below to look like this (type in the name of your style sheet where the red text is, and change the name of the site (in blue) to what you named yours:

<SharePoint:CssRegistration name=”Sites/EUSP/Style Library/EUSP.css” After=”corev4.css” runat=”server”/>

Save the master page and refresh your site. You should see the change and it will look like this:

2011-07-21-AddingGlamour-Part02-05.png
Figure 5: The Changed Menu

This menu works with almost every site, as long as you change the image to suit your colour scheme.

As you can see the search bar is sitting right underneath the menu – which is not very practical, so let’s move it to a better place. I like my search bars above my menu, but you can move it anywhere. In your master page look for this code:

Cut it (cntrl x) and then look for this piece of code:

Place your cut code in between the <div class=”style1”> div tags so it looks like this:

Then save your masterpage and view it in design mode. You will see the search bar is now above your menu, and is right aligned. View it in your web browser, and you will see the search bar is now in the right hand corner.

2011-07-21-AddingGlamour-Part02-06.png
Figure 6: Right aligned Search Bar

Already your site has become something different – and you can continue to play with colours till you get it right.

In part three, we are going to add a random quote generator as well as a random picture generator; this will go into the banner space (the white space next to your site logo).

Tags: ,

2 Comments

  1. MonikaNo Gravatar

    October 18, 2011

    Reply

    Hi Louise,
    I don’t see your code sample where it says … “so it looks like this:” There is just empty line, no code?

    “Cut it (cntrl x) and then look for this piece of code:

    Place your cut code in between the div tags so it looks like this:

    Then save your masterpage and view it in design mode. ”

    Should I use any specific browser in order to see your code?

Leave a comment

The SharePoint Designer is using WP-Gravatar