====== Main CSS Classes used in PBase ======

Some of the most common PBase CSS Classes are described in [[http://www.pbase.com/help/css_classes|PBase´s Help Section]]. We have added a few to that list. Plase note that this list is not complete. Use it only as a reference.

Before we begin, here are some visual images on how CSS classes control different parts of your gallery (All classes not shown)

{{gallery_css.jpg}}

And  here are some visual images on how CSS classes control different parts of your image page (All classes not shown)

{{image_css_1.jpg}}

Now let's go on to explaining some of the classes.

==== A class ====

control how hyper links will show. For example, 
<code css>
a, a:link,a:visited,a:active 
{
        color: black;
        text-decoration: none;

}
a:hover 
{
        color: red;
        text-decoration: none;
}
</code>
Specifies that there will be no underlines in any hyperlinks. Hyperlinks will be black in color and when you move your mouse over them, they will turn red.


==== thumbnails class ====

Note the 's' at the end - this class controls the complete thumbnail list displayed on your gallery page
For example,
<code css>
.thumbnails {border: black 1px solid;  }
</code>
Will show a black 1 pixel border around the complete gathering of your thumbnails.

==== thumbnail class ====
Note that this class is different from the previous class. This class controls how //each// thumbnail will look like in your gallery page.

For example:
<code css>
.thumbnail {border: red 1px solid;  }</code>
Will show a red 1 pixel border around each thumbnail of your gallery page.


==== Body class ====
This class decides how the background of your pages will look. 
For example,

<code css>
body
{
background: blue
        url(http://image/location.jpg)
         bottom right no-repeat fixed;

}
</code>

ensures that you will have a blue background and an image displayed on the lower right corner. This image will always show to your lower right corner even as you scroll. 


====  H2 class ====
These classes control how your headings will look. The H2 class, for example, is the class that determines how the 'descriptive name' assigned a gallery will show up.

For example:
<code css>
h2{font-weight: bold;border-top: #000000 1px dotted;border-bottom: #000000 1px dotted;text-align:center;}
</code>

Displays the descriptive gallery name in bold, in center, and with a dotted line above and below.

==== font class ====
Controls how the overall fonts in your site will look. Please note that this is a master definition - you can ofcourse change fonts for different CSS sub classes

For example:
<code css>
font 
{
        font: 11px Verdana, Tahoma, Helvetica, sans-serif; 
      
}
</code>

Specifies that fonts will be 11 pixels in size. If Verdana is available, then the font will use the Verdana typeface, else Tahoma, Helvetica and sans-serif in that order.
 
==== .display class ====
Controls the PBase image in each image page (not gallery page).
For example:

<code css>
.display /* border around image in image page */
{
        border: green 10px solid;
}
</code>

Will display a 10 pixel wide border around each image displayed in the image pages.

==== .title class ====
Controls how the image title will be displayed in the image display pages.
For example:

<code css>
.title
{
   background-color:blue;
   font: 20px Verdana;
   color: yellow;
}
</code>

Will display image titles in a yellow font with a blue background and will use the Verdana font at 20pixels


==== .copyright class ====
This controls how your copyright statement will look (PBase allows you to specify a [[faqs:basic settings#adding copyright details to every image page|copyright]] for all images).
For example,
<code css>
.copyright {text-align:left; color:green;}
</code>
Specifies that your copyright message will be left aligned, and green in color
 

==== #comment identifier ====
PBase recently changed its comment style to use the '#comment' identifier. An 'identifier' for our discussion is the same as a 'class'. If you really need to know the difference, see [[http://www.tizag.com/cssT/cssid.php|here]]

For example:

<code css>
#commentlist .message_body
{
  font-family: verdana, arial, sans-serif;
  color: blue;
  font-size: 11px;
  background: black;
 }
</code>

Specifies that comments left by users on your images or galleries will be in blue with a black background and of 11 pixels in font size.

Similarly,

<code css>
#commentlist .from
{
  font-family: verdana, arial, sans-serif;
  color: green;
  font-size: 11px;
  font-weight:bold;
}
</code>

The part identifying who the comment is from will be in bold green and also 11 pixels in size.

===== Conclusion (or rather, the beginning) =====

These, along with the CSS classes defined by PBase's [[http://www.pbase.com/help/css_classes|help]] page is a great start for you to begin your exploration. There are many more classes that you will discover as you continue your journey.