Skip to main content

Wiki

Go Search
Home
  
B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > ExamplePoint > Wiki > Wiki Pages > Documentation  

Documentation

Fundamentals
 
To accomplish customizing the Wiki pages we need to understand a few basics.  Wiki pages do not have a template that can be easily changed, and each page is independent from the next. 
 
We could add a basic HTML template each time we create a page by clicking on the HTML button in the tool bar, but if we every wanted to change the basic layout we would need to go back to each created page and make the changes, that is a lot of work.
 
So we need a solution that can be applied to each page and does not require that we change or add something to each page that is created.
 
Solution, JQuery, which provides a nice way to modify pages AFTER they have been loaded and allows us to just change specific attributes of the Wiki page.  JQuery is so friendly in this way.
 
So this solution will use JQuery and CSS to allow us to customize the look, feel and navigation of the site.  And if we need to change that at any time.  We will only need to change ONE file to make the changes across all Wiki pages.  Now that is a breath of fresh air.
 
WARNING: This solution does require one modification to the Master page where we have to add three lines.  So if you cannot change the master page then contact your administrator to add the two lines needed.
 
Solution
 
There are two files that I will provide for you.  The third file you will either reference for an external site (Google JQuery), as I have below, or internally from one of your document libraries.  This documentation will not address storing the JQuery file.
 
The first two files contain the CSS/HTML and the JQuery code needed to apply the changes.  The HTML and CSS file is named "wiki.CSS" and the JQuery code file is named "wiki.js". 
 
wiki.css
 
This file contains the CSS code and the HTML that is rendered to customize the look, feel and navigation of the Wiki.  This is where you will do most of all the changes that you want to the Wiki look and feel. 
 
I will break down the file.  There are two main sections.  First section is the CSS and the second section is the HTML viewed in the header and footer.
 
CSS Section
 
In this section you can change, delete or add your own styles.  If you are familiar with CSS then makes changes here will be intuitive.  If you have not used CSS before I recommend that you research it on the Internet.
 
Here is what you will find in the default file.
 
/* CSS SECTION
This section is the CSS where you can customize the look and feel
You are welcome to add, delete or change the CSS here */

/* This will change the width of the Wiki content */
.pa-wikicontentPA {
 color:#333333;
 line-height:1.3;
 width: 725px;
}
/* This will change the top portion of the Header */
.pa-WikicontentTop {
 color: white;
 background-color: #378980;
 font: bold medium;
 text-align: center;
}
/* This will change the email portion of the footer */
.pa-WikicontentCon {
 text-align: center;
 font: bold 10px;
}
/* This will change the navigation links found in the header and footer */
.pa-WikicontentNav {
 font: bold x-small;
 text-align: center;
}

/* This will change the width of the added fields below the Wiki content */
.pa-formtablePA  {
 width: 725px;
 
I like CSS because I make one change to the CSS and it will cascade to all the places that I reference in the HTML, which you will see below.  Again another great way to make a few changes as possible while getting maximum results.
 
HTML Section
 
The next section outlines the HTML. 
 
CHANGES: There are a few lines that you will need to change when implementing this to make it work with your Wiki setup.  The links will need to changed to reflect the links on your site.  I have highlighted what needs to be changed in Red
 
You have two choices. 
 
Simple:
One is to use the current HTML and just customize the links by editing the existing HTML and the look by editing the CSS listed above.  Now both the CSS and HTML are in the same page so you only need to update one file.
 
Advance:
But you most likely want to customize it even more then that.  Here you can put in any HTML you would like to create the custom look of your Wiki. 
 
When you change the HTML, make sure that you keep the <div> tags.  It is very important that you only change the HTML between the <div> tags.  The wiki.js uses the <div> tags to get the right information to put at the top or bottom of the page.  Delete the <div> tags and you will no longer see the HTML show up in the Header or Footer.
 
You can use SharePoint Designer (now a free download click here) to create the look.  Then copy the HTML and place it in between the <div> tags. And you have created your custom look and feel.
 
Here is the standard HTML that comes with the file.
 
/* HTML SECTION
This section is the HTML code the will show up in the HEADER and FOOTER*/
 
/* HEADER */

/* Feel Free to change any of this section.
Just make sure that the div tag is does not change
and is at the beginning and end of your HTML.
The div is critical for the HTML to show up */
 
<div id=pa-WikiTop>
<table border="2" width="725" id="table1" bordercolor="#7BB2AC" cellspacing="0" cellpadding="0">
 <tr>
  <td>
   <p class=pa-WikicontentTop>Wiki Customization Site</p>
  </td>
 </tr>
 <tr>
  <td>
   <p class=pa-WikicontentNav>
   <a class=ms-wikilink href="/ExamplePoint/Wiki/Wiki%20Pages/Home.aspx">Home</a> |
   <a class=ms-wikilink href="/ExamplePoint/Wiki/Wiki%20Pages/Documentation.aspx">Documentation</a> |
   <a class=ms-wikilink href="/ExamplePoint/Wiki/Wiki%20Pages/Download%20Files.aspx">Download Files</a>
   </p>
  </td>
 </tr>
</table>
<p>
</div>

/* FOOTER */

/* Feel Free to change any of this section.
Just make sure that the div tag is does not change
and is at the beginning and end of your HTML.
The div is critical for the HTML to show up */
 
<div id=pa-WikiBottom>
<table border="0" width="725" cellspacing="0" cellpadding="0">
 <tr>
  <td>
   <p class=pa-WikicontentNav>
   <a class=ms-wikilink href="/ExamplePoint/Wiki/Wiki%20Pages/Home.aspx">Home</a> |
   <a class=ms-wikilink href="/ExamplePoint/Wiki/Wiki%20Pages/Documentation.aspx">Documentation</a> |
   <a class=ms-wikilink href="/ExamplePoint/Wiki/Wiki%20Pages/Download%20Files.aspx">Download Files</a>

   </p>
  </td>
 </td>
 <tr>
  <td>
   <br>
   <p class=pa-WikicontentCon>
   If you have any question please email <a class=ms-wikilink href="mailto:peter@theallensite.com">Peter Allen</a>
   </p>
   <p>
  </td>
 </td>
</table>
</div>
** Reminder to change the items in Red to the navigation that you want. **
 
Wiki.js
 
This file houses all the JQuery code that will parse the Wiki page and added the Header, Footer and affect the change to the width of the Wiki content.
 
CHANGES: You will need to make a change to two lines when you implement this.  Change the path from what is listed to the path where you have put the wiki.css and wiki.js files.  I have highlighted what needs to be changed in Red.
 
If you are proficient in JQuery you can edit this file to add more customization. 
 
Here is what is standard with the file.
 
$(document).ready(function(){
 
/* Looks to see if the Wiki page has been loaded*/
if ( $(".ms-wikicontent").length > 0 ) {
 
/* This will dictate what happens to the main content of the wiki page*/
 $('.ms-wikicontent').addClass('pa-wikicontentPA');
 
/* This will dictate what happens to any additional fields added below Wiki content*/
 $('.ms-formtable').addClass('pa-formtablePA');
 
/* This section adds the HEADER to the Wiki Page
Remember to update the path to where you have located the wiki.css file*/
 $('.ms-wikicontent').prepend('<div id=placeTop></div>');
 $('#placeTop').load('/ExamplePoint/Wiki/Support/wiki.css #pa-WikiTop');
 
/* This section adds the FOOTER to the Wiki Page.
Remember to update the path to where you have located the wiki.css file*/
 $('#onetidinfoblock2').prepend('<div id=placeBottom></div>');
 $('#placeBottom').load('/ExamplePoint/Wiki/Support/wiki.css #pa-WikiBottom');
 
});
** Reminder to change the items in Red to the location you have put the files. **
 
Now that you have read all this, click on Implementation to download all the files needed to put this in place.

Last modified at 8/25/2009 11:26 PM  by Peter Allen