Main CSS Classes used in PBase

Some of the most common PBase CSS Classes are described in 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)

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

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

control how hyper links will show. For example,

a, a:link,a:visited,a:active 
{
        color: black;
        text-decoration: none;
 
}
a:hover 
{
        color: red;
        text-decoration: none;
}

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.

Note the 's' at the end - this class controls the complete thumbnail list displayed on your gallery page For example,

.thumbnails {border: black 1px solid;  }

Will show a black 1 pixel border around the complete gathering of your thumbnails.

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:

.thumbnail {border: red 1px solid;  }

Will show a red 1 pixel border around each thumbnail of your gallery page.

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

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

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.

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:

h2{font-weight: bold;border-top: #000000 1px dotted;border-bottom: #000000 1px dotted;text-align:center;}

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

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:

font 
{
        font: 11px Verdana, Tahoma, Helvetica, sans-serif; 
 
}

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.

Controls the PBase image in each image page (not gallery page). For example:

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

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

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

.title
{
   background-color:blue;
   font: 20px Verdana;
   color: yellow;
}

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

This controls how your copyright statement will look (PBase allows you to specify a copyright for all images). For example,

.copyright {text-align:left; color:green;}

Specifies that your copyright message will be left aligned, and green in color

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 here

For example:

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

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,

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

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

These, along with the CSS classes defined by PBase's 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.