Because the last tip was only really useful to Classic wiki users, I’ve pushed up the next tip on CSS styles to this week. Enjoy!

A lot of gibberish gets thrown around by some of the advanced PBwiki users, particularly those with experience in web design, including HTML (HyperText Markup Language), the code that makes up every webpage on the Internet and CSS (Cascading Style Sheets), the current standard for formatting and styling HTML. Today, we’re going to focus on CSS as a way to format parts of your wiki the way you want, using specific examples. Although I plan on explaining CSS more thoroughly in a future post, I won’t go into the details for now, focusing on getting you real results.

Overview

The following is a semi-dorky moment, which will be useful if you actually want to learn CSS. If you just need a quick fix, like hiding your SideBar or something, please skip ahead

CSS can be inserted into PBwiki a number of different ways:

1. wiki.css – This a premium feature allowing you to create a whole external file (named “wiki.css”) that will persist across your entire wiki. The best use for this is in making customized skins, such as in ClipClip or my own wiki. For page specific changes, see the next two bullet points.
2. <style> tags – All users can use style tags to add styles to a page, such as

   <style>
   #displaycontent {
      background:green;
   }
   </style>

   which would turn the content area into an atrocious green color. A few notes:

   1. Technically speaking, you could put a style tag in the SideBar and it’ll persist across your wiki, but we advise against that for a few reasons: a) it’s bad form and the results are unpredictable b) it wrecks your SideBar and can muddle a collaborative environment c) cheapskates are lame.
   2. If you DO have to do it, and your style declarations are longer than one line of text (and you’re using the classic editor), you’ll need to wrap it up to prevent PBwiki from interpreting it as wiki text: <raw escaped=0><style> …all your style declarations… </style></raw>
   3. If you’re using the Point-and-click Editor, do Insert Plugin -> PBwiki Magic -> HTML and put your style code inside (with <style> tags).
3. Inline – This refers to putting style declarations directly into the HTML element, for those of you familiar with that kind of thing. For example, to make a paragraph with a border, you might do:

   <p style="border:1px solid black; padding:3px">a bunch of stuff inside the paragraph</p>

   The final thing would look like this:

   a bunch of stuff inside the paragraph

Now you know where to put your CSS, it’s time for what to put there.

The Code

Rather than try to go with an abstract approach, I’m going to give you ways to modify two very useful PBwiki elements: the SideBar and paragraphs.

Before we begin, Point-and-Click editor users should note that you will not see these style additions in the editor, but they will be loaded on a fully-rendered page.

1. The SideBar

Styles for the SideBar are oft-requested, and it’s actually pretty simple. The only problem with that is that some people have the original SideBar and others have the “new” 3-tabbed SideBar, but even that isn’t a real big issue. A few applications:

1. Hide the SideBar on certain pages – This is probably most requested. On a page where you want to hide the SideBar, just put this code at the top of the page:

   <style>#SideBar, #displaycontent div.sidebar_v2 { display:none; }</style>

   As you can probably guess, that says, “For any SideBar element(#SideBar = old and #displaycontent div.sidebar_v2 = new), don’t display it.”

2. Change SideBar position – Some people would prefer the SideBar on their left; that’s easily accomodated with:

   <style>#SideBar, #displaycontent div.sidebar_v2 { float:left; }</style>

3. Change the appearance – This is probably best put to use in a premium wiki trying to skin the SideBar to match a certain theme. Remember, if you’re using it in a wiki.css file, you don’t need the <style> tags.

   <style>
   #SideBar, #displaycontent div.sidebar_v2 {
     background:#ccffcc;
     color:#336633;
     border:1px solid #66cc66;
   }
   </style>

   This would make the SideBar a nice springtime green whether it was old or new. If you want to make sure link colors and all that other stuff matches, we’ll have to tackle that more complex issue in a future tip (or ask me in the forums).

Paragraphs

A lot of writers use their wikis, and they’d like to be able to do things like indent or give paragraphs special colors. Let’s jump in:

1. Indentation – Indentation can be performed with the following code:

   <style>
   #displaycontent p {
     text-indent:30px;
   }
   #SideBar p, #displaycontent div.sidebar_v2 p {
     text-indent:0px;
   }
   </style>

   The first bracketed declaration says to indent all paragraphs within the user content area, while the second declaration nullifies that for any paragraphs that are inside the SideBar. You can see that example working here.

2. Better control of indentation – If you need to control the indentation directly and you’re using the Classic editor, you can just manually do inline styles on paragraphs:

   <p style=”text-indent:30px”>My paragraph…</p>

3. Special paragraphs – Maybe there’s a paragraph that needs a little something extra. You can manually define that paragraph with a CSS class, then define that class elsewhere. For example:

   !Message for my valentine
   
   <p class="special">I love u so much.  Won't you love me too?  ''--Your secret admirer''</p>
   
   <raw escaped=0><style>
   #displaycontent .special {
     background:#ffeeee; /* a rosy background color */
     color:red;   /* a red font */
     border:1px dashed red; /*a colored border */
     padding:5px; /* space between border and text */
     margin-right:250px; /* avoid hitting sidebar */
   }
   </style></raw>

   The result is at the bottom of the same test page. You can see how each element effects the final product. Also, the text between /* and */ are comments that you can place anywhere inside the style tags, which I’ve used here to explain the properties being declared. Experiment and you’ll get the hang of it.

4. first-letter – One of the coolest CSS effects is to apply properties only to the first letter of a paragraph, like in many novels. If you have premium CSS support, you can create a special class and set a paragraph to that class (if you don’t have premium, you’ll have to define the class either on the page directly or in the SideBar). Let’s say your class is called “first.” Here’s a sample declaration:

   <style>
   p.first:first-letter {
     margin-top:5px;
     margin-right:2px;
     float:left;
     font-size:400%;
     font-family:Georgia,Verdana,serif;
     border:1px solid #006000;
     padding:5px;
     color:#006000;
   }
   </style>

   Then you would simply create a paragraph set to that class:

   <p class="first">This is my paragraph...</p>

   The final result will look like this. I don’t have space to go into the details here, but you’ll be able to find plenty of resources online if you’re interested.

Other Resources

Here’s a list of a few resources that I use in my own CSS design work.

W3 School’s CSS Tutorial
CSS Tutorial at YourHTMLSource.com

Conclusion

Well, that was a pretty heft workout, and we only scratched the tip of the CSS iceberg. Next week, we’ll take a break from all this CSS talk and I’ll go over a few general tips on making sure your wiki looks good to all your readers.

After that, we may come back to a few more CSS tips, depending on your comments. If there’s some particular thing you need style tips on, just email me at dochuyen84@gmail.com and I’ll either help you directly or it’ll show up in a future tip. See everyone soon!

Jason Nguyen