Tag Archive for CSS

| July 15, 2011
5 comments

SharePoint 2010 Branding Options: Master Pages vs. Themes: Part 3

Adding a sticky footer to your custom master page using SharePoint Designer 2010

Adding a sticky footer to your master page is one of those basic things that takes a lot longer in SharePoint than it should. My first attempt at sticking a footer to the bottom of my page ended unsuccessfully with the footer always being about 100-200 pixels above the bottom of the page. I took a deep breath and asked my good friend Google for help. Google introduced me to Elio Struyf’s most excellent posts straight out of Belgium.

Struyf, Drisgill and other experts note that the javascript used to control scrolling in the Ribbon Positioning System (docked by default at the top of each SharePoint 2010 page) is the main culprit causing all of this footer kerfuffle. They offer advice on how to disable the Ribbon Position System (RPS) so that it is undocked, but I like having it docked. Fortunately, Struyf has a master page for the default docked ribbon (I use this one) as well as the undocked ribbon.

By adding some new div tags to the html of the master page, some new CSS, and tweaking some attributes in the V4.masterpage, Struyf has built a master page that sticks the footer to the bottom of the page while keeping the RPS docked at the top of the page.

Here are the steps and screenshots I took to add his master page to my farm:

  1. Downloaded his master page from his web site: V4.Master_Footer_Docked_Ribbon to my desktop
  2. Navigated to the Master Page Gallery in my Site Collection and uploaded the master page
  3. Opened site in SharePoint Designer 2010, and opened new master page for editing
  4. Copied and pasted the CSS from his header to my custom style sheet
  5. Added a line of code in the header to attach my custom style sheet (see Part 2 for instructions)
  6. Saved, Checked-In, Published, Approved Master Page
  7. Refresh browser to view footer (screenshot)!

Screenshot 1: V4.master Head (click image for larger view)

Screenshot 2: V4.Master_Footer_Docked_Ribbon Head (click image for larger view)

Screenshot 3: V4.master footer (no footer yet) (click image for larger view)

Screenshot 4: V4.Master_Footer_Docked_Ribbon footer (click image for larger view)

Screenshot 5: CSS from V4.Master_Footer_Docked_Ribbon (I moved this code from Elio’s master page to my custom style sheet)

Featured Series of Posts on Branding Options in SharePoint 2010:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010

2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010

4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages

5. SharePoint 2010 CSS: List of Useful Styles

Category: Branding, SharePoint | Tags: , , , ,
| July 7, 2011
2 comments

SharePoint 2010 Branding Options: Master Pages vs. Themes: Part 2

How to attach a custom style sheet by pasting code into the master page with SharePoint Designer 2010…

This post assumes that you already have a custom style sheet, and that it is already in the Style Library – see Part 1. This post focuses on how to attach a custom, or alternate, cascading style sheet (CSS) to a master page by adding a line of code in SharePoint Designer 2010 (SPD 2010).

For those of you that just need the short answer, rather than the long answer below, this is the line of code to add in SPD 2010:

"<SharePoint:CssRegistration name="/Style Library/CoreOverride-Demo.css" After="corev4.css" runat="server" />"

Why would I ever want to attach CSS using SPD 2010 instead of the browser UI?

  • If you are customizing your master page anyway, i.e., layout changes, you may as well add the custom CSS in the code and save yourself the steps of adding it through the browser later, and you are also thereby ensuring that the custom style sheet and master page are always applied together.
  • If you have tried attaching the style sheet through the browser UI and you are seeing some evidence that your custom style sheet is being overridden by the main style sheet (corev4.css)… or you are just paranoid that this may happen to you 😉
  • If you have more than one custom style sheet and you need to specify which sheet comes ‘after’ the other

Here are the steps, the long answer, with screenshots to add the code to the master page via SPD 2010:

  1. Open the site (screenshot 1) in SharePoint Designer 2010 (screenshot 2)
  2. Expand the ‘Navigation’ panel in the left column, and click on Master Pages (screenshot 3)
  3. Click on v4.master to open the master page properties page (screenshot 4)
  4. Click ‘edit file’ to open file for editing, click ‘Yes’ when prompted to check-out file, and finally the master page is open (screenshot 5)
  5. Click ‘Code’ button on the bottom menu to show code view (screenshot 6)
  6. Paste the code between the <head></head> tags (screenshot 7)
  7. Save file (click ‘Yes’ when prompted about customizing the file) (screenshot eight)
  8. Right-click on master page file to Check-in the file (screenshot 9), Publish a Major Version (screenshot 10), then click ‘Yes’ when prompted to  approve the content (screenshot 11)
  9. Approve the content (screenshot 12)
  10. Refresh browser to confirm style changes (screenshot 13)
Note: If you now  decide that you need the original v4.master you can rename the customized version to something like custom.master. To fix this:
  1. Right-click on v4.master and select ‘Reset to site definition’ and the original v4.master will be restored, and SPD 2010 will automatically create a v4_copy(1).master page (screenshot 14).
  2. Rename v4_copy(1).master to something like custom.master
  3. Check-in custom.master, publish a major version, and approve the file
  4. Go to Site Actions > Site Settings > Master Pages and select the new master page, custom.master, for both Site Master Page and System Master Page, and select the checkbox for ‘Reset all subsites to inherit this alternative CSS URL’ (screenshot 15)
  5. Now if you have forgotten to activate the publishing feature for you new subsite with the Team Site template, it will not inherit the custom.master page yet, so go to Site Actions > Site Settings > Manage site features and activate the publishing feature (screenshot 16)
  6. As soon as the feature is activated you should see the new master page and its styles (screenshot 17)

Featured Series of Posts on Branding Options in SharePoint 2010:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010

2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010

4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages

5. SharePoint 2010 CSS: List of Useful Styles

Category: Branding, SharePoint | Tags: , , , ,
| June 30, 2011
No comments

SharePoint 2010 CSS Reference Chart

Check out Heather Solomon’s extensive 2010 CSS Reference Chart!

See also: SharePoint 2007 CSS Reference Chart

The following CSS Reference Chart highlights the major styles used in SharePoint Foundation 2010 and SharePoint Server 2010. CSS styles are grouped by area of the page and include the class/ID value, an explanation of how it is used in SharePoint and other related information including a screenshot where appropriate. Code (and file location) for the style statement is included.

Category: Branding, SharePoint | Tags: , , ,
| June 30, 2011
2 comments

SharePoint 2010 Branding Options: Master Pages vs. Themes: Part 1

Attaching an alternate style sheet to the master page using the browser’s UI

This post focuses on how to change the style for the background color of the title bar, and then how to apply the custom style sheet to the master page through the browser’s User Interface. All the steps may then be applied to change other styles. This post assumes you already have a good working knowledge of CSS.


How to change the color of the title bar (css style: s4-title) on a Team Site template (with publishing feature enabled):

1.Create a new style sheet in Dreamweaver, or your favorite text editor, and name it something like custom.css (or CoreOverrides.css) and save it to your desktop , or just download mine (updated February 2012 with more styles!)

2.Use the IE Developer Toolbar to find the names of styles to override

a.Open Internet Explorer and browse to the SharePoint 2010 page that you want to style

b.Open the ‘Developer Tools’ toolbar (F12), also known as Internet Explorer Developer Toolbar

i.Note: Sometimes I prefer the Firefox counterpart, FireBug, it just depends on what I have open at the time

c.In the IE Developer Toolbar, in the ‘HTML’ tab, click on the white arrow to ‘Select Element by Click’  (screenshot 2)

d.Hover over different sections of the SharePoint 2010 web page with the cursor and you will see a blue box outlining the different sections. (screenshot 3)

e.Click on a section to get the HTML in the left box and the CSS in the right box. (screenshot 4)

f.Use the styles you find in the right CSS box to determine which styles to override in your custom.css file

 Note: Another great option for working with CSS in SharePoint 2010 is using SharePoint Designer and the Skewer Click feature.

3.In Dreamweaver, on your alternate style sheet, add your version of the style (override the style) – for example: .s4-title{background-color:#c8BD9b; } (screenshot 5)

4.Upload your style sheet from your desktop to SharePoint, the Style Library is a good place (screenshot 6)

a.Site Actions > View All Site Content > Style Library > Add document (screenshot 7)

5.How to go to the Master Page section and attach your style sheet:

a.If Publishing features are already enabled (you can see the ‘Master page’ link in Site Settings) for your site then do the following:

i.Site Actions > Site Settings > Look and Feel > Master page (screenshot 12)

ii.Select ‘Specify a CSS file…’ > browser to your CSS file in the Style Library and select it (screenshot 13)

iii.Check the box to ‘Reset all subsites to inherit this alternate CSS URL’ if appropriate

iv.Click ‘OK’

b.If the publishing site feature (Site level) is not already enabled then there is no ‘Master page’ link to click (screenshot eight), so you must enable the publishing feature at the Site level

i.Site Actions > Site Settings > Site Actions: Manage site features > Activate (SharePoint Server Publishing feature, screenshot 9)

ii.If the Site Collection publishing feature (Site Collection level) has not been enabled first you will see an error message (screenshot 10)

1.You must enable the Server Publishing feature at the Site Collection level first – Site Actions > Site Settings > Site Collection Administration: Site collection features > Activate (SharePoint Server Publishing Infrastructure, screenshot 11)

6.Once your style sheet is attached, you should able to see your style change, if not, refresh your browser to see the change in background color for the title bar (screenshot 14)

7.Repeat steps 2-6 for each subsequent style

8.Check out my list of useful styles.

 

Featured Series of Posts on Branding Options in SharePoint 2010:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010

2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010

4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages

5. SharePoint 2010 CSS: List of Useful Styles

Category: Branding, SharePoint | Tags: , , ,
| June 29, 2011
3 comments

SharePoint 2010 Branding Options: Master Pages vs. Themes: Overview

This post is an introduction to a series of posts about branding sites in SharePoint 2010, and about why I prefer prefer custom master pages over custom themes in SP 2010.

SharePoint 2010 has several more branding options than SP 2007 (link to History post) but the SP 2010 options can be broken into two groups:

  • Working with out-of-the-box (OOB) and custom themes (Power Users or IT Professionals)
  • Working with CSS and Master Pages (IT Professionals)

Themes: Depending on your organizational policy regarding branding, power users can be given access to use the browser to select an existing out-of-the-box (OOB) theme, customize one of these themes, or create and import a custom theme from PowerPoint 2010 (or Word, PowerPoint, or Excel 2007 or higher) as Drisgill et al. thoroughly detail in Chapter 5: Simple Branding.

  • Select an existing OOB theme
  • Customize OOB theme in browser, or in PowerPoint
  • Create and import custom theme from a Microsoft Office client

Master Pages and CSS: Many organizational policies however, including mine, require that all SharePoint sites have a consistent look and feel to reflect the branding campaign of the organization. In this case all sites are required to use one or more custom themes and/or master pages created by the IT Professional. I will focus on these options in this series of blog posts:

Note: Avoid editing the core CSS file (corev4.css)….

 Throughout SharePoint, CSS is probably the most prevalent method of applying branding. Thus, when creating a heavily branded SharePoint site, you will often need to apply your own custom CSS….

There a few ways to apply custom CSS in SharePoint. One common mistake is to just log in to the server and find and edit the core SharePoint CSS file (corev4.css) in the SharePoint root. This should be avoided because it is problematic in terms of supportability.   — Drisgill et al., SharePoint 2010 Branding and User Interface Design

Featured Series of Posts on Branding Options in SharePoint 2010:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010

2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010

4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages

5. SharePoint 2010 CSS: List of Useful Styles

Category: Branding, SharePoint | Tags: , , , ,