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

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!


CSS Example

Page history last edited by PBworks 16 years ago


I've written this extremely colorful tutorial about some of the things that I've learned in terms of hacking the wiki. I won't explain how I've learned this or why it works. I simply ask that you observe that what I'm telling you actually works and that you try to understand it on that basis. Observe that, like all languages, the syntax is consistent. Observe your own changes as you make them. Of course, I'm also available for questions.


The following guide is written to assist you in making your color scheme from the code. This words based upon the principle that you can easily exchange a color for a color or a font for a font. Because everything is interchangeable, I feel I only need to explain a few other concepts.

  • This example doesn't do everything that can be done to a page.
  • The identifiers (#wrapper, etc. ) don't have any value in terms of the programming language. They are like names. Perhaps, more accurately, they are names. Those names have values as identifiers, so don't change them.
  • Every border on this page is set to dotted, however, the other options are dashed, solid, double, groove, ridge, inset, and outset; interchange those types as you like.
  • Px stands for pixel. All of the borders on this page are set to five pixels, which is rather large for a border. More = more, less = less.
  • Pt stands for point, as in font point.


I gave every changeable item on the page a unique background color so that each item can be easily identified. Coincidentally, this page is now pretty ugly, but yours won't be.

If you try to edit this page right now, you'll see a mess of code starting with <style type="text/css">. Ideally, once I'm done explaining and once you've had a few minutes to work on it, this code will look a lot more like language. You will notice that each identifier starts with either a pound sign (#) or a period (. ). Don't worry about what or why, because you will only need to change things that are within the curly brackets {}. After you've messed around for a while, you might also notice that your code stops working if you try to separate it as I've done below. For it to work, it all needs to be on one line: no enters.


Start here:

  1. Click Edit Page
  2. Copy all of the code, including <style type="text/css"> and </style>
  3. Click Cancel
  4. Start a new page however you like
  5. Paste all of the code into your new page


There, now it belongs to you and you can do as you please with it. This is where tabbed browsing comes in handy so you can look back and forth between your page and this one.

I'll unpack the code, starting with the ones that you probably don't want to change.



#sb_sb, #sb_ra {display: none;}

#root {border: none;}


The first three are for the three sections of the SideBar. It is possible to suppress one or more at a time. For instance if you wanted only QuickStart to appear on your page, you would include the lines with #sb_sb and #sb_ra.


The #root line is the ugly border at the top. Just play with it to see what I mean.


The #wiki-premium line gets rid of the ad at the bottom of the page. I encourage everybody to put this part of the code on every page.

Main Contents

#displaycontent {background-color: blue; border: 5px dotted darkred; color: white; font: 13pt arial}

.breakout {background-color: cyan; border: 5px dotted red; width: 90%; color: white;}

#wrapper-root {background-color: red; border: 5px dotted cyan; color: black;}


This page obviously has a larger font than the normal wiki text. That is because, in addition to a blue background for the aptly named #displaycontent block, I've also made the text color white and the font 13pt Arial. You can add font effects to any of the other identifiers, but #displaycontent and . breakout mostly contain text. The other one is a background container, so changing it's background color or border is about all you can do to it.

Top Bar

#header {background-color: green; border: 5px dotted white;}

#header h2 a {font-family: arial; color: blue;}

#header h3 {font-family: arial; color: red; border-left: 5px double red}

#search-box {background-color: purple; border: 5px dotted black;}


These control everything in the top bar.

Menu Bar


.sub-menu ul li a, .sub-menu ul li span, .sub-menu ul li span {background: yellow; border:5px solid blue;}

.sub-menu ul li a span {color:black;}

.sub-menu ul li a:hover, .sub-menu ul li.active a {border:5px solid orange;}


These control the color of the buttons on the menu bar. That last line is for the mouse over effect on the buttons which is blue to yellow on every other page.



#wrapper-functional {background-color: darkred; border: 5px dotted orange}

#sub-menu-top {background-color: pink; border: 5px dotted lightsalmon}

#sub-menu-right {background-color: darkblue; border: 5px dotted green}


The top and bottom Menu Bars can each have different background colors. Go figure. #sub-menu-right should be pretty easy to locate.



#wrapper-functional-sub {background-color: black; border: 5px dotted purple}

#sub-menu-bottom {background-color: white; border: 5px dotted green}


This is a little bit more advanced, but if you want the top bar and the bottom bar to be exactly the same, you can make the following bit of code:


#wrapper-functional, #wrapper-functional-sub {background-color: darkred; border: 5px dotted orange}

#sub-menu-top, #sub-menu-bottom {background-color: pink; border: 5px dotted lightsalmon}


If you separate identifiers by commas, each identified block will have the same specified effect.

Bottom of the page

. wrapper-information {background-color: springgreen; border: 5px dotted yellow}

#footer {background-color: lightsalmon; border: 5px dotted blue;}


#wrapper-information is only useful if you want a border around The Page Information.


#footer is something that you might want to simply change to {display: none}.



Comments (0)

You don't have permission to comment on this page.