Supporters of End User
Web

Style a Page using the Content Editor Web Part and CSS

 
Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories: 

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:

  1. Navigate your browser to the page you wish to style and click Site Actions > Edit Page to check out the page.
  2. Please note: If you do not see the Site Actions button you most likely do not have the appropriate permissions on this page.

  3. Click “Add a Web Part” on any web part zone zone; it doesn’t really matter since this web part will be hidden
  4. Add a new Content Editor Web Part and click Edit > Modify Shared Web Part
  5. 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
  6. …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 

Comments

Huber

Style a Page using the Content Editor Web Part and CSS

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.

Posted 29-Jan-2010 by Huber
George W

Style a Page using the Content Editor Web Part and CSS

Well, I for one wish that you'd actually shown some useful / beautiful / clever CSS changes.

Posted 29-Jan-2010 by George W
Charlie Epes

Style a Page using the Content Editor Web Part and CSS

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

Posted 30-Jan-2010 by Charlie Epes
EndUserSharePoint

Style a Page using the Content Editor Web Part and CSS

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

Posted 30-Jan-2010 by EndUserSharePoint
Devin Walker

Style a Page using the Content Editor Web Part and CSS

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.

Posted 30-Jan-2010 by Devin Walker
michael

Style a Page using the Content Editor Web Part and CSS

would love to see some samples too.

Posted 02-Feb-2010 by michael
David Cavins

Style a Page using the Content Editor Web Part and CSS

You can use this site to generate the css

http://moss-sd.sharepointlounge.com/default.aspx

Posted 02-Feb-2010 by David Cavins
David Cavins

Style a Page using the Content Editor Web Part and CSS

Also if you use the linked source setting in the CEWP you can technically control multiple pages from one central location.

Posted 02-Feb-2010 by David Cavins
Gord

Perfect - Thanks

I had a page where I needed a list to have column titles for filtering etc. Our CSS does not allow this on the base sites, so for this case and this list we created a page and applied the CSS and it worked perfectly for our needs. As simple as this solution might be, it is golden for what we needed Thanks

Posted 14-Aug-2013 by Gord
yitoyitoytyo

yitoyitoytyo

Finalmente, la línea de Relojes Especiales day-Date Aqua Terra también ofrece un modelo en carcasa de acero inoxidable montado Replica Rolex sobre una cinta del mismo metal o cuero. Este reloj está disponible con un dial negro o azul (nuestro favorito) Patek Philippe replica acompañado por las agujas y el índice de rodio, o con un dial de plata con índice.

Posted 17-Apr-2014 by yitoyitoytyo

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: