phpBBHacks.com, the place for phpBB users

Bookmark and Share

Creating a Template With subSilver

Creating a Template With subSilver

Postby Jaeboy » June 29th 2003, 5:03 am

So, you wanna make a template? Something that will give your phpBB a personality? Here is how to make it. This will also teach you how to make other templates that can be installed within the admin panel!

    Step 1.
    • Make a copy of the subSilver folder located in the templates directory.
      Make sure the subSilver folder that you copy is in its un-modified, original
      state. If you are not sure of this, then I suggest downloading it again to be
      safe. Put the copied folder in the templates directory also.
    • Rename the copied folder to whatever your new template name is going to be.
    Step 2.
    • Now we need to go through every file in the folder, find all references
      pointing to 'subSilver', and change them all to point to your new template.
      This step is the one where we edit 88 lines in 18 files and is outlined below.
    Step 3.
    • Rename 'subSilver.cfg' to 'your-new-template.cfg'
    • Rename 'subSilver.css' to 'your-new-template.css'
    Step 4.
    • Upload your new template's folder, make sure to put it in the templates directory.
    Step 5.
    • Go into your phpBB and go to the Administration Panel.
    • Find the Styles Admin section.
    • Click the category labeled "Add."
      You should see your new template in the list, click "Add."
    Step 6.
    • Thats it, you may now change your board's template to the new one by going to
      Administration Panel -> General Admin -> Configuration

Coding Step 1
Making a theme from SubSilver
Code: Select all
#########################################################################################
##
## NOTE:
##       Replace SubSilver with your new theme's name
##      
##
## NOTE: Replace the words 'your-new-template' with your actual template name.
##
#########################################################################################

#
#-----[ OPEN ]------------------------------------------
#
templates/your-new-template/faq_body.tpl

#
#-----[ FIND & REPLACE ]------------------------------------------
#Line 40

		<td class="spaceRow" height="1"><img src="templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/index_body.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 54

	<td class="row1" align="center" valign="middle" rowspan="2"><img src="templates/subSilver/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 92

	<td width="20" align="center"><img src="templates/subSilver/images/folder_new.gif" alt="{L_NEW_POSTS}"/></td>

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 95

	<td width="20" align="center"><img src="templates/subSilver/images/folder.gif" alt="{L_NO_NEW_POSTS}" /></td>

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 98
   
	<td width="20" align="center"><img src="templates/subSilver/images/folder_lock.gif" alt="{L_FORUM_LOCKED}" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/install.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 7
   
<link rel="stylesheet" href="templates/subSilver/subSilver.css" type="text/css">

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 15
   
TH			{ background-image: url(templates/subSilver/images/cellpic3.gif) }

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 16
  
TD.cat		{ background-image: url(templates/subSilver/images/cellpic1.gif) }

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 17
   
TD.rowpic	{ background-image: url(templates/subSilver/images/cellpic2.jpg); background-repeat: repeat-y }

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 18
  
td.icqback	{ background-image: url(templates/subSilver/images/icon_icq_add.gif); background-repeat: no-repeat }

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 19
                                                                                             
TD.catHead,TD.catSides,TD.catLeft,TD.catRight,TD.catBottom { background-image: url(templates/subSilver/images/cellpic1.gif) }

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 22
  
@import url("templates/subSilver/formIE.css");

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 34
						<td><img src="templates/subSilver/images/logo_phpBB.gif" border="0" alt="Forum Home" vspace="1" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/modcp_split.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 51
 
			<td valign="middle"><img src="templates/subSilver/images/icon_minipost.gif" alt="{L_POST}"><span class="postdetails">{L_POSTED}:

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 64
 
	  <td colspan="3" height="1" class="row3"><img src="templates/subSilver/images/spacer.gif" width="1" height="1" alt="."></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/overall_header.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 9
  
<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 58
  
		background-image: url(templates/subSilver/images/{T_TH_CLASS3});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 66
 
	background-image: url(templates/subSilver/images/{T_TH_CLASS2});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 70
  
			background-image: url(templates/subSilver/images/{T_TH_CLASS1});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 209
 
