This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

How to create a Style [Basics]

Description: This article will explain the basic things you Need to know about styling.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/how-to-create-a-style-basics/]Knowledge Base - How to create a Style [Basics][/url]

Style Creating: How to begin?

Basics
When making a style, you must already have in your mind what colours you want to use, and all the basic things of how you want it to look. One of the most important things is this: on which style is it going to be based, prosilver or subsilver2? Maybe you want to make a complete new style but that is really difficult. PLEASE BACKUP YOUR FILES BEFORE EDITTING THEM.

Then you need some really good HTML, CSS and Image Editting knowledge, in order to make a very special style.
Changing images is not really hard, and you barely need coding for that. The best way of making a style is beginning with a complete empty phpBB board.

Now you follow this route:

Administrator Control Panel >> Styles

This is the main section from which you are going to edit your styles. On the left you will see a menu that has 4 links:

•Styles, •Template, •Theme, •Imageset

You probably wont need the Imageset link, but maybe you want to change something there too.
On the right you will see a table with all the style that are installed, and the ones that aren’t installed.

Now, on the left menu, click the template link. Now you will see the same table on the right, only it has one more link added after every style. The edit link.
Click it. Now you can select a HTML from all the HTML files the style is using. Here you can edit the HTML coding of your style. PLEASE BACKUP YOUR FILES BEFORE EDITTING THEM.

Now click on the Theme link in the left menu. Now there is one file in there. That is the stylesheet. This is the file you will be editing most parts of, so please back it up before editing.
You will see a huge amount of classes, that all have their own piece of code.
All those classes are used somewhere in the style.
EXAMPLE:

Follow this route:
Administration Control Panel >> Styles >> Template >> prosilver >> edit >> attachment.html >> Select Template File <<

If you followed correctly you will see the attachment .html file now, which begins with this piece of code:

Code: Select all

<!-- BEGIN _file -->
    <!-- IF 
_file.S_DENIED -->
    <
p>[{_file.DENIED_MESSAGE}]</p>
    <!-- ELSE -->             

Below that, there are 2 lines again, and you need the second line, which says: <dl class="thumbnail">
You can see that this piece of code uses the class: thumbnail, which is an image class.
Now follow this route:
Administration Control Panel >> Styles >> Theme >> prosilver >> edit >> stylesheet.css <<
Now search for dl.thumbnail, there are several that have this text included, so be sure to have the right one.
If you found the correct one, you will see this piece of CSS:

Code: Select all

dl.thumbnail img {
    
padding3px;
    
border1px solid #666666;
    
displayblock;
    
background-color#FFF;
}             



--------------------------------------------------------------------------------------------------------------------

Images

When you look at your standard prosilver style you will see a certain amount of images.
Those images might suit you, but they might also not.
There is a very easy way to edit an image, which will take no longer then 10 minutes.

When you have found an image that doesnt suit you, right click on it.
Now click: Show Picture, or Show Background Image
In both cases, this will give you a link in your Browser Navigation Bar.
Which will look, on for instance, the header image, like this:

Code: Select all

http://www.yoursite.com/forum/styles/prosilver/theme/images/bg_header.jpg

Now pick this part out: styles/prosilver/theme/images/bg_header.jpg
you see that the image you tried to look, is located in the images map.
Now open your directory, and simply find the file.
Now you can replace it with any file you like.


--------------------------------------------------------------------------------------------------------------------

CSS
What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles are normally stored in Style Sheets
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save you a lot of work
  • External Style Sheets are stored in CSS files
  • Multiple style definitions will cascade into one

CSS is designed into 3 items: selector {property: value;}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces, and after the last value of a property the semicolon ; is needed in order to close the current property. If the value is multiple words, put quotes around the value.

--------------------------------------------------------------------------------------------------------------------

Classes
Finding the right class to edit can be really hard. Especially with phpBB, because all classes have multiple subclasses.
When you need a class, you first need to look what it is you want to change. Is it a color from a link or a header text, or something else?
when you want to change something that has to do with a link it always has the character: a in it.

Mozilla Firefox has several very usefull add-ons, that are easy to install, and have the good css class found within 1 second for you.
The only thing you have to do next is editting it in the stylesheet.css:

1.: http://chrispederick.com/work/web-developer/ - Web Developer
2.: http://www.getfirebug.com/ - Firebug

When editting a class its very important to remember what you edit, or atleast save a backup.

--------------------------------------------------------------------------------------------------------------------

