Style a Page using the Content Editor Web Part and CSS

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:

1. Navigate your browser to the page you wish to style and click Site Actions > Edit Page to check out the 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

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

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

Related posts:

1. Redirect a SharePoint site by using the Content Editor Web Part This blog demonstrates a useful way to use the Content Editor Web Part to redirect users of a particular site. The script prompts a site's end users they will be redirected and then redirects them after a certain period of time. At some point in time you might want to point users to another location [...]...
2. Hide SharePoint Breadcrumbs on Pages Breadcrumbs are great for navigational purposes and help users cruise around your SharePoint site with assisted ease.  Sometimes you may want a page to not have the breadcrumb trail and you may be looking for an easy way to get rid of them on that specific page.  Follow along on this easy tutorial to view [...]...
3. SharePoint Workflow: Remove the “?????” for blank values in email So you have emails being sent out using SharePoint workflow but the problem is the blank values return five question marks "?????" and this is not very appealing to the user. Perhaps you would like it to say something else instead that wouldn't confuse your recipients as much. Follow this tutorial to learn how to [...]...
4. SharePoint Data View Web Part Announcements List The frontpage of any corporate Intranet should have announcements to provide site users with up to date information about the on goings of the company. SharePoint provides a number of options to make this possible. The following article will provide you with information about how to use the Data View Web Part to display an [...]...
5. Discard SharePoint Page Checkout Scenario: you are using SharePoint Designer to edit pages and the one you want to edit is checked out by someone and you need to edit it. Using SharePoint Designer you cannot easily discard a checkout, but you can using the browser. Here's the typical SPD Checkout popup: Uh oh, this prompt doesn't look very [...]...