SharePoint 2007 – Inline CSS Styles to Customize Pages

I am often asked to customize the layout of a page within a SharePoint site as a “one-off” change (one that affects only that page and not the entire SharePoint site).  This is typically a request to hide something on the page or to change the attributes of a font on a page, such as hiding the quick launch bar, hide the breadcrumbs or increasing the font on a header.  These changes are often small and don’t necessarily require a change to the site master page or style sheet (.css file).  One of my favorite tips is to use “inline CSS styles” to apply style changes to a page. 

My solution basically consists of adding a Content Editor web part to a page and including style sheet instructions that override the current page styling (as HTML style tags within the Content Editor web part).  The beauty of this solution is that it does not require changes to the site style sheet and can be isolated to just one page.  The down-side to this approach is that the change only impacts one page at a time, and you must apply this technique for each page you wish to change.

In this article I will provide you the specific instructions needed to inline CSS styles to customize your pages. 

Example Request: Hide the breadcrumb on our news article page.

Let’s pretend we’ve received a request to hide the breadcrumb line so that the page title is at the top of the page.  The user is basically asking us to make remove the words “Home > News > Sample News Article” and make the words “Sample News Article” appear at the top of the page.

 

Step 1: Add a Content Editor web part to the page and make it hidden.

Open the page in edit mode and add a web part to the page of type “Content Editor web part”.  You do this by using the “Site Actions” menu and selecting “Edit Page”.  Modify the properties of the web part so that the web part is hidden.  You do this by checking the “Hidden” box inside the Layout section of the web part settings panel.  Important note: Even though you’ve hidden the web part the CSS styles still effect the contents of the page.

 

 

Step 2: Identify the styles to override in the HTML source of the page.

Open the HTML source of the page and look through the HTML for the area you want to effect.  Both Internet Explorer and Firefox provide a menu option for viewing the HTML source for a page; in Internet Explorer you’ll need to use the View menu and select Source.  After opening the HTML source you can search for the desired HTML area, In our case we can do a find on “Sample News Article” to find the breadcrumb area.  See the following code example; notice the CSS class named “breadcrumb” that is applied to the HTML “div” tag, we will be applying a change to the “breadcrumb” class to override the styling of the breadcrumb text.

<div class="breadcrumb">
    <span id="ctl00_PlaceHolderTitleBreadcrumb_siteMapPath">
    <span><a class="ms-sitemapdirectional" href="/Pages/Default.aspx">Home</a></span>
    <span> &gt; </span>
    <span><a title="Company News Home" class="ms-sitemapdirectional" href="/News/Pages/Default.aspx">News</a></span>
    <span> &gt; </span><span class="breadcrumbCurrent">Sample News Article</span></span>
</div> 

 

Step 3: Use the HTML Editor to add style tags to override the page styles.

Open the Content Editor web part and use the “Source Editor” button to add HTML directly into your page.  Enter your CSS commands in the middle of <style></style> tags.  See the example below where we override the breadcrumb div tag by using the CSS display property to hide the breadcrumb div.

 

<p>&nbsp;</p> 
<style type="text/css"> 
    div.breadcrumb 
    { 
        display: none; 
    } 
</style> 

 

Step 4: Preview the page and make adjustments if necessary.

Save the changes to the Content Editor web part and publish your changes.  Be sure to preview the page to see if the CSS style overrides you applied are what you expected.  If not, you’ll need to back up a few steps and try again.

 

 

My hope is that this technique of applying inline CSS styles directly into your SharePoint pages can give you another option for formatting your pages.  Again, this technique can be particularly useful when you have a change that affects only a single page and does not need to affect the entire SharePoint site.  Good luck and let me know if you come up with other creative uses for applying inline CSS styles.

SharePoint 2007 – Branding Your application.master Page

Most SharePoint administrators and developers are aware of the techniques for customizing the master page for a SharePoint site, so I am not going to go into detail on this topic.  However, I do want to share with you any easy technique I found for customizing the administrative pages on a SharePoint using the application.master file.

A quick background on administrative pages vs. regular SharePoint pages:  Most content pages that you create within a SharePoint site are stored within the content database and are easily styled using a custom master page and style sheet specified on the site settings page.  These pages typically consist of web part pages, home pages, and other pages you create to display SharePoint content, these pages inherit the master page and CSS settings that you specify in the site settings of your SharePoint site.