@import url("templates/subSilver/formIE.css");

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 231
   
				<td><a href="{U_INDEX}"><img src="templates/subSilver/images/logo_phpBB.gif" border="0" alt="{L_INDEX}" vspace="1" /></a></td>

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 235
#Places to Replace: 4
                                                                                                           	<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&<a href="{U_FAQ}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_faq.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">& &<a href="{U_SEARCH}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_search.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>& &<a href="{U_MEMBERLIST}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_members.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>& &<a href="{U_GROUP_CP}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_groups.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 237

						&<a href="{U_REGISTER}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_register.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span>&

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 242
#Places to Replace: 3
                                                                                                          				<td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&<a href="{U_PROFILE}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_profile.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>& &<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_message.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>& &<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_login.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&</span></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/posting_preview.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 7

		<td class="row1"><img src="templates/subSilver/images/icon_minipost.gif" alt="{L_POST}" /><span class="postdetails">{L_POSTED}: {POST_DATE} &&& {L_POST_SUBJECT}: {POST_SUBJECT}</span></td>

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 19
  
		<td class="spaceRow" height="1"><img src="templates/subSilver/images/spacer.gif" width="1" height="1" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/posting_topic_review.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 31
  
		<td colspan="2" height="1" class="spaceRow"><img src="templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/privmsgs_body.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 41
   
				<td bgcolor="{T_TD_COLOR2}"><img src="templates/subSilver/images/spacer.gif" width="{INBOX_LIMIT_IMG_WIDTH}" height="8" alt="{INBOX_LIMIT_PERCENT}" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/search_results_post.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 21
                                                                                                 
	<td class="catHead" colspan="2" height="28"><span class="topictitle"><img src="templates/subSilver/images/folder.gif" align="absmiddle">& {L_TOPIC}:&<a href="{searchresults.U_TOPIC}" class="topictitle">{searchresults.TOPIC_TITLE}</a></span></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/simple_header.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 15
  
<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 69
  
		background-image: url(templates/subSilver/images/{T_TH_CLASS3});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 77
   
	background-image: url(templates/subSilver/images/{T_TH_CLASS2});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 81
  
			background-image: url(templates/subSilver/images/{T_TH_CLASS1});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 231
  
@import url("templates/subSilver/formIE.css");

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/viewonline_body.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 25
  
	<td colspan="3" height="1" class="row3"><img src="templates/subSilver/images/spacer.gif" width="1" height="1" alt="."></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/viewtopic_body.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 59
  
		<td class="spaceRow" colspan="2" height="1"><img src="templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/viewtopic_poll_result.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 17
  
					<td><img src="templates/subSilver/images/vote_lcap.gif" width="4" alt="" height="12" /></td>

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 19
  
					<td><img src="templates/subSilver/images/vote_rcap.gif" width="4" alt="" height="12" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/admin/forum_admin_body.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 33
  
		<td colspan="7" height="1" class="spaceRow"><img src="../templates/subSilver/images/spacer.gif" alt="" width="1" height="1" /></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/admin/index_body.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 66
  
	<td colspan="5" height="1" class="row3"><img src="../templates/subSilver/images/spacer.gif" width="1" height="1" alt="."></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/admin/index_navigate.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 4
                                                                                              
	<td align="center" ><a href="{U_FORUM_INDEX}" target="_parent"><img src="../templates/subSilver/images/logo_phpBB_med.gif" border="0" /></a></td>

# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/admin/page_header.tpl

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 6
 
<!-- link rel="stylesheet" href="../templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 62
  
		background-image: url(../templates/subSilver/images/{T_TH_CLASS3});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 70
 
	background-image: url(../templates/subSilver/images/{T_TH_CLASS2});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 74
   
			background-image: url(../templates/subSilver/images/{T_TH_CLASS1});

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 219
   
@import url("../templates/subSilver/formIE.css");

# 
#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------
# 
# EoM


Coding Step 2
Making your theme self-installable(Optional)
Code: Select all
# 
#-----[ OPEN ]------------------------------------------
# 
templates/your-new-template/theme_info.cfg

# 
#-----[ FIND & REPLACE ]------------------------------------------
#
#
	Replace all subSilver with your-new-template

$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";
$subSilver[0]['body_text'] = "000000";
$subSilver[0]['body_link'] = "006699";
$subSilver[0]['body_ etc......

# 
#-----[ FIND  & RENAME ]------------------------------------------
# 
			 	   	
		templates/your-new-template/subSilver.cfg

# 
#-----[ FIND  & RENAME ]------------------------------------------
# 

		templates/your-new-template/subSilver.css




Coding Step 3
Applying style to Admin Panel(Optional)
Code: Select all
# 
#-----[ Open ]------------------------------------------
# 

		templates/your-new-template/admin/page_header.php

#
#-----[ FIND ]-----------------------------------------
#

<!-- link rel="stylesheet" href="../templates/your-new-template/SubSilver.css" type="text/css" -->

#
#-----[ REPLACE (2) ]----------------------------------
#
			 	   		
<link rel="stylesheet" href="../templates/your-new-template/SubSilver.css" type="text/css">

#
#-----[ FIND & REMOVE ]---------------------------------
#

<style type="text/css">

/*
  The original SubSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com
*/


#-----[ UNTIL ]---------------------------------


/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");

</style>



    Acknowledgment
    Note: This article is based on my own knowledge, please correct me if am wrong in any way.
I love that Cat
User avatar
Jaeboy
Well Known User
 
Posts: 285
Joined: October 17th 2002, 3:00 am
Location: HkG SAR

Return to phpBB 2: Hack and Template Authoring

Who is online

Users browsing this forum: No registered users and 0 guests