Styling Wikka


As of version 1.2 you can use themes to change the look and feel of your wiki

This is the first in a series of pages aimed at helping those who are wanting to add a bit of custom styling to their own Wikka site, but don't know where to begin.
So, you've installed Wikka, and want to change the style a bit from the default, but you are not sure how to go about it? It's not hard to do!


Styling Your Wikka Wiki: Getting Started

I will assume that you have successfully installed WikkaWiki. And that you know how to download/upload files to your server. (If you need help with any of that, leave a comment, and I'll be happy to help.)

So, I will begin with how to edit the files that affect the style of your Wiki. All of the files we need to edit... indeed, all of the files that make up the WikkaWiki installation... are plain text files, which you can edit with any plain text editor. Note, MS Word is NOT a plain text editor! Neither is any word processor or any desktop publisher! If you are using MS windows, Notepad is a plain text editor. But you will have to make sure you save the file with the correct file extension. Notepad, by default, appends .txt to whatever filename/extension you save as. Windows, by default will hide the extension from you. But, you are a power user now! Turn on show filename extensions! Now, close Notepad, and get a far better file editor: Notepad++. I highly recommend it.

Okay, so how do we change the style? Most of the style info is in a file, called a 'style sheet', named "wikka.css", located in the folder, "css". It is a powerful file, and controls colors, positioning, backgrounds, and more. You should have a copy of this file on your own machine, at whatever location you unzipped your Wikka to before you uploaded it to your server. Open it in Notepad++ or whatever editor you use, but save it to a different folder. That way you have the original file as a back up. Now, the general procedure is to make modifications to your file(s), upload to the server, and then test in your browser. (you will need to hit refresh to see the changes) There are options that will simplify this for you, and not break a working site if you goof... and yes you will goof, there is a lot of trial and error involved in web development. However, unless you have a server running on your local machine, Wikka won't run on your own machine. It needs PHP and MySql running on a server. If you want to do some simple changes, you can make a dummy page. More complex hacks can be trialed at home by installing EasyPhP. Ok, go check out those two options, and choose either one, or neither if you prefer to hack your live installation.

Dummy Page


It's a little annoying to have to upload our modified files to the server often, and also we don't want users to possibly see a broken, or half styled website. So, we will make a dummy page. This allows us to make changes, that don't involve running the scripts, locally, then only when we are satisfied with the results will we upload the custom css file. A dummy page is a static page that uses the elements of Wikka. Since it's a static representation of your Wikka page, you can save it on your own machine, make changes to the css, and view the changes without having to run the script on a server.
Tip...
If you are using FireFox, there are some powerful plugins you will want to take advantage of. Here are some I use:
  1. FireFTP: Runs ftp as a tab... very convenient, works flawlessly. Allows you to open files on your server with your selected editor program, and automatically uploads them when you save.
  2. Firebug: A suite of web development tools, allows you to easily experiment with the style of any site, and to open them in your editor.
  3. Web Developer: More web dev tools. Disable css, images, outline block and line level elements and tons more stuff.
  4. ColorZilla ColorPicker: Click on any color in your browser window to get color codes. Also helps you discover what css defines the color, and much more.
Your dummy page should include all the different things you want to changes the styling of. That is, if all you want to change are the colors in the header and footer, any page will do, since the header and footer will be the same for every page. If you want to change the style of headings H1 through H5, you will need to add them to a page first. You can, of course make more than one dummy page. FormattingRules would be a good choice to make a dummy page from, because of the wide variety of stuff on the page. You should also make one from the login page and the admin pages, in order to make sure that all your changes work in all of your pages. Some of the actions use their own css files, or embedded styling. It's up to you whether or not to restyle them also, but you will want to make sure the actions style still works with any changes you make elsewhere.

To make your dummy page, open the page you've selected to copy from in your browser. Then just save the page as a complete web page. In FireFox, just right click on the page, IE7 in the tool-bar there is a drop-down under 'Page'. Every browser should have similar functionality, if it's not a right click, perhaps it's under 'File'. You should save the page to a folder, the browser will make a sub folder for the css and image files. Save it as .html. Open the .html file with your browser. Look at the url in your browser, make sure it is pointing to the folder you made for your dummy page, and not your wiki on the net. Your dummy page should look just like the one in your wiki. Now, you can make changes to 'wikka.css', (the one in the sub folder your browser just made) save the file, and refresh your browser to see the changes.

Test your dummy page in various browsers. When you are satisfied with the changes you have made, upload the css file to your server.

Remember to refresh your browser to see any changes you have made!

If you want to make more complex changes to Wikka, and need to alter files other than the css file, you will want to have a working wiki on your local machine. To get a working wiki on a windows machine, you can use EasyPHP.

Now you know how to edit the css file, save it and test your changes... right? If not, just let me know where I lost you and I will try to explain a little better.
Now let's take a look at changing a few colors. Load wikka.css into your choice of editor and read on...

The Wikka Style Sheet: Wikka.css


CSS stands for Cascading Style Sheet. It is a plain text file that contains all of the style code for a page. There are actually more than one CSS included with WikkaWiki, but most people will only edit one, wikka.css. (there is also a style sheet for print, one for xml, and some of the actions have their own CSS) Let's take a look at what we can accomplish with just a few changes. But, first we will have to examine the structure of the page. Open your saved dummy page in an editor, and look for this, mine is at the end of line 15, yours should be close if not exactly on the same line:
<body>

And for this, which should be at the end of your page:
</body>

Everything between these two tags is the body of your page. All the content of the page, including the header, navigation, footer etc... Everything you see in your browser window is included in the body of your page. Think of 'body' as a container, containing smaller containers within it. (More on that later.) And that body is styled by this section of code in wikka.css:
body {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;	font-size: 13px;
/*	text-align: justify; */			/* comment out this line if you really need justified text */
	line-height: 20px;
	color: #000000;
	background-color: #F8F8F8;
}

Note, that this is a cascading style sheet, that means that sections within the body can be styled with rules that overwrite the rules set for the body. But, before I get into that, lets dissect the rules for body. Just remember, for now, that these are default rules, they are applied to any element on the page that doesn't get another rule applied to it.
The first rule applied is font-family. The rule here is that first the browser will check to see if Verdana is installed, and display text in that font if it is. If not, move on to Tahoma, then Ariel, Helvetica, and finally, if none of those fonts are found, we will settle for whatever default sans-serif font is found. Next is font-size, set at 13px. ('px' means pixels.) This, as the name implies, sets how large the text is. Now we come to one of these: , which is the end of that comment. So, the rule, 'text-align: justify;' is ignored by your browser, as is the somewhat misleading comment 'comment out this line if you really need justified text'. Misleading, because it should read 'un-comment out this line if you really need justified text'. Below that is line-height, this controls the spacing between lines. Then we come to color and background-color, which refer to the color of text, and the background. The value for the colors are in hexdecimal. If you are using FireFox, you can get a plugin called ColorPicker that will allow you to get the hex value of any color you see in your browser just by hovering your mouse over it.


more later


Categories:
CategoryStyle
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki