[phpBB] Step-By-Step Instructions to creating a new template

**Fragalot** · 07-14-2006, 02:36 AM

gdalla11, yes, you design it in photoshop, slice it up, (i prefer taking the images sliced and creating the html myself afterwards)

and then make a table where the content goes, etc...

that hatch effect is just a background, set by CSS. or simply the background="image" attibute in the <body> tag.

i can't help you with the PSD.

gdalla11 · 07-14-2006, 07:52 PM

cheers mate. so, once its designed in photoshop, do you just slice it into the exact number of cells required, (e.g 4 or 8 depending on how many slices?) header, footer, and sides? im assuming i need to leave a larger portion of my design in the centre blank as it wont be used, correct?

ive tried to illustrate this in paint!

also, i noticed there are litte borders in the main forum surrounding the individual forums. how is this done?

from what Sean said about the cells being set to width 100%, does this mean i can make my design virtually any size. what dimensions would you recomened i use in photoshop?

thanks again for everyones support on this. i know it can be frustrating teaching noobs!

**Sean** · 07-14-2006, 11:42 PM

9 cells is perfect for these kind of effects around tables. I have attached what i mean.

gdalla11 · 07-15-2006, 12:09 AM

thoughht that was what you maybe done. good to know that. and which tpl did you edit for the borders surrounding the actual individual forums in the content cell?

**Sean** · 07-15-2006, 02:56 AM

i edited the index_body.tpl for the forum categorys.

Unlike the other tables these r just 2 separate tables one sitting on the top of the category and the other on the bottom.

HTML Code:

<table width="100%"  cellpadding="0" cellspacing="0" border="0">
<td width="9" height="6"><img width="9" height="6" border="0" src="templates/ClanzDarkness2/images/a4.gif"></td>
<td width="100%" height="6" background="templates/ClanzDarkness2/images/a5.gif"></td>
<td width="9" height="6"><img width="9" height="6" border="0" src="templates/ClanzDarkness2/images/a6.gif"></td>
</table>
  <!-- BEGIN catrow -->
<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">

  <tr> 
	<th colspan="2" class="thCornerL" height="25" nowrap="nowrap">&nbsp;{L_FORUM}&nbsp;</th>
	<th width="50" class="thTop" nowrap="nowrap">&nbsp;{L_TOPICS}&nbsp;</th>
	<th width="50" class="thTop" nowrap="nowrap">&nbsp;{L_POSTS}&nbsp;</th>
	<th class="thCornerR" nowrap="nowrap">&nbsp;{L_LASTPOST}&nbsp;</th>
  </tr>

  <tr> 
	<td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
	<td class="rowpic" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- BEGIN forumrow -->
  <tr> 
	<td class="row2" align="center" valign="middle" height="50"><img vspace="3" hspace="3" src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="33" height="33" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
	<td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a><br />
	  </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}<br />
	  </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
	<td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
	<td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
	<td width="150" class="row1" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->
</table>
<table width="100%"  cellpadding="0" cellspacing="0" border="0">
<td width="9" height="6"><img width="9" height="6" border="0" src="templates/ClanzDarkness2/images/a1.gif"></td>
<td width="100%" height="6" background="templates/ClanzDarkness2/images/a2.gif"></td>
<td width="9" height="6"><img width="9" height="6" border="0" src="templates/ClanzDarkness2/images/a3.gif"></td>
</table>

**Fragalot** · 07-15-2006, 08:16 PM

a nice tutorial wich tought me how to slice a bit was this one.

Zymic ¨ Free Templates & Tutorials

and no, we like to help where we can

and that includes noobs

gdalla11 · 07-20-2006, 10:59 AM

cheers again.

ok, so ive started work on the design now. im looking for ideas and suggestions for other content. i just copied and paste the forum (clanzarkness) from my site, to illustrate how it it will sit. im looking for ideas fir colour schemes for the forum cells. and if you lot have any suggestions to extra content for the actual design, id much appreciatte it. the purple bar is what will be the NAV bar. ive not spent much time on this so far so!!

**Sean** · 07-20-2006, 01:56 PM

i would proberly use some color in the forums section, as the header is alot more colorful than the rest of the site

**Kate** · 07-20-2006, 09:04 PM

Why don't you go with similar cool shades instead of the grey? The blue you have used on the header looks awesome on the white bg
(just a suggestion

)

gdalla11 · 07-20-2006, 09:41 PM

ye, cheers for the heads up. the grey i slammed in was really just to change the green colours of clanz darkeness. i was a tad concerned about there being TOO much colour, or too much blue if i was to do what you suggest. not ruling it out tho.

do you think i should add any moore graphics, i.e maybe a broder surrounding the forum content? i dont want to run it in to a cluttery mess, but at the same time, if something else would go, then i'd go for it.

cheers