Style Sheets in SharePoint Designer

From ThemesWiki

SharePoint Designer

Official Page

Project Documentation

Download

Source Book ISBN 978-1-847194-42-8 Publisher Packt Publishing Author(s) Mike Poole

Contents 1 Cascading Style Sheets 1.1 Editing Styles 2 Master Pages 2.1 Where Are Our Master Pages Stored? 2.2 Creating a Master Page 2.3 Editing Our Master Page 2.4 Adding a Content Region 2.5 Saving Our Master Page 2.6 Attaching Our Master Page to an Existing Page 2.7 Creating a New Page Using a Master Page 2.8 Modifying the Master Page 2.9 Attaching Our StyleSheet to Our Master Page 3 Summary 4 Additional References 5 Source 6 Related Links

[edit] Cascading Style Sheets

Formatting our page directly by using the formatting tools is all very well, but in larger sites or sites that are maintained by more than one person, it can be difficult to maintain a consistent look and feel of all the pages in the site. This is where Cascading Style Sheets (CSS) comes in. It allows us to define the styles we will use in one central place and then to apply those styles to the elements on our pages.

Working with Styles in SharePoint Designer involves three separate task panes:

• CSS Properties
• Manage Styles
• Apply Styles

When formatting our page, the style information was stored within the head section of the HTML of the page. A far better way to store our styles is to have them in one central style sheet so that we can use our styles on any page of our site.

To centralize our styles, we create a style sheet where the styles will be specified. We will do this now by going to File | New | CSS.

The first thing we are going to do is save this empty style sheet to the root of our site:

1. Go File | Save.
2. Change the File name to winec.

Now that we have our blank CSS, we can move into the Code view of default.aspx and cut the following style code from it:

 <style type="text/css">
 .redText {
  color: #990033;
 }
 .specialOfferBox {
  border-style: solid;
  border-color: #CC9900;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  background-color: #990033;
  background-image: url('images/specialOffers/wundawinderBackground.jpg');
 }
 .specialOfferText {
  margin-left: 10px;
  margin-right: 10px;
 }
 </style>

Paste all of this code apart from the opening and closing style tags (<style type="text/css"> and </style>) into winec.css.

If we now save winec.css and default.aspx and return to the Design view of default.aspx, we will see that default.aspx has lost its formatting (because we cut it from the code). No matter, we can reunite it with these lost styles by clicking Attach Style Sheet from the Manage Styles task pane and browsing for winec.css. When we click the OK button, all is well once again. Our styles are now being applied from the centralized style sheet. Notice how our styles are now listed in the winec.css category in the task pane rather than in the Current Page category, where they were previously.

We will need to use Attach Style Sheet to attach the style sheet to any of the pages that we would like that style sheet to apply to. We will shortly learn about Master Pages. For now, it is good to be aware that attaching the style sheet to a Master Page will ensure that our styles are available to all pages that use that Master Page.

[edit] Editing Styles

If you want to remove the automatic line break from the end of h1 tags. In formatting speak, this is known as using an inline style.

To do this, we could simply add the following line of code to winec.css:

H1 {display: inline}

Doing so would not really teach you to use SharePoint Designer though, so let's do it the menu-driven way.

1. Click on New Style in the Manage Styles task pane.
2. Select h1 in the Selector drop-down.
3. Change the Define in drop-down to Existing style sheet so that the style applies to all pages on our site that use the winec.css style sheet.
4. Ensure that the URL is set to winec.css.
5. Click on the Layout category.
6. Change display to inline.
7. Click OK.

Note - When working with style sheets, it is helpful to know that when the name of the style begins with a dot, it is referring to a class; when there is no dot, it is referring to an HTML tag (as in the example above); and when it starts with a #, it is referring to an ID.

Now when we flick to default.aspx, notice that the extra line break at the end of our heading has been removed. Also notice that h1 has appeared in our list of styles listed for winec.css in our Manage Styles task pane and that the icon beside the style is blue (denoting it as a known style rather than a custom style we have created).

A word of warning while on the subject of styles: If you do need to copy text from Microsoft Word into SharePoint Designer, be aware that you will also be importing the styles that Word has used to mark up your document. SharePoint Designer makes it easy for us to remove these styles. Simply paste the content into the Design view and then select the Remove Formatting smart tag.

If you would like to learn more about writing cascading style sheets, then you may find that http://www.w3.org/Style/CSS/ is a useful resource.

[edit] Master Pages

We could just bash ahead and build our first page using the formatting techniques that we have just learned. This is the way that sites were traditionally built. One page was created and once all involved were happy that it looked OK, it was copied many times to create the basis for all the other pages in the site.

