Making your own template for DAC

Make dumb suggestions so we can ignore them. I'm lovin' it.
Locked
User avatar
DarkUnderlord
Paragon
Paragon
Posts: 2372
Joined: Wed May 01, 2002 7:21 pm
Location: I've got a problem with my Goggomobil. Goggo-mobil. G-O-G-G-O. Yeah, 1954. Yeah, no not the Dart.
Contact:

Making your own template for DAC

Post by DarkUnderlord »

If you've read the news or seen the "Change Template" option at the bottom of the menu on the main page (in the "Classic" template anyway at least), then you'll know that DAC now lets you change the look of the main page. If there's a nifty idea you've always thought would make a great look for Duck and Cover, you can now have a go.

The template system runs on phpBB 2.x own template system which means if you're familiar with phpBB templating, then you should be able to whip up a DAC style fairly easily. If you aren't familiar with that system, there's no need to worry as making a template is remarkably simple.


main.tpl

The first thing you need to do is download main.tpl. Main.tpl is the "master file" that all content on the site is plugged into. Main.tpl is also the only file you should ever really need to change in order to make your own template (there are a bunch of other .tpl files which do everything from show news items to list content but main.tpl is what matters).

Now, if you've had a look at main.tpl, you'll see it's the layout for the DAC "classic" template. Among the standard (and rather poorly written) HTML you'll also see a bunch of stuff inbetween curly braces {} as well as some BEGIN and END things that are in comments. THESE ARE IMPORTANT! They are explained below.


Curly Braces

Stuff inbetween curly braces is replaced with stuff generated by the code. "{DC_IDENTIFIER}" becomes whatever we set it to in the code for example (which in this case, is simply the URL of the page). "{TEMPLATE_URL}" becomes the URL to your template which makes it easy to include images (though in reality, you could just as easily replace it with "/system/templates/mytemplate/"}. One important thing to mention (apart from the fact that you need to keep everything inbetween curly braces in the code) is that "{CONTENT}" is replaced with whatever the content is of the page the visitor is viewing. It could be a news item, it could be an administration page, it could the content listing.

So instead of having a separate header and footer, I decided to go with this way because I could and because it worked nicely (there are pro's and con's). Basically it makes it easier to deal with tables and what-not when it's NOT broken up into multiple files.


HTML Comments

For the code to work for things such as say, displaying news headlines, it needs a way of being able to display as many headlines as are determined by the code. Take a look at the example below:

Code: Select all

<!-- BEGIN news_headlines -->
<table align="left" width="100%">
	<tr>
		<td align="left">
			<img src="&#123;news_headlines.HEADLINE_HEADING&#125;" alt="Headlines" /><br />
			<img src="&#123;TEMPLATE_URL&#125;images/divider.gif" width="100%" height="7" />
		</td>
	</tr>
	<tr>
		<td align="left">
			<!-- BEGIN headline_date -->
			<ul class="headline">
				&#123;news_headlines.headline_date.DATE&#125;
				<!-- BEGIN headline_item -->
				<li><a href="&#123;news_headlines.headline_date.headline_item.HEADLINE_URL&#125;">&#123;news_headlines.headline_date.headline_item.HEADLINE&#125;</a></li>
				<!-- END headline_item -->
			</ul> 
			<!-- END headline_date -->
		</td>
	</tr>
</table> 
<!-- END news_headlines -->
This is the "news_headlines" block and is what determines how the news headlines are displayed. If news headlines are turned on (we can turn them off - yay to us), this block is processed. Everything between BEGIN news_headlines and END news_headlines is processed.

You'll notice that within that block however, there are two others called "headline_date" and within that "headline_item". "headline_item" is how the actual individual headline itself is displayed. In this template, you can see that it is as a HTML list. If you wanted, you could change that into a table or God knows what else you might want to turn it into.

"headline_date" is the date of the headlines for that day which as you can see here, are simply being shown as text (with the class="headline" in the CSS determining the colour and what-not). Overall, you can see that all of this appears within a table, just because that's the way it worked for formatting.

