Eventually, every PBwiki user wants to have a little extra graphical pizzazz in his/her wiki. The current skins are nice of course (especially that new Bamboo skin…I wonder who made it…), but everybody is using them, so it lacks a little individuality. Wouldn’t it be nice to be able to change some colors, or add some backgrounds, or design a whole new theme from the ground up?

CSS is the way to do that, with minimum hassle. Rather than trying to define the styles of every individual block of code or text like people can currently do in the Point-and-Click Editor, CSS defines classes and how to present different types of information. Read on to find out how it can work for you.

A simple example…

Let’s say you’d really like to have each top-level header (<h1>) be preceded by a little image of some type. Now you could do this manually for every header, inserting the image right before it, or you could define some code like this (don’t worry about the details for now), and never have to worry about it again:

<style>
#displaycontent h1 {
background-image: url(/f/header-bg.gif);
background-position: top left;
background-repeat: no-repeat;
padding-left: 45px;
}
</style>

That might look something like this example.

But that’s just a taste. Now we have to go back to basics…

From the top

CSS stands for Cascading Style Sheets. They’re “style sheets” because each collection of CSS declarations can be considered a “sheet” that defines the style settings for the webpage. They are “cascading” because each style that follows the others takes precedence. There are a couple of different ways to define CSS:

• External stylesheets. These are separate files with the extension .css and are usually linked into the webpage with <link> tags. In PBwiki, the overall skins are defined in these files. Furthermore, any modifications to the skins you might want to make would be inserted into a file called wiki.css, which you can only upload with a premium account (I’ll discuss this later).
• <style> tags. These are HTML tags where you can insert CSS declarations (such as in the example above). Although these are ideally inserted in the page header, every major browser supports inserting them into the webpage body, so you can put them anywhere and they’ll work.
• inline styles. These refer to styles written directly into an HTML tag. For example, I could type <span style=”color:red”>red text</span> and get red text. They have highest priority when present.

I’ll go into how to insert HTML in each of these ways next time. For now, let’s just try using <style> tags for simplicity.

Jumping in…

If you’re using the Classic Editor (no toolbar, straight text), all you have to do is type <raw escaped=0>…</raw> around your style tags, like so:

<raw escaped=0>
<style>
...your style code here...
</style>
</raw>


Otherwise, if you’re using the Point and Click Editor, you’ll want to click Insert Plugin -> PBwiki Magic -> Raw HTML and insert the style code into the given textarea, making sure to include <style> and </style> at the beginning and end respectively.

Each CSS declaration is made of three simple parts:

selector {
property: value;
}

The selector defines what HTML element(s) to modify. The property defines what about the element(s) you wish to modify, like their colors, borders, backgrounds, etc. The value tells the browser what to change that property to. In each of these units, there can be multiple property/value pairs, like so:

selector {
property1: value;
property2: value;
}

And of course there can be multiple declaration units.

We’ll try something really simple before we finish for today. Let’s change the background color of the main content area and put a nice thick border around it:

<style>
#displaycontent {
border: 5px solid red;
background: #ffffcc;
}
</style>

In PBwiki-land, “#displaycontent” is the selector referring to the main content area. You can also see how each property and value pair has been set up. The background color is done in hexadecimal, a web standard for defining colors. You can see the result by clicking here.

Conclusion

CSS requires a little patience and the tendency to fiddle and experiment. That’s why I’m just giving you the basics this time. Take time to go fiddle, and check back soon for more CSS tricks!

As always, leave a message here or e-mail me at jason.nguyen@pbwiki.com.

See the rest of my tips here.

-Jason Nguyen