We could do it that way too, but let's wait a moment. What happens when six months down the line we would like to add a new navigation button to the menu that appears on every page? Do we need to change all the pages on our site individually? The clever developers (and I humbly place myself in that category) used Server Side Includes to create the page elements (e.g. the menu bar) in one place, which then propagated throughout their site. They could place some additional code into the include and "hey presto" the new button appeared on every page of their site.

By introducing Master Pages, Microsoft allows us to achieve the same results without the need to learn about Server Side Includes. Master Pages are an ASP.NET 2.0 feature that allows us to give all the pages in our site a consistent look and layout. They are templates that we build and attach to content pages to create the web pages within our site.

Master Pages use Content Placeholders to indicate regions of replaceable content. When we update the information on the Master Page, this automatically updates the content on our content pages.

[edit] Where Are Our Master Pages Stored?

If we take a look in our Folder List task pane, we will see the _catalogs/masterpage/ folder tree, which was copied on our local version of the WINEC site when we first synchronized our site. This location is referred to as the "Master Page Gallery" and contains some default forms and a file called default.master, which is our Default Master Page.

[edit] Creating a Master Page

We will now create the Master Page that we will use throughout our site by doing the following:

1. Select File | New | Page.
2. Select Master Page.

It is as simple as that. A new Master Page has been created for us. We want to start from a totally clean slate so delete ContentPlaceHolder1 from the page.

[edit] Editing Our Master Page

Now that we have our blank Master Page, we will give it some structure by using the layout tables provided for us. Open the Layout Tables task pane and click on the third layout (the one with the title Corner, Header, Left, and Body). This will add a blue layout grid to our new Master Page. This layout stretches the full width of the browser window with a 120 pixel tall row at the top of the page and a 191 pixel wide column down the left-hand side.

If we flip into the Code view, we can see that SharePoint Designer has automatically designated different CellTypes to the four cells in our layout:

 <table border="0" cellpadding="0" cellspacing="0" style="width: 1104px; height: 882px">
  <!-- MSTableType="layout" -->
  <tr>
  <td valign="top">

<!-- MSCellType="DecArea" -->
   </td>
  <td valign="top" style="height: 120px">

<!-- MSCellType="ContentHead" -->
   </td>
  </tr>
  <tr>
  <td valign="top" style="width: 191px">

<!-- MSCellType="NavBody" -->
   </td>
  <td valign="top" style="height: 762px; width: 913px">

<!-- MSCellType="ContentBody" -->
   </td>
  </tr>
 </table>

This is rather spooky because Microsoft's plan for our page seems to be exactly the same as ours. We will use each of the four cells on our page for the following purpose:

• DecArea in the top-left will be where we place our company logo.
• ContentHead stretching across the top of our page is where we may wish to place banner adverts in future.
• NavBody down the left side of the page will contain our site navigation buttons.
• ContentBody in the center of the page will contain the content that our page has.

The first thing that we are going to do is add the deep red color as a background to the two top cells and the left-hand column. This will allow us to see changes to our content page when we apply our Master Page to it. We will start with the top-left cell:

1. Right-click inside the top-left cell.
2. Select Cell Properties from the shortcut menu.
3. Click on the Background Color drop-down and select More Colors....
4. Click on our 990033 color.
5. Click OK.
6. Click Apply.

Now repeat this process for the top-right cell and the left column.

If we peek into the Manage Styles task pane, we will see that the red background has been created as a new style called style1. Not only is this untidy and unimaginative but it is likely to cause problems if there is also a style called style1 in one of our content pages. Before we go any further, let's rename style1 to navigationBackground.

[edit] Adding a Content Region

We must now specify the part of the Master Page where we would like our content to appear. We do this by adding a Content Region:

1. Right-click anywhere in the bottom-right cell (i.e. the large one with the white background) of our Master Page.
2. Select Manage Microsoft ASP.NET Content Regions .
3. The dialog that appears should only contain one Content Region called head.
4. Type the name MainContent into the Region name field.
5. Click Add.
6. Click Close.

This has added a new Content Placeholder called MainContent into the main cell of the layout table on our Master Page.

[edit] Saving Our Master Page

Now that we have a Content Region in our Master Page, we can go ahead and save the page. It is possible to save a Master Page that does not contain any Content Regions but there is little point because you will not be able to use it for anything.

1. Go to File | Save.
2. Browse into the _catalogs folder and then into the masterpage folder.
3. Give your file the name winec.
4. Click Save.

[edit] Attaching Our Master Page to an Existing Page

We can now go ahead and use our new Master Page as the template for our homepage layout. Microsoft refers to this as attaching the Master Page.