The other types of pages that you see within SharePoint pages are called “administrative pages” or “application pages”.  Those pages are supplied by Microsoft as part of the SharePoint installation and are used to configure and administer your SharePoint site, these pages are NOT stored in the content database and are instead stored on the file system in the _Layouts directory (typically this is C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\Layouts ).   Another important difference between these two types of pages is that all the styling of administrative pages is specified in a single master page named “application.master” which is stored on the file system in the _Layouts folder. 

One very important note about the styling of administrative pages using the application.master is that each SharePoint farm can only have one application.master file in the _Layouts folder, which typically means that ALL your administrative pages across your entire SharePoint farm must share the same styling.  This can present a design challenge if you are a SharePoint administrator and you are asked to have different styling for different sites and site collections within the same SharePoint farm AND you need the administrative pages to be styled consistently with those sites and site collections.  In a future post I will present some options on how to address this limitation.

Back to the easy technique for branding (styling) your application.master page.  Standard master pages and the application.master file are generally the same but do have some very slight differences.  You cannot simply copy your regular master page content into the application.master file and expect everything in SharePoint to work perfectly, they are not 100% compatible.  However, you can take your regular master page and tweak it (with little effort) to use as your application.master file.  Below is an outline of the “tweaks” that need to be made

Tweak 1.  Application.master files should not contain the delegate control for the SmallSearchInputBox.  You can simply remove the following reference from your master page:

                        <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>

Tweak 2.  Application.master should also contain the following content placeholder tags, several pages within the _Layouts folder rely on these tags:

                        <asp:ContentPlaceHolder id="PlaceHolderPageDescriptionRowAttr" runat="server" />
                        <asp:ContentPlaceHolder id="PlaceHolderPageDescriptionRowAttr2" runat="server" />

Thus far I’ve only found these two tweaks, or changes, needs to be made to a master page in order to use it as your application.master page.  If you find that there are other required tweaks, please pass those along to me so that I can update my post.

SharePoint 2007 – Branding Your application.master Page

Most SharePoint administrators and developers are aware of the techniques for customizing the master page for a SharePoint site, so I am not going to go into detail on this topic.  However, I do want to share with you any easy technique I found for customizing the administrative pages on a SharePoint using the application.master file.

A quick background on administrative pages vs. regular SharePoint pages:  Most content pages that you create within a SharePoint site are stored within the content database and are easily styled using a custom master page and style sheet specified on the site settings page.  These pages typically consist of web part pages, home pages, and other pages you create to display SharePoint content, these pages inherit the master page and CSS settings that you specify in the site settings of your SharePoint site.

The other types of pages that you see within SharePoint pages are called “administrative pages” or “application pages”.  Those pages are supplied by Microsoft as part of the SharePoint installation and are used to configure and administer your SharePoint site, these pages are NOT stored in the content database and are instead stored on the file system in the _Layouts directory (typically this is C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\Layouts ).   Another important difference between these two types of pages is that all the styling of administrative pages is specified in a single master page named “application.master” which is stored on the file system in the _Layouts folder. 

One very important note about the styling of administrative pages using the application.master is that each SharePoint farm can only have one application.master file in the _Layouts folder, which typically means that ALL your administrative pages across your entire SharePoint farm must share the same styling.  This can present a design challenge if you are a SharePoint administrator and you are asked to have different styling for different sites and site collections within the same SharePoint farm AND you need the administrative pages to be styled consistently with those sites and site collections.  In a future post I will present some options on how to address this limitation.

Back to the easy technique for branding (styling) your application.master page.  Standard master pages and the application.master file are generally the same but do have some very slight differences.  You cannot simply copy your regular master page content into the application.master file and expect everything in SharePoint to work perfectly, they are not 100% compatible.  However, you can take your regular master page and tweak it (with little effort) to use as your application.master file.  Below is an outline of the “tweaks” that need to be made

Tweak 1.  Application.master files should not contain the delegate control for the SmallSearchInputBox.  You can simply remove the following reference from your master page:

                        <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>

Thus far I’ve only found that this one “tweak” or change needs to be made to a master page in order to use it as your application.master page.  If you find that there are other required tweaks, please pass those along to me so that I can update my post.