The second portion of the combined stylesheet storage method deals with CSS-formatting
rules placed in the overall_header.tpl file of a template. These formatting rules, or CSS classes, control many aspects of the forum's display. By editing the CSS classes directly,
you can create a broader range of design changes than are possible through
the Edit Theme utility.
The first step is to locate the CSS classes in templates/subBook/overall_header.tpl. Open that file in WordPad and scroll down to a line that contains <style type="text/css">. All of the CSS classes are between this line and another containing
Chapter 4
</style>. Each of the classes has two major parts: a class name, also known as a selector,
and a declaration block.
The class name is a short and descriptive name that will be used to associate the individual
classes with elements of forum pages. Names may be the same as those of
HTML tags, such as body, td, hr, or font, or author-created names preceded by a period, such as .postbody or .quote. A combination of the two, such as td.row1 is also acceptable. You will also see classes containing names separated by
commas; this is a shortcut for applying one class to all of the named
elements.
Declaration blocks consist of one or more declaration lines enclosed in curly
brackets. Each declaration line holds a property name and value separated by a colon and ends with a semicolon.
Several declaration lines can actually be placed on one line of text,
as long as a semicolon ends each declaration, and you will see several
such cases in the files. Property names and values specify the actual
formatting features like colors, borders, and so on. Here is a sample
line for underlining text:
text-decoration: underline;
Most styles' stylesheets will also include comment lines starting with /* and ending with */ that explain what display elements of the forum each class will affect. Comment
lines do not affect any layout features themselves. An entire class might
resemble this sample.
td.row2
{
color: black;
/* White Background */
background-color: #FFFFFF;
}
Until you reach a point where you are adding new features to your forum, you
should not need to alter class names very much, if at all. On the other
hand, editing the declaration blocks will let you do just about anything.
By examining the existing entries in the file, you will get a good idea
of what you can do by adding or removing declaration lines in each class.
Hundreds of possible combinations of property names and values exist. There are
also some types of class names not covered here or used in subSilver and
subBook. For more information about Cascading Style Sheets beyond the
scope of this book, check out these resources:
184 Manually selected Style Sheet Resources:
http://www.cbel.com/style_sheets/
W3Schools CSS Tutorials: http://www.w3schools.com/css/
css-discuss Wiki http://css-discuss.incutio.com/
In overall_header.tpl, you will see many declaration lines containing special template variables like {T_BODY_BGCOLOR}. Template variables are a special feature of phpBB used to substitute data into
the layout generated from the template files. Some recognizable characteristics
of template variables are names beginning and ending with curly brackets
and containing only letters, numbers, underscores, and periods. You will
not see template variables whose names contain semicolons, colons, or
most other special characters. Any template variables in the stylesheet
will be replaced with the "theme element" values of the Edit
Theme utility; they are where the combination of the database and overall_header.tpl come into play. For a listing of the template variables and their matching theme
element names, consult the table at the end of this section.
Template variables can be applied to classes for other types of theme elements,
as well. For an example, look at the first class in subBook's overall_header.tpl. This body class, which affects the HTML <body> tag and thus an entire webpage, uses several table color elements in scrollbar-related
declaration lines. These lines will change the colors in certain parts
of your web browser's scrollbar, if the browser supports them. The scrollbar
properties are not part of the standard CSS features and only function
in certain browsers, such as Microsoft's Internet Explorer. Netscape and
Mozilla browsers ignore the scrollbar properties.
For an interesting example of how you can change the look of your forum, locate
the .bodyline class. This would be on a single line about eight lines below the body class. Near the end of the line, you can see the border property, which manages the border around the forum pages. It should currently
have values that create a solid, one pixel wide, light blue border, with
the color changeable in Edit Theme. Now, replace the word solid with dashed. Save this change and look at your forum's index page—it now has a dashed line
for a border. You can also try dotted, ridge, and groove for some other effects. By altering the number portion of the 1px code in the same area, you can increase and decrease the width of the border.
Try 10px and dotted together for an unusual view.
The stylesheet code found in subBook/overall_header.tpl is duplicated in subBook/simple_header.tpl and, with some changes, in subBook/admin/ page_header.tpl. Any changes applied to one file should also be made in the others, if you want
to keep the same look across all parts of the forum.
Using External Stylesheets
By placing a stylesheet in overall_header.tpl, phpBB gives you a lot of control through the Edit Theme page, but it comes at a cost. The stylesheet has to be freshly loaded on every
page, and this can slow down a very busy forum. An alternative is to
use an external stylesheet file, such as subSilver.css and subBook.css. Web browsers do not refresh external stylesheets as often, resulting in smaller
page sizes and faster loading times. This type of stylesheet does not
support the Edit Theme utility, however, so the
Chapter 4
utility is rendered almost useless. Edit Theme will still control administrator and moderator username colors and, depending
on the style, row classes and colors.
To enable the external stylesheet for subBook, find the following line in templates/subBook/overall_header.tpl:
<!-- link rel="stylesheet" href="templates/subBook/{T_HEAD_STYLESHEET}"
type="text/css" -->
This line is an HTML comment line due to the!--and –- character sequences near the beginning and end. Like the Cascading Style Sheet
comment lines, it has no effect on the page layout. By removing the
comment characters, you can have the line become a reference to the
external stylesheet file. The line should then look like this:
<link rel="stylesheet" href="templates/subBook/{T_HEAD_STYLESHEET}"
type="text/css">
You should also delete all the CSS classes in overall_header.tpl, or they will override the same classes in the external stylesheet. If you have
made any changes to those CSS classes, make identical changes in subBook.css before deleting the code from overall_header.tpl. You will find the same classes in subBook.css, but you cannot use template variables in external stylesheet files. If you
make these same changes in simple_header.tpl and admin/page_header.tpl, you can control the appearance of the entire forum from a single stylesheet
file. Note that the final line in admin/page_header.tpl will be slightly different. You need to add ../ before templates in this line for the stylesheet to be displayed properly on pages using this
file. Those pages are generally Administration Control Panel pages,
which only you may see (unless you give other users administrator access).
The final line for admin/page_header.tpl is:
<link rel="stylesheet" href="../templates/subBook/{T_HEAD_STYLESHEET}"
type="text/css">
The following table lists the template variables and related theme elements:
|
Template Variable |
Theme Element Name |
|
{T_HEAD_STYLESHEET} {T_BODY_BACKGROUND} {T_BODY_BGCOLOR} {T_BODY_TEXT} {T_BODY_LINK}
{T_BODY_VLINK} |
CSS Stylesheet Background Image Background Color Text Color Link Color Visited
Link Color |
|
Template Variable |
Theme Element Name |
|
{T_BODY_ALINK} {T_BODY_HLINK} {T_TR_COLOR1} {T_TR_COLOR2} {T_TR_COLOR3} {T_TR_CLASS1}
{T_TR_CLASS2} {T_TR_CLASS3} {T_TH_COLOR1} {T_TH_COLOR2} {T_TH_COLOR3}
{T_TH_CLASS1} {T_TH_CLASS2} {T_TH_CLASS3} {T_TD_COLOR1} {T_TD_COLOR2}
{T_TD_COLOR3} {T_TD_CLASS1} {T_TD_CLASS2} {T_TD_CLASS3} {T_FONTFACE1}
{T_FONTFACE2} |
Active Link Color Hover Link Color Table Row Color 1 Table Row Color 2 Table
Row Color 3 Table Row Class 1 Table Row Class 2 Table Row Class
3 Table Header Color 1 Table Header Color 2 Table Header Color 3
Table Header Class 1 Table Header Class 2 Table Header Class 3 Table
Cell Color 1 Table Cell Color 2 Table Cell Color 3 Table Cell Class
1 Table Cell Class 2 Table Cell Class 3 Font Face 1 Font Face 2
|
|
Template Variable |
Theme Element Name |
|
{T_FONTFACE3} {T_FONTSIZE1} {T_FONTSIZE2} {T_FONTSIZE3} {T_FONTCOLOR1} {T_FONTCOLOR2}
{T_FONTCOLOR3} {T_SPAN_CLASS1} {T_SPAN_CLASS2} {T_SPAN_CLASS3} |
Font Face 3 Font Size 1 Font Size 2 Font Size 3 Font Color 1 Font Color 2 Font
Color 3 Span Class 1 Span Class 2 Span Class 3 |
