CSS Layout Diagram & Tutorial

 

The following is the current <div> layout outputted by the PBwiki rendering engine. Click on any of the links within the diagram to get tutorial help on how to set properties for each wrapper class/id. If the properties confuse you, see this primer on CSS Properties.

 

All tips have, or will eventually have, three sections:

 

  1. Summary - A quick overview of what you might do with that class/id.
  2. In-Depth - Details on the properties to set, what problems you might run into, etc.
  3. Usage Example - A sample CSS declaration for that particular class/id. Also, you can run a script to see how that declaration might look.

 

 

Note: This page uses Javascript. Please enable this wiki's Javascript at the bottom left hand corner, under Page Information if the diagram is not showing. Of course make sure to have your own Javascript settings to "on."

Also: Clearing styles does not work in some browsers. If the page gets mucked up too much, just reload it.

 

 

#wrapper-functional ; .wrapper-functional

#sub-menu-top ; .sub-menu
#sub-menu-right ; .sub-menu-2
#displaycontent
#SideBar
.SideBarTitle <a>

YOUR CONTENT

HERE!

#wrapper-functional-sub ; .wrapper-functional ; .wrapper-functional-sub
#sub-menu-bottom ; .sub-menu
.wrapper-information
#page-information
#wiki-information
#wiki-premium
#footer
.f-menu

 

 

 

 

), but you can also tune its properties to match your needs.

 

Some properties worth setting for SideBarTitle include: background, font-size, font-family, & border-bottom. See the example for what some of these properties do. You can also set "display:none" to make this invisible completely.

 

Usage in stylesheet:

 

.SideBarTitle {
      background: #ffdddd;  //Set background to pink
      border-bottom: none;  //remove the bottom border
      font-size: 10pt;      //set font properties
      font-family: Courier, monospace
     }

 

Apply these styles / Clear styles

 

Related Question: Why can't I change the font color?

 

 

 

 

See the original version. Updated more often, but not necessarily functional all the time. Once it's complete, I'll move it over to http://yummy.pbwiki.com completely

 

- Jason Nguyen, resident JS d00d.


Page Information

  • 1 year ago [history]
  • View page source
  • You're not logged in
  • Spam-like content was removed from this page.
  • No tags yet learn more

Wiki Information

Recent PBwiki Blog Posts