Welcome to Prismdaisy (dot) Com :: Forum template, phpbb icons and smilies and much more!

Welcome To my Tutorals Page.
I had to dig deep into my archives to find most of these so please enjoy and feel free to contact me if you need anything.

Basic Template Modifications:

What you will need. (I will conduct this tutorial as if you have a WYSIWYG editor like Dreamweaver)

1. Image folder and plain text instructions (49KB) (Downloaded: 33 )
2. PhpBB (Latest Version) (I'm using 2.0.21)
      a. subSilver.css
      b. subSilver.cfg
      c. theme_info.cfg
      d. overall_header.tpl
      e. simple_header.tpl
     f. index_body.tpl
      g. search_results_posts.tpl
      h. viewtopic_poll_result.tpl
       i. overall_footer.tpl
3. Editor (Like Notepad or Dreamweaver)
4. Graphics program (Like PSP or Photoshop)

Edit files:

Here we go, the first thing we need to do is create our file. You want to copy* the subSilver folder and rename it to what ever you want. For this tutorial we are going to name it newSilver.

* You must copy this file, at all times you wish to keep subSilver template. The admin panel will continue to run on the subSilver template so keep it there!!!! Also you want to offer people the ability to use something other then your template, it is an internet courtesy.

In your new folder named newSilver change the files named subSilver.css and subSilver.cfg to the new newSilver name. They should now look like newSilver.css and newSilver.cfg.

OPEN newSilver.cfg.

You will see something like this:

//
// phpBB 2.x auto-generated theme config file for subSilver
// Do not change anything in this file!
//

$subSilver[0]['template_name'] = "subSilver";
$subSilver[0]['style_name'] = "subSilver";
$subSilver[0]['head_stylesheet'] = "subSilver.css";
$subSilver[0]['body_background'] = "";
$subSilver[0]['body_bgcolor'] = "E5E5E5";

Find and replace all instances of subSilver with your new name newSilver. There should be 48 of them.

It should now look something like this:

//
// phpBB 2.x auto-generated theme config file for newSilver
// Do not change anything in this file!
//

$newSilver[0]['template_name'] = "newSilver";
$newSilver[0]['style_name'] = "newSilver";
$newSilver[0]['head_stylesheet'] = "newSilver.css";
$newSilver[0]['body_background'] = "";
$newSilver[0]['body_bgcolor'] = "E5E5E5";

You will now have to open the following files and replace all instances of subSilver again.

      1. overall_header.tpl
      2. index_body.tpl
      3. viewtopic_poll_result.tpl
      4. search_results_posts.tpl

OPEN overall_header.tpl

Find this code (this is a snippet)

<style type="text/css">
<!--
/*
The original subSilver Theme for phpBB version 2+
Created by subBlue design
http://www.subBlue.com

NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
theme administration centre. When you have finalised your style you could cut the final CSS code
and place it in an external file, deleting this section to save bandwidth.
*/

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {

... ... ...

@import url("templates/subSilver/formIE.css");
-->
</style>

Replace with

OPEN simple_header.tpl

Do the same here.

Image and table modification:

Okay you are now done with the basic page editing. You may now upload your new template so that you can work and view as you go. Now when you view it, if you did everything correctly it will look just like subSilver, so don't freak out on me.

From here on out when you complete a task, feel free to upload it and view what you had done. This is a good way to see if what you did is correct.

Lets now start to edit the css file.

OPEN newSilver.css

TIP: There are description above most of the sections in this file. They will give you a general description of what each one is or does. They look something like this:

/* General page style. The scroll bar colours only visible in IE5.5+ */

Notice the /* and the */ this allows you to place descriptions with in a css file. If you are using DW then they are in gray.

FIND

body {
background-color: #E5E5E5;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;

Pretty standard css. the only thing I wish to change is the background-color: #E5E5E5. This is the gray border in the background.

body {
background-color: #add6eb;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;

FIND

td.rowpic {
background-color: #FFFFFF;
background-image: url(images/cellpic2.jpg);
background-repeat: repeat-y;

This and the next two are the blue and gray pics above each table. This is the first things we are going to change.

Open you graphics program.

OPEN IMAGE FILES: (You may edit your own or use mine. Just replace yours with mine)

     1. images/cellpic1.gif - Silver / white (blank horizontal image to right of forum cat.)
     2. images/cellpic2.jpg - Silver (Forum Categories)
     3. images/cellpic3.gif - Blue (Top most image)

TIP: If you wish to change the extension on these files this is where you will do it.

After you edit the images upload them and make sure it is what you want.

FIND

/* Main table cell colours and backgrounds */
td.row1 { background-color: #EFEFEF; }
td.row2 { background-color: #DEE3E7; }
td.row3 { background-color: #D1D7DC; }

These control the cell colors.

row1- controls the first and second cells (Forum image and topic name) index page.
row2- controls the topic, post and last post cells, index page.
row3- controls the author cell, viewforum page.

Here is what I chose

/* Main table cell colours and backgrounds */
td.row1 { background-color: #d6edf8; }
td.row2 { background-color: #add6eb; }
td.row3 { background-color: #d6edf8; }

FIND

td.row3Right,td.spaceRow {
background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }

#D1D7DC is the Last Post cell on Viewforum page.

I usually chose the row3 color for this cell.

td.row3Right,td.spaceRow {
background-color: #d6edf8; border: #FFFFFF; border-style: solid; }

FIND:

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

/* This is the outline round the main forum tables */
.forumline { background-color: #FFFFFF; border: 2px #006699 solid; }

Bodyline controls the background inside the main table, and the border around the entire page.
Forumline controls the white lines between the cells and the border around the main topics area.

All I want to do is just change the outline to the topics area.

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

/* This is the outline round the main forum tables */
.forumline { background-color: #FFFFFF; border: 2px #4da1cb solid; }

Upload the css file and see what you got.

Font modification:

FIND:

/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; }
a:hover { text-decoration: underline; color : #DD6900; }

Name on forum - index and viewforum page.
Descriptions for forum - index page
Mostly the smallest non-linked font through out the entire forum.

link. #000000
hover. #4da1cb

/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #000000; }
a:hover { text-decoration: underline; color : #4da1cb; }

FIND:

/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; }

View posts since last visit, View your posts, View unanswered posts - Index page
Mark all topics read - viewforum page
Various other links that are all throught the forum.

/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #000000; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #4da1cb; text-decoration: underline; }

FIND:

/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #006699; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }

The description is good for this one, you know exactly what it is for.

/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #4da1cb; }
a.mainmenu:hover{ text-decoration: underline; color : #4da1cb; }

FIND:

/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }

This is the font with in cellpic1.gif cell. This is the one that is the gray gradient going down in subSilver template. For me it is the blue gradient going down. For this tutorial I am leaving the color the same.

FIND:

/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }

I like this color, but dont like the hover color, so this is what I did.

FIND:

/* Header cells - the blue and silver gradient backgrounds */
th {
color: #FFA34F; font-size: 11px; font-weight : bold;
background-color: #006699; height: 25px;
background-image: url(images/cellpic3.gif);

This is the orange font at the top of the forum table.

/* Header cells - the blue and silver gradient backgrounds */
th {
color: #006699; font-size: 11px; font-weight : bold;
background-color: #006699; height: 25px;
background-image: url(images/cellpic3.gif);

FIND:

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }

The navigation text they are talking about is on the viewforum and viewtopic pages. Remember the nav text (Page 1,2,3 etc) is only viewable is there are multiple pages.
The navigation bar on forum (index) is the one that is (what ever) Forum Index link just above the forum table.

I have changed up the hover just to show you something new.

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #4da1cb; }
a.nav:hover { text-decoration: none; color : #add6eb; }

FIND:

/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }

This is for the links on the viewforum page under the topics column. This is just like the forum links one. The only difference is the visited.

/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #006699; }
a.topictitle:hover{ text-decoration: underline; color : #ffffff; }

FIND:

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #000000;}

/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; }

/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}

These next three control the post its self. The name or posters name, location and number of posts as well as the links with in a post.

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #006699;}

/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #006699; }

/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #006699; }
a.postlink:hover { text-decoration: underline; color : #4da1cb}

The last thing I edit is the quotes and the code in post.

FIND:

/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

The code area is when a person puts a code snippet in there post. The quote is for when you or a poster is quoting some one or something.

TIP: It is good to have these different from your main post so that people can tell what is what. I have seen forums before that blend them all together and it is hard to tell what is a quote and where it ends.

.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #cc1825;
background-color: #FAFAFA; border: #4da1cb; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #006699; line-height: 125%;
background-color: #FAFAFA; border: #4da1cb; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

Finishing Touches:

You are now done with editing the files side of this adventure. Now all you need to do is get a set of forum icons you like and upload them. I have chosen to go with one of my own.

You also add your own stuff to the bottom of the page.

OPEN overall_footer.tpl

FIND

You can add your own stuff before or after {TRANSLATION_INFO}, but add a <BR> then your stuff.

Upload and view your hard work.

You may view what it looks like if you do it to this tutorial.

DEMO!!