Posted: Sun Aug 12, 2007 3:36 pm Post subject: Understand Overall_Header.tpl
If you want to fully understand you overall_header.tpl line for line, this is your guide.
However I will only be covering the basics. Other then that you still will have to learn HTML and maybe CSS if you want to change the look of your forum so here we go. (note: there is no edits, sub portals aren't added.)
Here is my full overall_header.tpl of a freshly installed 'subsilver'.
Spoiler:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<!-- link rel="stylesheet" href="templates/myff_templatetester3/{T_HEAD_STYLESHEET}" type="text/css" -->
<style type="text/css">
<!--
/*
The original subSilver Theme for phpBB version 2+
Created by subBlue design
http://www.subBlue.com
NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
theme administration centre. When you have finalised your style you could cut the final CSS code
and place it in an external file, deleting this section to save bandwidth.
*/
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: {T_BODY_BGCOLOR};
scrollbar-face-color: {T_TR_COLOR2};
scrollbar-highlight-color: {T_TD_COLOR2};
scrollbar-shadow-color: {T_TR_COLOR2};
scrollbar-3dlight-color: {T_TR_COLOR3};
scrollbar-arrow-color: {T_BODY_LINK};
scrollbar-track-color: {T_TR_COLOR1};
scrollbar-darkshadow-color: {T_TH_COLOR1};
}
/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
hr { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}
/* This is the border line & background colour round the entire page */
.bodyline { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }
/* This is the outline round the main forum tables */
.forumline { background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }
/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: {T_TD_COLOR2};
background-image: url(templates/myff_templatetester3/images/{T_TH_CLASS3});
background-repeat: repeat-y;
}
/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(templates/myff_templatetester3/images/{T_TH_CLASS2});
}
/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}
/* The largest text used in the index page title and toptic title etc. */
.maintitle {
font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu { text-decoration: none; color : {T_BODY_LINK}; }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }
/* Forum category titles */
.cattitle { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle { text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink { text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav { text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover { text-decoration: underline; }
/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
/* Location, number of posts, post date etc */
.postdetails { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }
/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link { text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}
/* Form elements */
input,textarea, select {
color : {T_BODY_TEXT};
font: normal {T_FONTSIZE2}px {T_FONTFACE1};
border-color : {T_BODY_TEXT};
}
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : {T_TD_COLOR2};
}
input { text-indent : 2px; }
/* The buttons used for bbCode styling in message post */
input.button {
background-color : {T_TR_COLOR1};
color : {T_BODY_TEXT};
font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}
/* The main submit button option */
input.mainoption {
background-color : {T_TD_COLOR1};
font-weight : bold;
}
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }
/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/myff_templatetester3/formIE.css");
-->
</style>
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Quite lengthy yes, but I will make it simple to understand
First line of code.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
That is called a "Doctype" or document type. As you know most web pages are created using HTML, but did you know their are other variants?
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
The transitional is what most templates use. Basic html. However their is some html code that was 'depreciated' meaning no longer used. That version contains them.
Strict is basically the same except it doesn't include depreciated elements
Frame set is for sites that use frames. The adminstrational control panel is an example of a page that uses frames.
XHTML 1 Is the 'new' html. Which is a lot cleaner version of html and soon will be standard.
It has the same variants as above
Also the doctype is needed when you validate HTML using a validator.
Next line
Code:
<html dir="{S_CONTENT_DIRECTION}">
Basically means 'start of the html' document. the dir= stuff I really don't know but you shouldn't ever be needing to edit it, so leave it the way it is.
Code:
<head>
The head of an html document. Their is code that is excecuted in the head part, but you don't see the actually outcome of the code on the page. Unless its javascript. This is also the place to add "META" tags.
Are Meta tags, sorry I couldn't explain more, but you shouldn't need to edit that.
Code:
<title>{SITENAME} :: {PAGE_TITLE}</title>
Is the text that shows at the top of your web browser window.
Page name- Internet Explorer [_][[]][X]
A rough drawing but you should understand.
Now a long line of code!
Spoiler:
Code:
<!-- link rel="stylesheet" href="templates/myff_templatetester3/{T_HEAD_STYLESHEET}" type="text/css" -->
<style type="text/css">
<!--
/*
The original subSilver Theme for phpBB version 2+
Created by subBlue design
http://www.subBlue.com
NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
theme administration centre. When you have finalised your style you could cut the final CSS code
and place it in an external file, deleting this section to save bandwidth.
*/
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: {T_BODY_BGCOLOR};
scrollbar-face-color: {T_TR_COLOR2};
scrollbar-highlight-color: {T_TD_COLOR2};
scrollbar-shadow-color: {T_TR_COLOR2};
scrollbar-3dlight-color: {T_TR_COLOR3};
scrollbar-arrow-color: {T_BODY_LINK};
scrollbar-track-color: {T_TR_COLOR1};
scrollbar-darkshadow-color: {T_TH_COLOR1};
}
/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
hr { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}
/* This is the border line & background colour round the entire page */
.bodyline { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }
/* This is the outline round the main forum tables */
.forumline { background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }
/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: {T_TD_COLOR2};
background-image: url(templates/myff_templatetester3/images/{T_TH_CLASS3});
background-repeat: repeat-y;
}
/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(templates/myff_templatetester3/images/{T_TH_CLASS2});
}
/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}
/* The largest text used in the index page title and toptic title etc. */
.maintitle {
font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu { text-decoration: none; color : {T_BODY_LINK}; }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }
/* Forum category titles */
.cattitle { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle { text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink { text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav { text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover { text-decoration: underline; }
/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
/* Location, number of posts, post date etc */
.postdetails { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }
/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link { text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}
/* Form elements */
input,textarea, select {
color : {T_BODY_TEXT};
font: normal {T_FONTSIZE2}px {T_FONTFACE1};
border-color : {T_BODY_TEXT};
}
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : {T_TD_COLOR2};
}
input { text-indent : 2px; }
/* The buttons used for bbCode styling in message post */
input.button {
background-color : {T_TR_COLOR1};
color : {T_BODY_TEXT};
font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}
/* The main submit button option */
input.mainoption {
background-color : {T_TD_COLOR1};
font-weight : bold;
}
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }
/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/myff_templatetester3/formIE.css");
-->
</style>
That is CSS or Cascading Style Sheets. That simple controls how your forum looks.
Code:
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
That is Javascript. You know those usually annoying alert boxes that show up sometimes on web pages? That is what tells the browser to do so. Except that code is above is set to only execute if you have a private message.
Code:
</head>
The end of the head part of the web page. Now time for the part that you see.
That controls the links, the logo, and displays the site description and site name.
That is mostly table driven and if you know HTML tables that should be easy to edit. If you don't, don't worry forums are about posts and topics and not cosmetic features.
and at the end
Code:
<br />
Which is a line break, example a new line of the page.
FAQ
What does HTML and XHTML stand for?
HTML- Hyper Text Markup Language
XHTML- eXtensible Hyper Text Markup Language
Is their a difference between <br> and <br />
Nope, they do the same except <br> is HTML and <br /> is XHTML.
What are these
Code:
{CODEHERE}
thingies? No HTML guide I seen has them!
Those are called 'Macros". The web is devided between 'server' side and 'client' (you) side. Before you view the page, the server scans that page and when it sees those Macros, it searches a database and replaces those with HTML code.
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
