====== Examining PBase Stylesheets ======
//This article has been adapted from the article in Issue #2 of the [[http://www.pbase.com/magazine | PBase Magazine]]//

One of the best ways to learn a concept is by example. In this section, we will dissect a popular (and simple) PBase stylesheet known as karen1109. An example of the stylesheet can be viewed at
 http://www.pbase.com/stylesheets/karen1109 (originally created by Karen Nicholas)

Even though we discuss and dissect a particular stylesheet, our hope is that this knowledge can be reused by our readers to create their own special stylesheets.

The best way to follow this tutorial is for you to setup a temporary gallery with a few images and apply the Karen1109 stylesheet to it. Alternately, you could just go to http://www.pbase.com/stylesheets/karen1109  and follow along.

Incase you are not familiar with how to apply this stylesheet, please follow the steps as described below: Please ensure you are logged into your PBase account before proceeding.


  * Create a new gallery and upload a few photos into this gallery
  * Click on “edit this gallery” option at the top of your screen
  * You will now be presented with a screen with a lot of text boxes. Scroll down till you see an area which says “style sheet”. 
  * Now click on the list box right next to the “style sheet” option and select karen1109
  * Click on the Update Gallery button below  

What we have done here is apply a new stylesheet to a gallery we just created.

Now that we have set up a sample gallery which uses the karen1109 stylesheet, we are ready to delve into its details and how it affects your gallery display.

In addition to reading this article, please do visit the PBase HTML forum at http://forum.pbase.com/viewforum.php?f=8 where a lot of experts help beginners with their galleries.

===== Dissecting the CSS for Karen1109 =====


This image is a sample gallery that uses the Karen stylesheet. We have oulined some important CSS classes that represent different parts of the gallery.

{{css1.jpg}}

This image is a sample image page that uses the Karen stylesheet. We have oulined some important CSS classes that represent different parts of the image page.

{{css2.jpg}}

The following sections now proceed to dissect various sections of the Karen1109 stylesheet. As mentioned before, it will help if you are viewing the CSS stylesheet of Karen1109 as we go along.

==== Understanding the “A” property ====

{{css3.jpg}}

“A” represents how hyperlinks would look. In this example, the stylesheet specifies that all hyperlinks will have a color represented by #cccc99 (which is a yellowish-brown color). In addition, it also specifies that all hyperlinks will not be underlined. 

A:hover describes what happens when you move a mouse over any hyperlink. Here we say, change the color to #ffff99 and underline it. What does this mean ? Well, when you move a mouse over any hyperlink, it will show an underline below the link and that underline will disappear when you move the mouse away. Sure beats the usual ‘always underline’ default, does it not? We will leave understanding  A:visited and A:active as an exercise to the reader – lets move on ! (Tip: active refers to what happens while you keep the mouse button pressed on the link, visited is to do with links that you have previously clicked on)


==== Understanding the “H2” property ====

{{css4.jpg}}

“H2” is used for the gallery title style by PBase. Whenever you specify a ‘title’ for a gallery, PBase displays that text using the H2 style. 
Here, we have chosen a  font size of 12 and a color of #cccccc (Please refer to our first article in issue #1 of the magazine where we describe how these digits refer to the ‘Red’, ‘Blue’ and ‘Green’ compositions of a color). Also, we have requested that each letter of the title be spaced by 8 pixels (letter-spacing). That explains the title text looking, well, spaced out ! That’s quite a nice effect. We also specify that the background for the title text is black, which explains the black bar stretching across the title text. The padding-top and –bottom attributes add some empty (black colored) space on the top and bottom of the text to make it look prettier.

==== Understanding the “TD” property ====

<code css>
TD {
  background-color:none;
}
</code>

Since PBase displays image thumbnails in tables, the TD property defines how these ‘table cells’ would look. Here a value of ‘transparent’ means it will show the backround color of the page behind it. Change this value to, say, “red” to see the difference.

==== Understanding the “TD.thumbnail” property ====

<code css>
TD.thumbnail
{
  vertical-align: middle;
  horizontal-align:middle;
}
</code>

This property helps to define how the thumbnails are positioned inside the table. In this example, we have centered the image with respect to the table's cell.

==== Understanding the “img.thumbnail” property ====

<code css>
IMG.thumbnail
{
  border:10px black solid;
}
</code>

This property defines how thumbnails will look. Here we simply add a 10 pixel black border to each thumbnail. How neat! So you can implement thumbnail frames and other cool things with this property class.


==== Understanding the “font” property ====

{{css7.jpg}}

This property defines how the general fonts will look like in PBase. One example of where it is used is the thumbnail text. There are other places that PBase uses this class.  Try changing the font-size to 14pt or change the color to see how it changes the text under the thumbnails.


==== Understanding the “BODY” property ====

{{css8.jpg}}

This property defines how the page background will  look. The “background” attribute specifies the background color while the rest specify how scrollbars will look on this page (Yes ! CSS also allows you to change how browser scrollbars will look on your page). You can also add a background-image attribute here to show a background image in your page. For example, adding: (all in one line)

<code css> background: rgb(255, 255, 255) url(http://mysite.com/pix.jpg) bottom right no-repeat fixed; </code>

will display an image at the bottom right corner of a white background. In addition the image will not scroll even if the page does ! (that is what “fixed” does)

==== Understanding the “.display” property ====

{{css9.jpg}}

Just like img.thumbnail defines how the thumbnail  of an image looks, .display defines how the image itself looks ( that is, when you click on the thumbnail and the larger image is shown). In this stylesheet, we display a neat 1 pixel black border around the image. Try changing this to 10 pixels and background-color to red to see how it affects your image.


==== Understanding the “.title” property ====

{{css10.jpg}}

This stylesheet does not explicitly define  this property. However this is an important property. PBase defines default values for this property as shown to the right. This property controls how image titles below the image picture are shown. To change the default, all you need to do is add this class in your stylesheet and change the contents.  


==== Understanding the “.caption” property ====

{{css11.jpg}}

Just like the “.title” property in the previous example controlled the image title text, this property controls how the rest of the caption will show. The “caption” is essentially the description text you enter in PBase for each image (for example, a travelogue and similar). As an example, changing font-style to ‘normal’ would result in the captions being displayed in normal font and not italicized as it is now with this stylesheet.

==== Understanding the “.message_body” property ====

{{css12.jpg}}

This property controls how messages/comments  are displayed in your gallery. In this case the stylesheet defines a background color and a font color to make the comments stand out relative to the page. The padding-bottom field just adds some more space between comments to make it look better. Feel free to experiment with all the values, as usual ! 

===== Conclusion =====

Always feel free to experiment with different values to see how each property affects your stylesheet. That is the best (and most enjoyable) way to learn ! In this section, we described the major aspects of the karen1109 stylesheet of PBase. We hope some of the concepts presented will help you design or modify your own stylesheet.