Step-By-Step Instructions To Creating A New Template

Frågor kring teman (forumets design) för phpBB 2.0.x.

Moderator: Moderatorgrupp

Användarvisningsbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Ort: Linköping/Stockholm
Kontakt:

Step-By-Step Instructions To Creating A New Template

Inlägg av Kail » 2003-07-27 20:47

Postad av BMan1, original:
http://www.phpbb.com/phpBB/viewtopic.php?t=21845

*************************************************************

Kod: Markera allt

####################################################################################
##
## Mod Title: New Template
## Mod Version: 1.0.0
## Author: Nathan Nellans - bman1@bman1.com - http://www.bman1.com
## Description: This details every step required to create your own custom template
##              by copying and renaming subSilver.
##
## Installation Level: Advanced
## Installation Time: 35-40 Minutes
## Files To Edit: 18
## Lines To Edit: 88
## Included Files: n/a
##
#############################################################################################
## Security Disclaimer: This MOD Cannot Be Posted To Or Added At Any Non-Official phpBB Sites
#############################################################################################
##
## OVERVIEW
## -----------------------------------------------------------------------------------------
## 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
## 
## Happy modifying!!
##
#########################################################################################
## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD
#########################################################################################
##
## NOTE: The asterisks used below are only to highlight and show you where to replace.
##       Do not search the templates for the asterisks as they will not be found.
##       Do not include the asterisks in the templates as they will mess things up.
##
## 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">&nbsp;<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">&nbsp; &nbsp;<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>&nbsp; &nbsp;<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>&nbsp; &nbsp;<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>&nbsp;

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 237
                                                                                                                  *********
						&nbsp;<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>&nbsp;

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 242
#Places to Replace: 3
                                                                                                                                                                                                    *********                                                                                                                                                                                           *********                                                                                                                                                                                                                  *********
						<td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<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>&nbsp; &nbsp;<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>&nbsp; &nbsp;<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>&nbsp;</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} &nbsp;&nbsp;&nbsp; {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">&nbsp; {L_TOPIC}:&nbsp;<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/theme_info.cfg

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 8
#Places to Replace: 2

 *********                        *********
$subSilver[0]['template_name'] = "subSilver";

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 9
#Places to Replace: 2

 *********                     *********
$subSilver[0]['style_name'] = "subSilver";

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Line 10
#Places to Replace: 2

 *********                          *********
$subSilver[0]['head_stylesheet'] = "subSilver.css";

# 
#-----[ FIND & REPLACE ]------------------------------------------
#Lines 11 through 49

 *********
$subSilver[0]

# 
#-----[ 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
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide

Vilka är online

Användare som besöker denna kategori: 2 och 0 gäster