Duck and Cover Forum Index

  Duck and Cover  •  FAQ  •  Search  •  Memberlist  •  Usergroups   •  Register  •  Profile  •  Log in to check your private messages  •  Log in

 Support DAC!
 Making your own template for DAC View next topic
View previous topic
Post new topicThis topic is locked: you cannot edit posts or make replies.
Author Message
DarkUnderlord
Paragon
Paragon


Joined: 01 May 2002
Posts: 2371
Location: I've got a problem with my Goggomobil. Goggo-mobil. G-O-G-G-O. Yeah, 1954. Yeah, no not the Dart.

PostPosted: Thu May 19, 2005 8:41 am Reply with quoteBack to top

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:
<!-- BEGIN news_headlines -->
<table align="left" width="100%">
   <tr>
      <td align="left">
         <img src="{news_headlines.HEADLINE_HEADING}" alt="Headlines" /><br />
         <img src="{TEMPLATE_URL}images/divider.gif" width="100%" height="7" />
      </td>
   </tr>
   <tr>
      <td align="left">
         <!-- BEGIN headline_date -->
         <ul class="headline">
            {news_headlines.headline_date.DATE}
            <!-- BEGIN headline_item -->
            <li><a href="{news_headlines.headline_date.headline_item.HEADLINE_URL}">{news_headlines.headline_date.headline_item.HEADLINE}</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:

    Top Story: DAC Needs HTML Help!
    * DAC - Now with searchable news and changeable templates!

    Thu 19 May 2005
    * Hellgate: 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: 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.
View user's profileSend private messageVisit poster's website
Ashmo
Respected
Respected


Joined: 03 May 2002
Posts: 82
Location: Germany

PostPosted: Mon May 23, 2005 8:37 am Reply with quoteBack to top

DarkUnderlord wrote:
Code:
<!-- BEGIN news_headlines -->
<table align="left" width="100%">
   <tr>
      <td align="left">
         <img src="{news_headlines.HEADLINE_HEADING}" alt="Headlines" /><br />
         <img src="{TEMPLATE_URL}images/divider.gif" width="100%" height="7" />
      </td>
   </tr>
   <tr>
      <td align="left">
         <!-- BEGIN headline_date -->
         <ul class="headline">
            {news_headlines.headline_date.DATE}
            <!-- BEGIN headline_item -->
            <li><a href="{news_headlines.headline_date.headline_item.HEADLINE_URL}">{news_headlines.headline_date.headline_item.HEADLINE}</a></li>
            <!-- END headline_item -->
         </ul>
         <!-- END headline_date -->
      </td>
   </tr>
</table>
<!-- END news_headlines -->


:: cough hack vomit ::

Code:
<!-- BEGIN news_headlines -->
<div class="headlines">
<h2><img src="{news_headlines.HEADLINE_HEADING}" alt="Headlines" /></h2>
<dl>
<!-- BEGIN headline_date -->
<dt>{news_headlines.headline_date.DATE}</dt>
<dd><ul>
<!-- BEGIN headline_item -->
<li><a href="{news_headlines.headline_date.headline_item.HEADLINE_URL}">{news_headlines.headline_date.headline_item.HEADLINE}</a></li>
<!-- END headline_item -->
</ul></dd>
<!-- END headline_date -->
</dl>
</div>
<!-- END news_headlines -->

Any questions?
View user's profileSend private messageVisit poster's websiteAIM AddressYahoo MessengerMSN MessengerICQ Number
Kashluk
Grand MF
Grand MF


Joined: 15 May 2003
Posts: 7498

PostPosted: Mon May 23, 2005 9:38 am Reply with quoteBack to top

Umm, kewl. Like hell I'm going to do anything with that. You're gonna have to pay me tard
View user's profileSend private message
DarkUnderlord
Paragon
Paragon


Joined: 01 May 2002
Posts: 2371
Location: I've got a problem with my Goggomobil. Goggo-mobil. G-O-G-G-O. Yeah, 1954. Yeah, no not the Dart.

PostPosted: Tue May 24, 2005 10:39 am Reply with quoteBack to top

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.
View user's profileSend private messageVisit poster's website
Display posts from previous:      
Post new topicThis topic is locked: you cannot edit posts or make replies.


Jump to:  



View next topic
View previous topic
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


Powered by phpBB © 2001, 2005 phpBB Group