SharePoint – Customize Wiki Headings with CSS


Hello everyone. Today I want to show you how you can customize the Wiki Headings of a SharePoint 2010 Wiki via CSS to make them look better.

Here you can see all Headings and Colored Headings in their default style. (Not really pretty in my opinion)

sharepoint_wiki_headings_before

To change this we will do the following:

First you need to enable the SharePoint Site Collection and SharePoint Site Feature called “SharePoint Server Publishing Infrastructure”.

Next we create our custom CSS File. I called mine “Wiki.css”. Here is the code:


.s4-recentchanges
{
display:none;
}

.ms-rteElement-H1
{
font-size:xx-large !important;
font-weight:normal;
font-style:normal;
}

.ms-rteElement-H2
{
font-size:x-large !important;
font-weight:normal;
font-style:normal;
}

.ms-rteElement-H3
{
font-size:large !important;
font-weight:normal;
font-style:normal;
}

.ms-rteElement-H4
{
font-size:medium !important;
font-weight:normal;
font-style:normal;
}

.ms-rteElement-H1B
{
color:#ff8c00;
font-size:xx-large !important;
font-weight:normal;
}

.ms-rteElement-H2B
{
color:#ff8c00;
font-size:x-large !important;
font-weight:normal;
}

.ms-rteElement-H3B
{
color:#ff8c00;
font-size:large !important;
font-weight:normal;
}

.ms-rteElement-H4B
{
color:#ff8c00;
font-size:medium !important;
font-weight:normal;
font-style:normal;
}

After you have finished creating your CSS file upload it somewhere to your SharePoint Site Collection.

Next go to Site Actions > Site Settings >  Look and Feel > Master page and select the CSS File “Wiki.css” we created and uploaded to SharePoint and click on OK.

sharepoint_css_navigation_setting

After you have finished the above steps your Wiki Headings will look like this:

sharepoint_wiki_headings_after

Much better than the default Headings right? Well that´s it. Now you know how to customize your Wiki Headings to create better Wiki pages. I hope you liked my post and I hope to see you again 🙂

Sources:

http://junestime.wordpress.com/2012/05/22/change-the-default-markup-style-3/

http://www.ironspider.ca/adv/cssproperties/fontstyles.htm

http://www.w3schools.com/cssref/pr_font_font-size.asp

Advertisements
Tagged ,

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: