[Full Tutorial] Style Creating: How to begin?

[Sniper_E]

Style Creating: How to begin?
phpBB.com approved Knowledge Base article

If you want to create a style of your own based off the prosilver style then this is what you do.

1. Copy the prosilver style to a different directory.
2. Go to that directory and rename it prosilverrose in this example.
3. Go into that prosilverrose directory and open the style.cfg file. Change the name prosilver to prosilverrose and save.
4. Open the prosilverrose/imageset/imageset.cfg file and change the name prosilver to prosilverrose and save.
5. Open the prosilverrose/template/template.cfg file and change the name prosilver to prosilverrose and save.
6. Open the prosilverrose/theme/theme.cfg file and change the name prosilver to prosilverrose and save.
7. Copy your new prosilverrose/ directory to your server to the root/styles/ directory.
8. Go into your ACP / Styles / Install your new style.

You can also change the credits in those .cfg files to your author name and date.

Your new style will be located on your server @
root/styles/prosilverrose/
root/styles/prosilverrose/imageset/
root/styles/prosilverrose/template/
root/styles/prosilverrose/theme/

Note: These steps above will be the same for starting a new subsilver2 type style.

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.
????Please be careful, ACP edits are not as good as edits in the actual files. The best way to edit your files is to download them
from your directory, edit them and reupload them. Then you should purge your cache, refresh and the change is there.

But for now we will be using the ACP, since that is the easiest way to start with.????
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 {
    padding: 3px;
    border: 1px solid #666666;
    display: block;
    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.

--------------------------------------------------------------------------------------------------------------------
d/m/y
-- 01/03/08 Update #1: Removed original article link, this is now main article.
-- 16/03/08 Update #2: Added section about ACP editting.

[Semi_Deus]

No feedback?

[Sniper_E]

Nope.... that's too much for me to read.
To cover all the sections of creating a style, that tutorial would be 25 times larger than that.
I think a simple Q&A tutorial would work better.

Q: Where would I change the color of my Site Name in the header for the subsilver2 style?
A: Open styles/subsilver2/theme/stylesheet.css / Find: h1 { color: black; / Replace with: h1 { color: white;

[Semi_Deus]

haha, well, it wasnt really intended for you either
You know how to begin, but for those who always ask: How do i make a style, this might come in handy

[stitch626]

I think it's a great tutorial. You have really put a lot of hard work into it Semi. This would benefit the newbie IMO.

[Semi_Deus]

[Birgitte]

Hi Semi_Deus,

I already heard (through the grapevine) that Sniper_E would be the man to se about a style-question.
After reading this tutorial, you are definately on my "who to groupie"-list, too.

I qualify as a jurymember, since I'm a clueless newbie , and:
I think it's brilliant!
It is exactly what it says; how to begin creating a style.
It definately answered most of the general questions I had.
Thanx!

/Birgitte

[Semi_Deus]

Hi Semi_Deus,

I already heard (through the grapevine) that Sniper_E would be the man to se about a style-question.
After reading this tutorial, you are definately on my "who to groupie"-list, too.

I qualify as a jurymember, since I'm a clueless newbie , and:
I think it's brilliant!
It is exactly what it says; how to begin creating a style.
It definately answered most of the general questions I had.
Thanx!

/Birgitte

Great to hear Birgitte! Please let me know if it needs some more information you would like to know, and might come in handy for other user too!

[jdh]

Looks great Roelof!

[Fn-Mi Fabian]

great tutorial, i wil try to make a style

thanks!!!