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

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

Introduction

Page history last edited by PBworks 13 years, 11 months ago

Introduction

 

Welcome to the PBwiki CSS wiki. This is a brief introduction to what CSS is and how to start using it to customize your wiki.

 


 

How PBwiki Works

 

PBwiki is a "wiki-farm" allowing its users to create their own wikis about any topic imagineable. A wiki is a webpage that is immediately editable, with the emphasis on clarity and simplicity.

 

Many wikis use a certain type of "markup language" or code this is simpler than HTML, the web document standard. Therefore, when a visitor views a wiki page, the inputted data must then be converted into HTML and then rendered by the browser. The process is summarized as follows:

 

  1. A PBwiki user edits a page, using the WikiStyle syntax.
  2. When the page is saved, it is uploaded to the PBwiki servers, which store it in the database.
  3. When a visitor goes to that page, the server does a number of things:
    1. Figures out which page the visitor is looking at and pulls up that data
    2. Converts that data from WikiStyle to HTML.
    3. Sends the converted HTML to visitor's computer
  4. The visitor's Internet browser renders the HTML into a readable document.
  5. If the visitor edits the page, then we return to step 1.

 

Although PBwiki does allow you to enter HTML directly, the point of WikiStyle is to simplify content creation. If you wanted to make a simple 2x2 table

 

ab
cd

 

would you rather do it with the WikiStyle code:

 

|a|b|
|c|d|

 

or the HTML code?

 

<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>

 

Clearly, the WikiStyle is easier to read and preferable.

 

Nonetheless, if you want to use CSS to modify the appearance of your wiki, then you won't have to write any HTML, but you'll have to know how it works. For example, if you wanted to make the table cells green, you would need to know to access the td tag and set its background property to the color of your choosing.

 

See WikiStyle to HTML for indepth information of how your WikiStyle code converts to HTML for rendering.

 

The connection between CSS and HTML

 

CSS is the modern method of formatting webpages. It separates content from design. Thus, although the HTML simply designates that information is contained in a table, like above, the CSS defines the borders, colors, fonts, etc. of that table in a declaration something like this:

 

table {
   border:1px solid #cccccc;
   color: black;
   font: Arial;
}

 

All CSS declarations look like that, with a selector that designates which element you're talking about and a bracketed list of properties and the values to set them to. You can make an unlimited number of declarations, and there are many properties that can be set for different HTML elements. Explore this wiki to find out what PBwiki-specific elements you can change and how.

 

CSS code can be incorporated into a webpage in three main ways:

 

  1. Linked external file: Ex. <link rel="stylesheet" href="/themes/skin6/screen.css" media="screen,projection" type="text/css" />
  2. Internal stylesheet: Ex. <style>...a bunch of styles...</style>
  3. Inline styles: Ex. <div style="border:1px solid red"></div>

 

 

Inline styles (#3) are more or less useless in a wiki as they are very unwieldy, although they're useful for non-repeated styles that will only affect one element on one page.

 

Internal stylesheets (#2) are possible, but again, slightly unwieldy. Short of creating a different stylesheet for each page, you could possibly place the <style> tag in the SideBar if you have one, insuring that the code appears on every page. The downside is that if you have a large stylesheet, if will never be cached between pages the way a linked stylesheet would be (a linked external stylesheet is downloaded once and then may be re-used by multiple pages). Furthermore, strictly speaking, a <style> tag should only appear in the <head> section of an HTML page, and you cannot access that portion of a page through normal wiki editing. It works with some tweaking, but it's technically wrong.

 

Thus the cleanest and easiest way of modifying wiki layout is with an external linked file. PBwiki facilitates this by automatically linking in any uploaded file named wiki.css. Therefore, all of our style declarations will reside in this file.

 

Benefits of the wiki.css file

 

By planning your designs around an externally modifiable stylesheet, you gain many benefits:

 

  1. Wiki editing is kept simple. Other people editing a wiki (and you) won't have to think about what is going behind the scenes to make an ordered list appear a certain way, or to manually add underlines to every <h1> heading. The less HTML in your wiki edits, the easier it is to read and edit for everyone involved.
  2. Page size and loading time is reduced.
  3. Testing without modifying any pages. By using the wiki.css file in conjunction with the PBwiki CSS Editor, you can preview changes to layout without doing anything to your pages.
  4. Modular skinning. You can create a skin, use it for a few months, save it, then design a new one. Now, you have two potential CSS skins that you can use in the same wiki when you get bored, or apply to other wikis you create.

Comments (0)

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