Categories > TinyButStrong general >

First time user, need page layout explanation please

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: Howman
Date: 2005-07-01
Time: 05:36

First time user, need page layout explanation please

I just installed TBS today.  Here is what I don't get...

My index page needs to have a header, a middle section containing the left nav, right nav and body, and a footer.  In index.php I want to load these in order, so I do this:

$TBS->LoadTemplate(TPLDIR . 'header.html') ;
$TBS->LoadTemplate(TPLDIR . 'middle.html') ;
$TBS->LoadTemplate(TPLDIR . 'footer.html') ;

Only the footer is displayed.

So then I read the documentation about blocks and subtemplates.  The problem is, I can't figure out which one to use.

Do I create a "shell" template which is a table that has tags for the header, left nav, body, right nav, footer, and then assign "blocks" to those sections?  Or do I assign "sub templates"?

How does the index.php file send data to templates within templates?

As you can see, I am a bit confused.  Please help.

Thanks,
Howard
By: StudioX
Date: 2005-07-01
Time: 06:07

Re: First time user, need page layout explanation please

Hi, I'm relatively new to it myself and that took some figuring for me too over the weekend.

I have all my code files on an SVN Server which you may use for viewing.

Of particular interest to you might be:

http://studio-x.homedns.org/websvn/filedetails.php?repname=SkinCube&path=%2Fskincube%2Ftrunk%2Ftemplates%2Fdefault%2Faccess%2Flogin.tpl.php&rev=0&sc=0

Hope it helps.
By: StudioX
Date: 2005-07-01
Time: 06:09

Re: First time user, need page layout explanation please

Forgot to add, that renders what you will see at http://studio-x.homedns.org/admin.php
By: RwD
Date: 2005-07-01
Time: 08:41

Re: First time user, need page layout explanation please

You can also add subtemplates from inside a template. Your problem is that when you call LoadTemplate this overwrites whatever is in the Source attribute. So when you load the footer last it is the only thing displaying.

The wensite I made for the company I work for has this main template (cleaned for this example):
<html>

<head>
    <title>Page title</title>
</head>

<body>
[onload;file=[var.tmpl.header;noerr];noerr]

[onload;file=[var.tmpl.section.main;noerr];noerr]

[onload;file=[var.tmpl.footer;noerr];noerr]
</body>

</html>

"file=" points to the templates it needs to include. (I basically always use the same header and footer, but have the option to change them as well per page)

offtopic:
You say you have this shell template which has the table with the header main and footer part. Nowadays developers turn away from using tables for design purposes. I mainly use div, span en ul elements nowadays and put them in the correct place using css. works on 99,99% of the people visiting my websites and when the stylesheet fails the remaining 0,01% see the website plain text. Whereas when the stylesheet fails and you are using tables the website looks alike it should but very odd. Tables are meant for table data like a timetable or something like this. The adcantage of using elements what they where designed for is that your code becomes much easier to read (and much smaller), easier to change, easier to comprehend and easier to style. (I can style my latest website just as easily as you can style www.csszengarden.com (try it))

(Ok I was offtopic, but I hope I might have helped you ;))
By: Howman
Date: 2005-07-01
Time: 15:26

Re: First time user, need page layout explanation please

Thanks so much for your replies!

RwD, it is ironic that you speak about page layout and tables vs. css.  I was researching it this week.  You answered my question without me even asking it!  I was at www.csszengarden.com and saw the cool things you can do with css styles.  I need to learn more about this.

Regarding TBS, if your site has some pages that are five section (header, left nav, middle, right nav, footer), some pages that are four section (no right nav) and some pages that are three section (header, middle, footer for printer friendly view), would you create a different template for each "layout type".  Or would you just create one template for five sections and leave the unneeded sections blank?

Thanks again for the replies.  Your help is greatly appreciated.

Howard
By: Skrol29
Date: 2005-07-01
Time: 16:40

Re: First time user, need page layout explanation please

The RwD answer is the smarter way to perform page headers and footers because it enables to move them inside the global template and also because it fits to the Template System spirit.

Just for information, TBS gives also the possibility to load a template by concatenation:
$TBS->LoadTemplate(TPLDIR . 'header.html') ; // replace
$TBS->LoadTemplate(TPLDIR . 'middle.html','+') ; // concatenation
$TBS->LoadTemplate(TPLDIR . 'footer.html','+') ; // concatenation
By: george
Date: 2005-07-03
Time: 17:35

Re: First time user, need page layout explanation please

"Regarding TBS, if your site has some pages that are five section (header, left nav, middle, right nav, footer), some pages that are four section (no right nav) and some pages that are three section (header, middle, footer for printer friendly view), would you create a different template for each "layout type".  Or would you just create one template for five sections and leave the unneeded sections blank?"

The right approach is a different template. Just don't include the section that you don't want.
By: RwD
Date: 2005-07-05
Time: 12:35

Re: First time user, need page layout explanation please

Euhm, I actually did the exact thing you are asking for with the different sections...

I just left out the right column. What I also did was making the php aware that the right column was missing before the Show command so a different css file is included making the middle column wider. The different css file simply ONLY declares a wider middle section and includes the original css at the top. So when something else changes in the original css it is automatically included in the wider version css; it includes the original css:
@import "default.css";

#mainContentContainer {
    width: 596px;
}

---
The printer friendly version I also used css for since the logical structure of my html makes me able to do ANYTHING when it comes to positioning and display in general. You can do this like this:
<link rel="stylesheet" href="normal.css" type="text/css">
<link rel="stylesheet" href="print.css" type="text/css" media="print">