| How to start a new style |
| Description: This article explains how to clone subSilver to start developing new style |
| Author: CyberAlien |
| Date: Thu Apr 15, 2004 6:06 pm |
| Type: HowTo |
| Keywords: style, new style, create, subSilver |
| Category: Styles |
 |
Hello,
This article explains how to start creating your own style.
Almost every style is based on something, and that something is usually subSilver. subSilver is default phpBB style and you are allowed to edit it as you want and use it as base for other styles. But you are not allowed to use styles by other designers to create your own style.
subSilver is located in templates/subSilver/ in your phpBB directory. Download it on your computer (if you don't have copy of it).
In all futher instructions you should replace "YourStyle" with your style name. Directory name and all filenames is case sensitive, so "YourStyle" and "yourstyle" are not the same and when following futher instructions you should make sure you have correct filename case everywhere.
Copy contents of directory "templates/subSilver" to "templates/YourStyle".
Rename templates/YourStyle/subSilver.cfg to templates/YourStyle/YourStyle.cfg
Rename templates/YourStyle/subSilver.css to templates/YourStyle/YourStyle.css
Open theme_info.cfg, replace all "subSilver" with "YourStyle". Then do the same to all .tpl files in that directory. You can easily do it with almost any text editor by using command "replace all".
Then upload modified files on your forum. Directory structure should be similar to subSilver, except that instead of "subSilver" there should be "YourStyle".
Login as administrator, go to admin control panel, in styles management click "add". If you see your new style in list of available styles to install then you did everything correctly. You can install style and edit it. If you don't see your new style in that list then you did something incorrectly (probably forgot to edit theme_info.cfg or forgot to rename subSilver.cfg)
Here is detailed description of what to change. It is the same instructions as above, but written as mod. | Code: | ####################################################################################
##
## Mod Title: New Template
## Mod Version: 1.0.1
## Author: Nathan Nellans - NathanNellans[at]hotmail[dot]com - http://www.nathannellans.org
## 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.
##
## NOTE: Version 1.0.1: removed references to install.tpl - CyberAlien
##
#########################################################################################
#
#-----[ 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/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/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 |
|
|
|
|
