dlocc.com

Style a Page using the Content Editor Web Part and CSS

SharePoint Web Part IconDo you have pages that look bland that you want to add some color to? Perhaps you would like some a background behind your web part titles.   Maybe you want to hide the recycle bin on one page, but not another.  Using the Content Editor Web Part you are able to add CSS to a page to customize it's look and feel.  This is a great alternative to modifying core.css, using SharePoint Designer or other methods (such as specifying a custom CSS file in site settings).  Follow along with this quick demonstration on just how! 

So you are interested in branding your SharePoint page using the content editor web part, eh?  Well, there are both benefits and drawbacks to using this method.  Some people may condem this method for all its worth while other embrace it as a quick styling method.  Whatever you opinion is, let's begin:

1.  Navigate your browser to the page you wish to style and click Site Actions > Edit Page to check out the page. 

Edit SharePoint Page

Please note: If you do not see the Site Actions button you most likely do not have the appropriate permissions on this page.

 

2. Click "Add a Web Part" on any web part zone zone; it doesn't really matter since this web part will be hidden

 

3. Add a new Content Editor Web Part and click Edit > Modify Shared Web Part

SharePoint MOSS Content Editor Web Part

SharePoint Edit a Web Part

 

4. Click on Source Editor and add some custom CSS.  If you need a great reference guide please check out Heather Solomon's guide located here

SharePoint Source Editor

 

...Now add your CSS and click Save to see your changes

MOSS Content Source Editor

 

And don't forget to hide the web part by expanding "Layout" and click the Hidden checkbox...

If you have comments post them below, if you have questions post them in the forum

Comments
Add New Search RSS
+/-
Write comment
Name:
Email:
 
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Please input the anti-spam code that you can read in the image.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
 

Main Menu

Enter SharePoint Forum
Joining is easy...
You are here  : Home SharePoint Branding Style a Page using the Content Editor Web Part and CSS