Styling in General
from phpbb.com

Templates should be produced in a consistent manner. Where appropriate they should be based off an existing copy, e.g. index, viewforum or viewtopic (the combination of which implement a range of conditional and variable forms). Please also note that the intendation and coding guidelines also apply to templates where possible.

The outer table class forumline has gone and is replaced with tablebg.

When writing <table> the order <table class="" cellspacing="" cellpadding="" border="" align=""> creates consistency and allows everyone to easily see which table produces which "look". The same applies to most other tags for which additional parameters can be set, consistency is the major aim here.

Each block level element should be indented by one tab, same for tabular elements, e.g. <tr> <td> etc., whereby the intendiation of <table> and the following/ending <tr> should be on the same line. This applies not to div elements of course.

Don't use <span> more than is essential ... the CSS is such that text sizes are dependent on the parent class. So writing <span class="gensmall"><span class="gensmall">TEST</span></span> will result in very very small text. Similarly don't use span at all if another element can contain the class definition, e.g.

<td><span class="gensmall">TEST</span></td>

can just as well become:

<td class="gensmall">TEST</td>

Try to match text class types with existing useage, e.g. don't use the nav class where viewtopic uses gensmall for example.

Row colours/classes are now defined by the template, use an IF S_ROW_COUNT switch, see viewtopic or viewforum for an example.

Remember block level ordering is important ... while not all pages validate as XHTML 1.0 Strict compliant it is something we're trying to work too.

Use a standard cellpadding of 2 and cellspacing of 0 on outer tables. Inner tables can vary from 0 to 3 or even 4 depending on the need.

Use div container/css for styling and table for data representation.

The separate catXXXX and thXXX classes are gone. When defining a header cell just use <th> rather than <th class="thHead"> etc. Similarly for cat, don't use <td class="catLeft"> use <td class="cat"> etc.

Try to retain consistency of basic layout and class useage, i.e. _EXPLAIN text should generally be placed below the title it explains, e.g. {L_POST_USERNAME}<br /><span class="gensmall">{L_POST_USERNAME_EXPLAIN}</span> is the typical way of handling this ... there may be exceptions and this isn't a hard and fast rule.

Try to keep template conditional and other statements tabbed in line with the block to which they refer.

this is correct

Code: Select all

<div class="panel">
    <
div class="inner"><span class="corners-top"><span></span></span>

    <
p>{L_LOGIN_FORUM}</p>

    <
fieldset class="fields2">
    <!-- IF 
LOGIN_ERROR -->
        <
dl>
            <
dt>&nbsp;</dt>
            <
dd class="error">{LOGIN_ERROR}</dd>
        </
dl>
    <!-- ENDIF -->
    <
dl>
        <
dt><label for="password">{L_PASSWORD}:</label></dt>
        <
dd><input class="inputbox narrow" type="password" name="password" id="password" size="25" maxlength="25" tabindex="1" /></dd>
    </
dl>
    <
dl class="fields2">
        <
dt>&nbsp;</dt>
        <
dd>{S_HIDDEN_FIELDS}<input type="submit" name="login" id="login" class="button1" value="{L_LOGIN}" tabindex="2" /></dd>
    </
dl>
    </
fieldset>

    <
span class="corners-bottom"><span></span></span></div>
</
div>           


this is also correct:

Code: Select all

<div class="panel">
<
div class="inner"><span class="corners-top"><span></span></span>

<
p>{L_LOGIN_FORUM}</p>

<
fieldset class="fields2">
<!-- IF 
LOGIN_ERROR -->
<
dl>
<
dt>&nbsp;</dt>
<
dd class="error">{LOGIN_ERROR}</dd>
</
dl>
<!-- ENDIF -->
<
dl>
<
dt><label for="password">{L_PASSWORD}:</label></dt>
<
dd><input class="inputbox narrow" type="password" name="password" id="password" size="25" maxlength="25" tabindex="1" /></dd>
</
dl>
<
dl class="fields2">
<
dt>&nbsp;</dt>
<
dd>{S_HIDDEN_FIELDS}<input type="submit" name="login" id="login" class="button1" value="{L_LOGIN}" tabindex="2" /></dd>
</
dl>
</
fieldset>

<
span class="corners-bottom"><span></span></span></div>
</
div>           


it gives immediate feedback on exactly what is looping - decide which way to use based on the readability.


--------------------------------------------------------------------------------------------------------------------