ADD TO KB - HOW TO MAKE YOUR OWN THEME!

Ok, this should be added to the KB so ppl know how to create their own themes.
This is BEST DONE ON A LOCAL WEBSERVER.
If you are using Windows: I like to use this VERY EASY webserver. You can pick it up here, www.instantservers.com (ITS A 30 DAY DEMO) . You will need to download the following:
From the Download page
1) Mini Portal
2) asp2291.exe Apache-ASP 2.29 [12-04-2001]
3) mys3234c.exe Mysql-3.23.49 [06-30-2003]

You probably dont need, Apache-ASP. But Its nice to have.

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

Its all done in a few easy steps - then the rest is up to you!
be sure to back up all your files before attempting this. I would feel guilty if something went wrong, and you didn't have a back up of your files.

PART 1

Goto your ACP --> eXtreme Styles, Styles Management --> Import/Export Styles, Clone Styles (click clone styles) --> Clone Styles, you should see the FISUBSLIVERSH style, click CLONE STYLE --> Clone Template "fisubsilversh", New template (directory) name:, YOUR NEW TEMPLATE DIR NAME (keep it the same as the next step), New style name: YOUR NEW TEMPLATE NAME (same as above), Click SUBMIT -->

The next screen MAY VARY.

Local webserver
If you are doing this on a LOCAL WEBSERVER (I suggest)
FTP Configuration --> Select upload method: Use local file system (no configuration required) --> Click submit.

LEAVE FTP Settings BLANK!

XS will make a new directory in the /templates/ dir, with the name of the new theme.

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

[u]IF you are going to do this vis FTP[/iu]
Using FTP:
Enter all your FTP info.
Click submit.

XS SHOULD make a new directory in the /templates/ dir, with the name of the new theme. (i didnt work for me, thats why i use a local webserver)
END OF PART 1

Part 2
Editing your new template!

Lets start with the simple side of things:

Selecting a color scheme, and sticking with it. A good designer will pick 4 to 10 colors to work with. Usually, you will have 2 or 3 basic colors(shades) White, Black and a member from the Grey family (depending). Then the other 4 colors are your main colors. Take FISUBSILVERSH as an example, they use 3 or 4 shades of blue and a few shades of oranges which is very purdy.

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

Lets talk about how Tags work in the .tpl (template file, which is html) file and how it relates to .css file.

We will need to open up the VERY FIRST FILE where the .css info is pulled from so we understand what it does. The VERY FIRST FILE we look at is OVERALL_HEADER.TPL. In the OVERALL_HEADER.TPL you will see the pages' header information.

Overall_header.tpl

Code:

<?xml version="1.0" encoding="{S_CONTENT_ENCODING}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="templates/fisubsilversh/{T_HEAD_STYLESHEET}" type="text/css" />
<script language="JavaScript" type="text/javascript" src="includes/toggle_display.js"></script>

Don't worry about all of that, what I want to show you is this one line.

Code:

That one line refers to the .css file which holds all of the sites formating (how the site is seen by the end user)

So lets take a look at : "YOUR THEME NAME".css.

Definition
Cascading Style Sheet or .css. With Cascading Style sheets, both web designers and end users can create style templates (sheet) that specifies how different text elements (paragraphs, headings, hyperlinks, etc.) appear on a web page. Currently, not all browsers express CSS formatting in the same manner.

Its a fairly simple file to understand (once you get the basics). Let me try to explain. I'll use some very simple examples (actually is all simple).

First example: (broken into 2 parts, Body & Scroll Bars)

BODY:
The background color, font color, font size, font, and margins of the page.

Code:

body
{
background:#ecf0f6;
color:#000000;
font:12px Verdana,Arial,Helvetica,sans-serif;
margin:6px;padding:0;

2nd part:
The scroll bars. self explainitory.

Code:

scrollbar-3dlight-color:#d1d7dc;
scrollbar-arrow-color:#006699;
scrollbar-darkshadow-color:#98aab1;
scrollbar-face-color:#dee3e7;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#dee3e7;
scrollbar-track-color:#efefef}

How to edit:

Basically, the way things work with the .css is based on a few things.
You can use actual COLOR e.g. RED, BLUE, GREEN, etc etc.
You can use HEX colors e.g. #000000 - Black, #FFFFFF - White
here is where you can find the HEX colors + their #, http://gotomy.com/color.html

You can change your scroll bars to any color you'd like.

Fonts:
There is a basic set of font that every comptuer has namely, Verdana, Arial, Helvetica, sans-serif and a few others. You can use your OWN fonts if you wish, but if someone does not have that font, a default font will be used. Sizes and colors can also be set to fonts by using Color: #SOMEHEX . Size, by using Font: 12px. PX means pixels.

Not too complicated so far right? Good, I hope not.

I'll wrtie up more in a few...

Ok so, how do we edit these things.

Now that you saw, <link rel="stylesheet" ... /> (above) its time to tell you how it works. Basically, the <link rel="stylesheet".../> is gathering info from .css and in the OVERALL_HEADER.TPL there are TAGS, which are also in the .CSS file (ok im not the best at explaining it but ill show you)

So, in OVERALL_HEADER.TPL (after the banner mod) is

Code:

You see class="bodyline" - well in the .css file, theres a class called, YOU GUESSED IT! BODYLINE, but its actually .bodyline

Code:

/* This is the border line & background colour round the entire page */
.bodyline{background:#ffffff;border:1px solid #98aab1}

As I stated up top, you can set the specific colors to the class by using key words in the .css file. (i'll have to go back and edit the post to show the .css commands) .

Anyways, in all the .tpl files there are these CLASS="SOMETHING" tags. They all lead back to the .css file and how the specific tags are viewed.

Ok, so after reading my gibberish, I think you should get the BASIC point of how the files work hand in hand.

Lets do some editing. If you don't have any HTML knowledge things could get ugly. If you do, then you are set.

Hrmm... where to start.

Lets keep this short and sweet. (cause the easiest way to edit the template is to leave everything along, and just change the colors in the .css file.) Actually, thats the easiest way to edit a theme. I'm not going to elaborte anymore, unless you need help physically editing a .tpl file.

So, this file needs to be EDITED a few time so its not so choppy...

OK, so i guess this is as good as it will et for the time being.
Let me know if you have any questions.

phpBB2.de User Anmeldungsdatum: 19.08.2007 Beiträge: 2

Hey I grasp the whole concept of what your explaining and have a fairly good understanding of HTML and CSS. But im still having trouble i can't find where in the code I edit the size of the banner at the top to make it go all the way across and i need to know how to move the login buttons etc around.

Any help would be much appreciated, mainly i just need to know in which files i would go about doing this.

Here is my website if you want to take a look:

www.llamafiend.com/forum

phpBB2.de User Anmeldungsdatum: 19.08.2007 Beiträge: 2

sorry double post

overall_header.tpl and there some stuff in the .css

phpBB2.de User Anmeldungsdatum: 30.10.2007 Beiträge: 25

Hello, does this mean i can simply edit this theme making it mainly Red+White with Blue instead of Blue+White with Orange?

That would be brillaint!

you COULD, but I suggest you use XS to clone FISUBSILVERSH and edit that version instead of the original.

phpBB2.de User Anmeldungsdatum: 30.10.2007 Beiträge: 25

XtremeStyles?

that is correct.

phpBB2.de User Anmeldungsdatum: 30.10.2007 Beiträge: 25

I'll have a bash mate, i'll prob end up needing advice!

Cheers.

phpBB2.de User Anmeldungsdatum: 30.10.2007 Beiträge: 25

Is there any examples of people who have changed the colours of FISUBSILVERISH?

check the download section.