Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand

Content Editor Web Part & CSS Tricks

Posted by Jean Paul on March 8, 2013

In this article I would like to inform you on the usage of Content Editor Web Part for CSS style manipulations.

What is Content Editor Web Part?

Content Editor Web Part is used to provide Formatted HTML Content to your web page. You can add a content editor web part following the steps below:

· Open the Page

· Choose Site Actions > Edit Page

· Click on Add Web Part

· Choose Content > Content Editor Web Part

· Save changes


You need to have Designer permission level to edit pages. Please make sure you consult your Governance Committee before making changes.

Why we need CSS style changes?

Your customer might require changes in the layout of SharePoint pages. Editing the master page would be a choice but it is much more costly in terms of effort & performance.

The customization requirements will be as:

1. Hiding the Quick Launch from the left side

2. Highlighting the Page Elements

3. Modifying the Calendar items display format

4. Modifying other common style elements

Little about CSS

Cascading Style Sheets allows us to modify the Look & Feel of HTML elements as a whole. For modifying a single element we can use the id property of the element.

For modifying items as a whole, we can use the class property of the element.

Hiding Quick Launch

In this example we can try hiding the Quick Launch from a page. Following are the steps involved:

1. Find the Quick Launch bar Division Id

2. Add code to hide the Division in Content Web Part

3. Hide the Content Web Part too

To start with open your site which is Okay to be played with:


Now you can see the Quick Launch in the above page. We need to find the Division Element Id of the Quick Launch Bar. For this click on F12 button or open Developer Tools from Internet Explorer. Move the cursor over the Quick Launch bar & click on it. You will get the class name highlighted as shown below:


We are taking the CSS class name highlighted in Green Color. Now edit the Content Editor Web Part and choose the HTML source from toolbar. clip_image007

Add the following code in the HTML Source:


. s4-notdlg


display: none;


</ style >

Please note that the above code hides the Quick Launch Bar by hiding the Division Class. Now save the changes to page & you can see the Quick Launch is hidden.

But Wait! The solution is not complete. You can see that there is space filled in the old quick launch position. We can remove that by using the margin-left property of division.


As the last step we needed to hide the Content Editor Web Part as well. Choose edit web part and choose the Hidden option from Layout category.


Click the OK button & now you can see that the Quick Launch is hidden.

Ghosting & Unghosting

Ghosting is the state on which pages are rendered from File System. Unghosting is the stage where the edited pages are residing in database and rendered from there.

Unghosted pages should reduce performance, but in negligible based on network traffic.




In this article we have explored Content Editor Web Part and CSS style manipulations. To summarize with following are the points worth keeping in mind.

1. Content Editor Web Part allows us to include HTML, CSS, Java Script

2. We can add CSS code to modify page elements

3. Content editor web part can be made hidden

4. Customizing Pages involve slight performance overheads

5. Unghosting occurs while editing pages

6. Get approval from SharePoint Governance committee before applying page modifications

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s