Category Archives: CSS

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

Tagged ,

SharePoint – Use Javascript

Hello everyone. Today I want to show you how to use Javascript on your SharePoint websites.

To show you how this works I created a Javascript file which applies a CSS file to a SharePoint Page. Here are my scripts:

Javascript:

var path = "/Style Library/Custom";
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/HideRecentlyModified.css';
document.getElementsByTagName('head')[0].appendChild(style);

CSS:

.s4-recentchanges
{
display: none;
}

After I created those scripts I uploaded them to my SharePoint website.

sharepoint_styles_library_scripts

Now add a Content Editor Webpart to the SharePoint Page you want to apply your Javascript file to.

 

Now start editing your Content Editor Webpart and click on Edit HTML Source to modify its HTML Code.

sharepoint_content_editor_webpart_edit_html_source

Now add the following code to the HTML Source window:

<script src="/Style Library/Custom/SwitchCSS.js"></script>

sharepoint_html_source_javascript_path

Now click on OK and save your changes. That´s it. This is all you need to do when you want to apply a Javascript file to your SharePoint pages. I hope my post was useful for you.

Sources:

http://www.codeproject.com/Articles/591062/How-to-add-JavaScript-and-CSS-f

http://www.codeproject.com/Tips/493775/Apply-CSS-styles-to-SharePoint-Web-parts

http://techtrainingnotes.blogspot.co.at/2012/05/adding-javascript-and-css-to-sharepoint.html

Tagged , ,

SharePoint – Hide Recently Modified (Wiki Library)

Hello everyone. Today I want to share my knowledge how to hide the Recently Modified Section located in the Quick Launch. Many people do not like it because it “breaks” the navigation. Like always there are many possibilities to achieve this, but I will show you the possibility I think is the best.

We will do the following:

  • Create a Custom CSS file which will disable Recently Modified for us
  • Enable necessary features
  • Upload our Custom CSS file to the SharePoint Style Library
  • Configure the SharePoint Site to use our CSS file

Recently Modified Before

sharepoint_recently_modified_before

Create Custom CSS file

Open Notepad and add the following code:

.s4-recentchanges
{
display: none;
}

Now save it as “HideRecentlyModified.css”.

Enable necessary features

Now you need to enable the necessary features

Site Settings Before

sharepoint_site_settings_before_features

Site Collection Features:

  • SharePoint Server Publishing Infrastructure

Site Features:

  • SharePoint Server Publishing

Site Settings After

sharepoint_site_settings_after_features

Upload our Custom CSS file to the SharePoint Style Library

Now go to All Site Content and go to the newly created Style Library. Create a new folder and call it “Custom” (This way you will be able to identify your changes when some time has passed). Now upload your Custom CSS file (HideRecentlyModified.css) to this folder.

sharepoint_style_library

Configure the SharePoint Site to use our CSS file

Go to Site Settings and click on Master Page under Look and Feel. There you will find the heading “Alternate CSS URL” where you need to choose the option Specify a CSS file to be used by this publishing site and all sites that inherit from it and select your Custom CSS file. Now click on OK and you´re ready to go.

When you now take a look at your Wiki Library you will notice that Recently Modified is gone.

sharepoint_recently_modfied_after

That´s it. Now Recently Modified will no longer be visible on this SharePoint Site. The big advantage of this method is that you can enable it on a per site level, combine this CSS setting with other settings and you can easily revert it. I hoped you liked my post.

Sources:

http://thepolymathlab.com/2012/12/02/hide-recently-modified-panel-in-sharepoint-2010/

http://thepolymathlab.com/2012/12/02/add-custom-css-to-sharepoint-2010-without-master-page/

http://troyscott.ca/2010/06/07/sharepoint-master-page-missing-from-look-and-feel/

Tagged ,