• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Finally, you can manage your Google Docs, uploads, and email attachments (plus Dropbox and Slack files) in one convenient place. Claim a free account, and in less than 2 minutes, Dokkio (from the makers of PBworks) can automatically organize your content for you.

View
 

ChangingPbwikiCss

Changing your pbwiki CSS code

 


 

David Weekly asked me to help out with a small "HowTo" on changing your wiki's look by customizing the wiki CSS files.

 

I only changed one of my CSS files. There are three of them.

common.css

screen.css

print.css

 

In this instance, I modified my screen.css and uploaded it into my files repository. You must rename a modified css file to have the name wiki.css and you can only have one. If you need to change more than one css file, you can paste any changed lines from any of the 3 css files into the wiki.css file. David tells me you only need to have the parts you changed in the wiki.css file, so it doesn't even have to be very big. This will also make your changes easier to see. I haven't done that, I used the whole screen.css file and now I have trouble seeing what I changed. Don't follow my bad example. When I get time I'll fix it up.

 

Once you have made changes, make sure to cut out the sections you changed and put them into a new file called wiki.css and then upload it to your file repository.

 

I'll give you a few tips here before you get started.

 

How do I get the CSS files?

 

Open a browser and type in these addresses after you have changed the "freewarewiki" to the name of your wiki. The screen css file will have a skinX name in the path, where X is the theme number you are using. (skin1, skin2, skin3 etc.)

 

http://freewarewiki.pbwiki.com/common.css

http://freewarewiki.pbwiki.com/themes/skin6/screen.css

http://freewarewiki.pbwiki.com/print.css

 

Once the css code is displayed you can pick "File" "Save As" and save them to your PC where you can find them. Now you can open up Windows Notepad and edit them.

 

I display the HowTo below using line numbers in the CSS file. To see line numbers in Windows Notepad, turn on "View" "Status Bar". Now you can see them at the bottom of the Notepad.


 

To get more help on CSS

For pbwiki's FAQ on customizing CSS, see:

http://mycss.pbwiki.com/

http://yummy.pbwiki.com/CssResources

http://pbwiki.com/cssfaq.php

 

For help on the web try this website:

http://www.w3schools.com/css/


 

Here are some of my CSS tweaks

Your wiki css code may not look exactly like mine. I am using the Minimalist theme. If you are using another theme, it will look different.

 

Theme = Mimimalist

Modifications to the screen.css file

A) shows value before

B) shows value I made it


 

Line 2: Changing the body - BACKGROUND

 

I changed this to make the page background slightly gray instead of pure white.

 

A) BACKGROUND: #fff;

B) BACKGROUND: #eeeeee;

screenshot


 

Line 2: Changing body - FONT

 

I didn't change my fonts, but you might want to.

 

A) FONT: 100% Verdana, Tahoma, sans-serif; COLOR: #000000;

screenshot


 

Line 5: Changing the root - BACKGROUND

 

I changed this to add the lite blue cloud pattern in my root background. You can change the color very easily here or add an image or seamless tile like I did.

 

A) BACKGROUND: #f5f5f5;

B) BACKGROUND: url(http://freewarewiki.pbwiki.com/f/clouds002.jpg);

screenshot


 

Line 5: Changing the root - MARGIN

 

This controls how close to the edge of the page your root background gets to the edge of the page. I made mine move farther out.

 

A) MARGIN: 5px 10px 0px

B) MARGIN: 5px 23px 0px

screenshot


 

Line23: Changing the Page Header image

 

Do you like the little pbwiki sandwich in the top right corner of your wiki? Mine made me hungry all the time. I started gaining weight, so I decided to put the sandwich away for awhile. Make sure your image is the same size or very close if you change it. You can't change the link behind it, so don't even try.

 

A) BACKGROUND: url(images/logo_small.gif)

B) BACKGROUND: url(http://freewarewiki.pbwiki.com/f/GetYourWiki.gif)

screenshot


 

Line 44: Changing your menu buttons

 

I changed the background color of my menu buttons from white to lite blue.

 

A) BACKGROUND: #fbfbfb;

B) BACKGROUND: #bbddff;

screenshot


 

That's enough for now. I'm getting sleepy. I've shown you enough here to keep you busy for hours.

 

Have fun!

 

ClifNotes