phpBBHacks.com - Creating a Template With subSilver
Get Photoshop help and share your work at PhotoshopForums.com
StatsForums Home   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in
FAQFAQ   SearchSearch   MemberlistMemberlist   TutorialsTutorials   ContactContact Us
Add Us:     MySpace     Facebook     StumbleUpon
Username:    Password:
Remember Me?    
Creating a Template With subSilver
BlinkList
del.icio.us
Furl
linkaGoGo
reddit
Simpy
Mister Wong
Yahoo! My Web

Post new topic   Reply to topic    phpBBHacks.com Support Forums Forum Index -> phpBB 2: Hack and Template Authoring
 See a User Guidelines violation? Please contact us.
Author Message

Jaeboy
Well Known User

Joined: 17 Oct 2002
Posts: 285
Location: HkG SAR
PostPosted: June 29th 2003, 4:03 am    Post subject: Creating a Template With subSilver Reply with quote
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:

#########################################################################################
##
## 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:

#
#-----[ 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:

#
#-----[ 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
Back to top
View user's profile Send private message MSN Messenger
Display posts from previous:   
Post new topic   Reply to topic    phpBBHacks.com Support Forums Forum Index -> phpBB 2: Hack and Template Authoring All times are GMT - 6 Hours
Page 1 of 1
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Links: Big Message Boards - Free JavaScript - phpBB2 - phpbb styles - Suporte phpBB - phpBB.it - phpBB Česky - phpBB Turkiye - phpBBArabia.com - phpBB-fr.com - Romanian phpBB online community - phpBB-TW.net - phpBBservice.nl - phpBB Brasil

Network: iFroggy Network Blog - iFroggy Hosting - SportsForums.net - KarateForums.com - YanksBlog.com - PhotoshopForums.com - DeveloperCube - Managing Online Forums - ManagingCommunities.com - CommunityAdmins.com - DrGregHouse.com - Bad Boy Blog - BadBoyForums.com - SodaRatings.com - Patrick O'Keefe

< Advertising - Contact Us - Staff - User Guidelines >

Copyright © 2001-2008. iFroggy Network, phpBBHacks.com. All Rights Reserved. Privacy Policy. We Support phpBBHacks.com (of course!).
Powered by phpBB © phpBB Group. phpBB SEO. Hosted by 100MegsWebHosting. We are in no way affiliated with the phpBB Group. phpBB is copyright to the phpBB Group.