Home > SharePoint Advancements > Modifying SharePoint CSS page design without touching the master page

Modifying SharePoint CSS page design without touching the master page

If you ever wanted to make modifications to an already existing SharePoint template CSS but you are to afraid to mess around with the master page or you don’t have access to SharePoint designer you can easily accomplish this by using a Content Editor Web Part on your page along with some CSS.  The good thing about this is you can go wild and crazy and if you don’t like what  you’ve done you can simply delete the Content Editor Web Part and your page is back to its default.  This is also good if you only need to make changes to just one site or maybe the layout of a specific SharePoint Calendar.

A good reference before you start is Heather Solomon’s page: http://www.heathersolomon.com/content/sp07cssreference.htm

She has already done the hard part for us.  On her site she lists all the major CSS styles used in MOSS and WSS and all their attributes.

So to get started:

1.  On the SharePoint site you would like to modify, edit the page and add a Content Editor Webpart to your site.
2.  Next edit the Content Editor Webpart and edit the Source Editor
3.  Inside the Source Editor add your CSS Style tag.

<style type=”css/text”>
</style>

4.  Next say for example you wanted to modify the recycle bin CSS.  On Heathers reference page she shows that the CSS tag for the recycle bin is:  .ms-recyclebin  awsome!  She also lists the attributes that can be changed for this CSS (Background,Width,Border,Padding,Font weight, color,Text decoration).
5.  Say that we want to change the Border width and the border color of the recyle bin.  No problem.  Inside your <style type=”css/text”> tag reference the .ms-recyclebin CSS tag like so.

<style type=”css/text”>
.ms-recyclebin
</style>
 

6.  Next since we are going to be modifying the CSS of the recyclebin’s border we need to inclose these inside {} for the .ms-recyclebin like so:

<style type=”css/text”>
.ms-recyclebin{
border-style:solid;
border-color:red;
}

7.  Here we changed the CSS border style to solide and color for the recyclebin to red.
8.  Apply and save your changes. You should now see that your recyclebin has a solid border and its colored red.

Again there is so many different combinations and changes you can do to your site using CSS.  Using Heather’s page should have all the major CSS styles to modify at will.

Enjoy and happy CSSing!

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: