Archive for Branding

| 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 15, 2011
One comment

SharePoint 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…

Favicon and Custom Logo

Favicon and Custom Logo

Follow the first few steps (1-5) in the previous post, Part 2, to open your master page and show the Code view in SharePoint Designer 2010.

Here is the code to edit the existing Favicon code in the tags (screenshot):

<SharePoint:SPShortcutIcon runat="server" IconUrl=" http://yourServer.com/images/favicon.ico"/>

There are at least 3 options to add a custom logo (Drisgill et al., pg 227):

  1. Use an HTML image tag: <img src=”customLogo.gif” alt=”Happy face”/>
  2. Use a CSS background-image property:
    .s4-title  {
    background-image:url('customLogo.gif');
    }
  3. Use the SharePoint control. I chose this option since it allows you to “set a default image for the master page that can be overridden by the SharePoint web interface from the Title, description, and icon Site Settings page (Drisgill et al., pg 227).” Here is the code I used in the Body to set the default custom logo and the link URL, and a screenshot of where I put it in the master page:

<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/"                                     id="onetidProjectPropertyTitleGraphic">
<SharePoint:SiteLogoImage                                                     LogoImageUrl="http://yourServer/images/customLogo.gif" runat="server"/>
</SharePoint:SPLinkButton>

Note: I have found it easiest to keep my custom site logos, favicon, and custom CSS externally (external from the SharePoint farm) on one of our web servers. That way I can just paste in an absolute URL for the custom logo, favicon and CSS where needed, and I can go to one place to update these files. For example, after a quick update to the CSS file I just have to save it there in one place, rather than re-deploying to the various Style Libraries. I don’t like to access the SharePoint server if I don’t absolutely need to, I am superstitious that way. We are in a relatively small work environment with under 500 users and I am the main SharePoint person. We don’t do any custom coding, we have a codeless environment with no Visual Studio action for custom features or solutions to deploy this stuff for me, so this has been the best solution for me so far. What do you think, is there a better way? Here is busy blog post about putting CSS files in _layouts folder or a document library such as the Style Library: http://sharepoint.stackexchange.com/questions/2219/css-files-in-layouts-or-document-library/16253#16253

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 |
| 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
No comments

History of SharePoint Branding: 2007 to 2010

Branding options with MOSS 2007, as in SharePoint Server 2010, included creating a custom master page or a custom theme (or both). For MOSS 2007, I had chosen to go with the custom theme option because I didn’t have any critical layout changes to make on the master page and because custom master pages did not affect _layout pages. These MOSS 2007 and WSS 3.0 branding issues were expertly outlined by Heather Solomon in her blog post: Master Pages vs. Themes: Which Do You Choose?:

A benefit to themes is that when you apply a theme, it also affects the pages in the _layouts directory, whereas master pages do not.

If a theme doesn’t seem to fit the bill for the design you need to implement in the SharePoint site, then look to master pages.  With master pages you can implement your own navigation systems, custom code and design elements, move elements around on the page or hide SharePoint components you don’t want to use.  It is a more complete solution for totaling changing the way SharePoint looks.

In some situations, both master pages and themes can be used. If you use a master page to style the site, using a custom theme can style the _layouts pages to coordinate with the look of the site.  If you need to apply different color palettes for one design for sub sites, in MOSS use can use the alternate CSS setting, but that isn’t available for WSS sites.  You can create a custom master page for the WSS sites to use, then create and apply different themes to change the color palette of sub sites.

One drawback to a theme is that you have to apply it at the site level for each site.  Master pages on the other hand can be inherited (for MOSS sites) through sub sites.  But this is buggy and more than likely you have to apply the custom master page on each site anyways.  Another possible drawback to themes is they have to be installed on the server thus making them available to all sites in the farm. But there is a way around this if you don’t have access to your server or if you don’t want a theme available to all sites.

You can apply a theme (pick one that most closely resembles what you want to ultimately do with your site design) to your site, and then a copy of the theme CSS file will be created for the site.  You can edit this file in SharePoint Designer (thus creating a copy of it in the content database and customizing the file) and create your customizations for your site.

So, to run down some key points:

Master Pages

  • Can totally change the look of a site.
  • Can hide SharePoint components that you don’t want to use.
  • Will allow you to alter the layout of the page, in addition to changing the colors and images used in the site.
  • Will not affect _layouts pages.  You will need to use a workaround.

Themes

  • Can re-skin the layout of a site to use different images and colors.
  • Can only hide SharePoint components that can be controlled through hiding it in the CSS (display: none set on a class/ID).
  • Affects _layouts pages.
  • Can be used as an alternate CSS file application method, similar to alternate CSS setting in MOSS sites.
  • Are installed on the web server unless you customize the file.

In Sharepoint Server 2010, the custom master page option is much more attractive than the custom theme option because it is much easier to apply the custom master pages to your _layout pages (in the browser UI if publishing is enabled). In fact, creating a custom theme and uploading it to the SharePoint 2010 server is not an option even covered by Randy Drisgill and co-authors in the book Professional SharePoint 2010 Branding and User Interface Design, the book that has become my de facto branding bible for SharePoint 2010 (in conjunction with a SharePoint Designer 2010 training class from MindSharp that I also highly recommend).

More Posts in the series:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Overriding CSS by attaching an alternate style sheet to the master page in the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Overriding CSS by attaching an alternate style sheet to master page code in SPD 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3 (Coming soon)
Creating custom master page with custom layout and code using SPD 2010

4. History of SharePoint Branding: 2007 to 2010

5. Sharepoint 2010 CSS: List of Useful Styles

Category: Branding, SharePoint | Tags: , ,
« Older Entries