Style a Page using the Content Editor Web Part and CSS
Author: Devin Walker
DLOCC, Inc.
Do 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 its 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 others embrace it as a quick styling method. Whatever you opinion is, let’s begin:
- Navigate your browser to the page you wish to style and click Site Actions > Edit Page to check out the page.
- Click “Add a Web Part” on any web part zone zone; it doesn’t really matter since this web part will be hidden
- Add a new Content Editor Web Part and click Edit > Modify Shared Web Part
- 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
Please note: If you do not see the Site Actions button you most likely do not have the appropriate permissions on this page.
…Now add your CSS and click Save to see your changes
And don’t forget to hide the web part by expanding “Layout” and clicking the Hidden checkbox…
If you have comments please post them below, if you’d like to contact me then click here!
Author: Devin Walker
DLOCC, Inc.
About: Devin Walker is a professional web designer, SharePoint enthusiast and founder of the consulting company DLOCC, Inc.. Devin has years of experience working with companies of all sizes to successfully implement, test and launch SharePoint enterprise content management systems. He writes about his experiences on his blog: DLOCC | Articles and Tutorials
- How to remove the “title” column from a SharePoint list
- SharePoint Errors, Warnings and Problems Collection
- Link Two Lists and Display the Data Using the SharePoint Data View
- SharePoint Workflow Time Zones
- Redirect a SharePoint site by using the Content Editor Web Part
- How to Move SharePoint Calendars Fast
- Style a Page using the Content Editor Web Part and CSS
on
I have to respectfully disagree on you opinion about this being a great alternative to branding a SharePoint page. This method will only brand one page and have you adding this web part to multiple pages. The alternative to modfying core.css (which should never be modified….ever) and SP Designer is writing your own styles in a text editor (and applying as an intercepting style sheet) or using themes.
The only method I could see that would be a valid case for this type of css modification would be testing out how different css classes will act when different properties are assigned. Even that case is not strong becuase tools like IE Developer toolbar and Firebug allow us to manipulate and add attritubes on the fly.
Additionally, if you add CSS classes that are not cross-browser friendly, it could make the browsing experience not as pleasant. This is a minor point however.
Lastly, I wouldn’t recommend this style of branding because of the inconsistencies that it will bring to your SharePoint site. Your SharePoint team has probably worked very hard to create a consistent look and feel for your SharePoint site, and this can take away from this. As well, a typical governance committee will probably frown upon this type of modification.
Well, I for one wish that you’d actually shown some useful / beautiful / clever CSS changes.
I agree that samples would be fun to see. Perhaps we can all share some CSS changes that affect Lists and other web parts. It would be good for everyone, I’m sure, to see other people’s work.
I think this post, while basic, is really important to the growing number of people who are coming to SharePoint in wonder now ,as many of us did some years ago. Sometimes, the content of EUSP seems to edge beyone the end-users experience/knowledge base and cross deeply into developer territory.
Unless Mark has changed the original mission of this wonderful site, I think there is plenty of room for new content geared to beginners and intermediate users. I am a grateful beneficiary of this site and content (at least the stuff I understand…).
Thanks Devin.
Charlie Epes
Mission’s the same: no dev, no server admin, no server programming. If you can do it on the clientside or through the SharePoint interface, it’s open game. — Mark
Thanks for the comments and opinions. I agree, this post does lack screenshots showing some CSS customization on a page using this method.
@Huber: I think this method would be more beneficial to someone looking to add a little extra CSS styling without having to worry about using SPD or attaching another stylesheet.
@George: Agreed, my bad.
@ Charlie Epes: Glad you enjoyed it, you hit the nail on the head.
would love to see some samples too.
You can use this site to generate the css
http://moss-sd.sharepointlounge.com/default.aspx
Also if you use the linked source setting in the CEWP you can technically control multiple pages from one central location.