1. Open default.aspx in the designer.
2. Go to Format | Master Page | Attach Master Page .
3. Browse into _catalogs then masterpage.
4. Click on the winec.master file.
5. Click Open.
6. Click OK.
7. In the Match Content Regions dialog, click OK to use SharePoint Designer's suggestions for mapping the content regions between the two pages.

[edit] Creating a New Page Using a Master Page

Once we have established our Master Page, the easiest way to create new content pages is to create them directly from the Master Page.

1. Go File | New | Create from Master Page .
2. Click Browse.
3. Browse into _catalogs then masterpage.
4. Click on winec.master.
5. Click Open.
6. Click OK.

This will create a new page based on our Master Page called Untitled_1.aspx.

Notice that the title of our MainContent Placeholder has the word Master in parenthesis after it. This signifies that the Content Placeholder will display whatever the Placeholder in our Master Page displays. In order to add our custom content to this new page, we need to change the Content Placeholder to allow custom content. We can switch to using custom content by clicking on the right-hand arrow button at the right-hand end of the Content Placeholder and selecting Create Custom Content. Once this has been clicked, the title changes to Custom and we can edit our content as we wish.

Go ahead and replace the text in the Placeholder with the following:

Contact the Wine Company

Let's save our new page as contact.aspx.

Take a look into the Code view for our new page and you will see that the code is remarkably compact.

 <%@ Page masterpagefile="_catalogs/masterpage/winec.master" language="C#" title="Contact the Wine Company" %>
 <asp:Content id="Content1" runat="server" contentplaceholderid="MainContent">
  <p>Contact the Wine Company</p>
 </asp:Content>

Notice three things in this code:

1. The first line of the code is a reference to the Master Page that our content page uses.
2. There is no need for any table code (<table>, <tr>, <td>) because that is all controlled by the Master Page.
3. Our page has handily used our content as the title for our page. No more Untitled Document text appearing in the browser's title bar by default.

[edit] Modifying the Master Page

Let's return to our Master Page and pretty it up a little by adding the company logo into the top left-hand corner of the page.

1. Insert | Picture | From File....
2. Browse to redlogo.191.jpg and select it.
3. Click Insert.
4. Specify Wine Company as the Alternate Text.
5. Click OK.
6. File | Save.
7. In the Save Embedded Files dialog, click Change Folder and save the logo to a new folder called nav.
8. Click OK to close the Save Embedded Files dialog.

When we open our contact.aspx page in the Designer, we will notice a small red cross signifying a missing image where the logo should be.

When we saved our Master Page, the content page automatically updated to contain our logo but unfortunately the content page is looking in the wrong folder for the logo. The reason it cannot find the folder is that the content page is in the root of our site but the master page is a few folders higher up the directory tree. The problem is one of relative locations. Here are the relative paths required for each page to find the logo:

• Master Page ../../images/nav/redlogo.191.jpg
• Content Page images/nav/redlogo.191.jpg

At the moment, the Master Page is telling our content page to use the first of these locations. So what to do?

One solution that would mean that the icon would display correctly in both pages would be to programmatically specify the file location using Server.MapPath("images/nav/redlogo.191.jpg"), but unfortunately code blocks are not permitted in Master Pages so we cannot use that method.

At the end of the day, it is the content page that is important because that is the one the visitor to the site will see. To solve the problem, go into the Code view of our Master Page and remove the two extra directory levels from ../../images/nav/redlogo.191.jpg by removing the leading ../../. Once we have saved winec.master, we will see that our logo appears correctly on our content page (and any other content pages we create at the same directory level).

[edit] Attaching Our StyleSheet to Our Master Page

The final thing that we will do is attach our style sheet to our Master Page, in order to maintain a uniform style across our site:

1. Open winec.master (it is inside the _catalogs/masterpage/ folder) in Design view.
2. Click on Attach Style Sheet in the Manage Styles task pane.
3. Click Browse on the Attach Style Sheet dialog.
4. Select winec.css.
5. Click Open.
6. Click OK.
7. Select File | Save to save the changes to winec.master.

Notice that our Manage Styles task pane has now been populated with the styles within winec.css:

[edit] Summary

We are now equipped to create new pages that follow a consistent theme. Even better than that, we can allow other users to contribute towards our site while still keeping our styles protected.

[edit] Additional References

For instructions on Installing SharePoint Designer, click here

[edit] Source

The source of this content is Chapter 4: Formatting Pages of SharePoint Designer Tutorial by Mike Poole (Packt Publishing, 2008).logo design by Kevin Josh 2010

Logo Designby ThemesWiki.org Kevin Josh 2010

Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes and criar sites

And Like The Global Information Network and Global Information Network

[edit] Related Links

cellulite