For example this code block when processed by the PHP code will turn into something like this:

Code: Select all

    Top Story&#58; DAC Needs HTML Help! 
    * DAC - Now with searchable news and changeable templates!

    Thu 19 May 2005 
    * Hellgate&#58; London E3 interview
    * Metalheart for June

    Wed 18 May 2005 
    * S.T.A.L.K.E.R. Q&A With Yavorsky

    Tue 17 May 2005 
    * DAC Needs You...again
    * Fallout 3 ISN'T at E3
    * Bethesda splash out on voice actors
    * A bunch of Hellgate&#58; London screenshots
    * Fallout 3 at E3

    Mon 16 May 2005 
    * Read about 14 minutes of Land of the Dead
    * And there was much rejoicing!
Your best bet to understand it properly is to have a muck around with it. Design a style and then see how you go with the code blocks. If you mess it up, you'll soon see the result.


CSS File

Every template also needs a .css file. The .css file (if you don't know what one is, google CSS or Cascading Style Sheets) must be named the same as the template ditectory (So if your tempate is system/templates/tubgirl then the css file has to be named tubgirl.css - this is only really a matter for the person uploading your template though).

If you have questions, ask.
ImageImageImageImageImageImageImage
User avatar
Ashmo
Respected
Respected
Posts: 82
Joined: Fri May 03, 2002 3:06 am
Location: Germany
Contact:

Re: Making your own template for DAC

Post by Ashmo »

DarkUnderlord wrote:

Code: Select all

<!-- BEGIN news_headlines -->
<table align="left" width="100%">
	<tr>
		<td align="left">
			<img src="&#123;news_headlines.HEADLINE_HEADING&#125;" alt="Headlines" /><br />
			<img src="&#123;TEMPLATE_URL&#125;images/divider.gif" width="100%" height="7" />
		</td>
	</tr>
	<tr>
		<td align="left">
			<!-- BEGIN headline_date -->
			<ul class="headline">
				&#123;news_headlines.headline_date.DATE&#125;
				<!-- BEGIN headline_item -->
				<li><a href="&#123;news_headlines.headline_date.headline_item.HEADLINE_URL&#125;">&#123;news_headlines.headline_date.headline_item.HEADLINE&#125;</a></li>
				<!-- END headline_item -->
			</ul> 
			<!-- END headline_date -->
		</td>
	</tr>
</table> 
<!-- END news_headlines -->
:: cough hack vomit ::

Code: Select all

<!-- BEGIN news_headlines -->
<div class="headlines">
<h2><img src="&#123;news_headlines.HEADLINE_HEADING&#125;" alt="Headlines" /></h2>
<dl>
<!-- BEGIN headline_date -->
<dt>&#123;news_headlines.headline_date.DATE&#125;</dt>
<dd><ul>
<!-- BEGIN headline_item -->
<li><a href="&#123;news_headlines.headline_date.headline_item.HEADLINE_URL&#125;">&#123;news_headlines.headline_date.headline_item.HEADLINE&#125;</a></li>
<!-- END headline_item -->
</ul></dd>
<!-- END headline_date -->
</dl>
</div>
<!-- END news_headlines -->
Any questions?
Kashluk

Post by Kashluk »

Umm, kewl. Like hell I'm going to do anything with that. You're gonna have to pay me D:
User avatar
DarkUnderlord
Paragon
Paragon
Posts: 2372
Joined: Wed May 01, 2002 7:21 pm
Location: I've got a problem with my Goggomobil. Goggo-mobil. G-O-G-G-O. Yeah, 1954. Yeah, no not the Dart.
Contact:

Re: Making your own template for DAC

Post by DarkUnderlord »

Ashmo wrote:Any questions?
Yeah, out of the poll, picture of the week, navigation menu, hot topics, latest content and just about everything else that is buried knee deep in a table, why did you only do the news headlines? That shows a considerable lack of effort on your part.
ImageImageImageImageImageImageImage
Our Host!
Locked