1. Structure/layout explanation
On image below you can see example page with some areas highlighted.
Layout consists of 3 columns - left (marked as 1), central (2), and right (3). All columns have liquid width. Widths are 18%-64%-17%. But 18+64+17=99%, isn't it? Well, 17% set to fix some strange behavior in IE6, and when rendering on all browsers, it looks like 18% width, so left and right columns have exactly the same width.
Left and right columns are intended to hold navigation menus, and not only default Navigation and Feeds (see "Misc. ideas and tips on customization").
The central column is the main column with content. It consist of 4 parts: Header (2.1), Intro (2.2), Content (2.3) and Footer (it's not on the image, but it's really simple and doesn't need much explanation).
Header works as.. header. Mainly it's intended to hold site name and slogan.
Intro section is most sophisticated part of Roowhaline layout. It can hold site sections description, exerpts of articles, TOC (index), and much much more (see "Intro" section's logic explanation).
Content holds the main content and includes central column (2.3.1) and right column (sidebar, 2.3.2).
Footer is just footer, you can place there copyright, dublicate of navigation menu or whatever.
Table with info about horisontal liquidness of layout:
| Liquidness - width | |||
|---|---|---|---|
| Area | Fixed or Liquid width? | Width | Max. width |
| 1 | Liquid | 18% | No limit |
| 2 | Liquid | 64% | Up to ~1700px (you'll need to make background images wider to extend this limit) |
| 2.1 | Liquid | 100% of 2 | Same as 2 |
| 2.2 | Liquid | 100% of 2 | Same as 2 |
| 2.3 | Liquid | 100% of 2 | No limit |
| 2.3.1 | Liquid | 100%-280px of 2 | No limit |
| 2.3.2 | Fixed | 280px | 280px |
| 2.4 (footer) | Liquid | 100% of 2 | Same as 2 |
| 3 | Liquid | 17% | No limit |
Same info about vertical liquidness:
| Liquidness - height | |||
|---|---|---|---|
| Area | Fixed or Liquid height? | Height | Max. height |
| 1 | Liquid | Not set | No limit |
| 2 | Liquid | Not set | No limit |
| 2.1 | Fixed | 97px | 97px |
| 2.2 | Liquid | Not set | Up to 1000px (you'll need to make background images higher to extend this limit) |
| 2.3 | Liquid | Not set | No limit |
| 2.3.1 | Liquid | Not set | No limit |
| 2.3.2 | Liquid | Not set | No limit |
| 2.4 (footer) | Fixed | 75px | 75px |
| 3 | Liquid | Not set | No limit |
2. XHTML and CSS structure explanation
XHTML structure is close to layout structure. Below you can take a look at image with "core" code, without any TXP tags. You can also take a closer look at "core" code in "/CG_core-code.txt" file.
Area marked as "1" is common DTD, metas, etc.
Area 2 is our left column. It's name is "primary-menu" (and it's really a primary menu - take a look at layout image.)
Area 3 is our central column. It's name is "wrapper".
Area 4 is our right column. It's name is "secondary-menu".
Area 5 is just a html and body closing tags.
Let's take a closer look at Wrapper.
Just as layout, it consists of 4 parts: Header ("header", 3.1), Intro ("intro", 3.2), Content ("content-wrapper", 3.3) and Footer ("footer" 3.4)
Header and Footer includes empty divs with class "rounder" - they are used to make layout liquid. Intro includes same empty div with id "intro-inner-wrapper". Actually, this also should be same div as within Header and Footer, but i've figured it out just now, so i doubt i'll have time to change it. Anyway, it isn't matters, really. Below Intro you may notice div with id "poddon". It's serves to make intro section liquid not only horizontally, but also vertically.
In Content-wrapper there is one more wrapper with id "container", it's used to make layout liquid. Inside this container are divs with ids "content" and "sidebar" placed, they're used as central and right columns in our content area (see layout image).
CSS structure is simple: first goes very common settings, like paragraph, heading and link styling, just after them goes the layout part, where all sections widths, backgrounds and other properties are set, next there are rules for elements in layout sections, and for the last we have misc settings.
3. "Intro" section's logic explanation
Intro section is a nice place to show brief information about article, or section, or whatever you want. It's build upon conditional tags. Below you can take a look of comments for it's logic.
<!-- first, we'll check if it's an individual article page -->
<txp:if_individual_article>
<!-- if yes, we'll place article image, title, breadcrumbs and show article's category -->
<txp:article_image />
<h2><txp:title /></h2>
<p><txp:breadcrumb label="Home" title="1" link="y" wraptag="" /> » <txp:title /> <br/>
Article category is <txp:category1 class="category" link="1" title="1" wraptag="" /> <br/>
Posted <txp:posted /></p>
<!-- if there are exerpt - show it -->
<txp:if_excerpt>
<br class="clear" />
<txp:excerpt />
</txp:if_excerpt>
<!-- and place article index (it's builds automatically, just add ids to desired headings in article (like .h3(#a). Check cbs_article_index plugin documentation)) -->
<txp:cbs_article_index label="Contents:" labeltag="p" wraptag="ol" break="li" />
<!-- this is what we'll do if it's not an individual page -->
<txp:else />
<!-- if it's an"search" section (all search results are here) - put image and basic description -->
<txp:if_section name="search">
<img src="<txp:site_url />/images/roowhaline/roomy-1.jpg" alt="Mushroom Photo" />
<h2>Search results</h2>
<p>Below you can see the results as an exerpts of pages content.</p>
</txp:if_section>
<!-- if it's an "default" section (main page and categories) -->
<txp:if_section name="default">
<!-- if it's a category - put image and its name -->
<txp:if_category>
<img src="<txp:site_url />/images/roowhaline/roomy-1.jpg" alt="Mushroom Photo" />
<h2>Category: <txp:category title="1" /></h2>
<!-- if it is main page - put image, and brief site description -->
</txp:else />
<img src="<txp:site_url />/images/roowhaline/roomy-1.jpg" alt="Mushroom Photo" />
<h2>About this template</h2>
<p>Hello everyone. My name is Dmitriy, I’m an amateur freelance XHTML-coder from Russia, and this is my first-ever template for Textpattern. Roowhaline is clean and accurate (for my taste) template, and pretty suitable for people who don’t like all whose colorish eye-killing designs. Template is full XHTML 1.0 Transition and CSS 2 compiliant, very flexible and well documented.
Hope you’ll enjoy this template :0)</p>
</txp:if_category>
</txp:if_section>
<!-- if it's an "about" section - put image and basic description -->
<txp:if_section name="about">
<img src="<txp:site_url />/images/roowhaline/roomy-1.jpg" alt="Mushroom Photo" />
<h2>About</h2>
<p>Description goes here</p>
</txp:if_section>
<!-- if it's an "articles" section - put image and basic description -->
<txp:if_section name="articles">
<img src="<txp:site_url />/images/roowhaline/roomy-1.jpg" alt="Mushroom Photo" />
<h2>Articles</h2>
<p>Description goes here</p>
</txp:if_section>
<!-- if it's an "archive" section - put image and basic description -->
<txp:if_section name="archive">
<img src="<txp:site_url />/images/roowhaline/roomy-1.jpg" alt="Mushroom Photo" />
<h2>Archive</h2>
<p>Description goes here</p>
</txp:if_section>
<!-- if it's an "contact" section - put image and basic description -->
<txp:if_section name="contact">
<img src="<txp:site_url />/images/roowhaline/roomy-1.jpg" alt="Mushroom Photo" />
<h2>Contact</h2>
<p>Description goes here</p>
</txp:if_section>
</txp:if_individual_article>You can customize it as you like, place different images for different sections, different descriptions, you also can put different things for categories (here is how to do it: http://textbook.textpattern.net/wiki/index.php?title=Txp:if_category), and many more things - depending of your imagination.
4. "Content" section's logic explanation
Content's section logic is close to intro's one.
<!-- if it's an "search" section - put search results -->
<txp:if_section name="search">
<h3>Search results</h3>
<ul>
<txp:article form="search_results" />
</ul>
<p><txp:search_result_count />.</p>
</txp:if_section>
<!-- if it's an individual article - put it's body -->
<txp:if_individual_article>
<txp:article />
</txp:if_individual_article>
<!-- if it's an "archive" section - show archive of articles -->
<txp:if_section name="archive">
<txp:article_custom limit=99999 section="articles" />
</txp:if_section>
<!-- if it's an "contact" section - put contact form -->
<txp:if_section name="contact">
<h3>Contact</h3>
<p>You can send me a message through the following contact form.</p>
<txp:zem_contact to="info@webgrower.ru" label="" subject="Regarding your blog">
<p><txp:zem_contact_text label="Name:" break="" /></p>
<p><txp:zem_contact_email label="E-Mail:" break="" /></p>
<p><txp:zem_contact_textarea cols="25" rows="5" label="Message:" break="" /></p>
<txp:zem_contact_submit />
</txp:zem_contact>
</txp:if_section>
<!-- if it's an "default" section - show 5 latest artilcles and links to older/newer ones -->
<txp:if_section name="default">
<txp:article limit="5" />
<p>
<txp:older>« Older</txp:older>
<txp:newer>Newer »</txp:newer>
</p>
</txp:if_section>
<!-- if it's an "articles" section - show 5 latest artilcles and links to older/newer ones -->
<txp:if_section name="articles">
<txp:article limit="5" />
<p>
<txp:older>« Older</txp:older>
<txp:newer>Newer »</txp:newer>
</p>
</txp:if_section>Again, you can customize it like you wish. Don't forget to change the e-mail.
5. "defaul" form's logic explanation
This one is for showing articles in different way, depending on what section we are in.
<!-- if it's an "archive" section - show archive -->
<txp:if_section name="archive">
<ul>
<li>
<txp:if_different><h3><txp:posted format="%Y" /></h3>
</txp:if_different>
</li>
<li>
<txp:if_different><h4><txp:posted format="%B" /></h4>
</txp:if_different>
</li>
<li>
<txp:posted format="%d"/>: <txp:permlink><txp:title /></txp:permlink>
</li>
</ul>
</txp:else />
<!-- if not, we'll start outputting article with wrapping div -->
<div class="entry">
<!-- if it's an individual article page, we won't place here anything -->
<txp:if_individual_article>
<!-- if not, place title and stats -->
<txp:else />
<h3 class="title"><txp:permlink><txp:title /></txp:permlink>
<txp:category1 class="category" link="1" title="1" wraptag="span" /></h3>
<p class="stats"><txp:posted /><br/>
<txp:if_comments_allowed>
<txp:comments_invite showcount="1" />
<txp:else />
<p><txp:text item="comments_closed" /></p>
</txp:if_comments_allowed>
</p>
</txp:if_individual_article>
<br class="clear" />
<!-- now place article body, if we're on individual page -->
<txp:if_individual_article>
<txp:body />
<txp:else />
<!-- or place exerpt and link to full version, if we're not -->
<txp:permlink><txp:article_image class="article_image" /></txp:permlink>
<txp:if_excerpt>
<txp:excerpt />
<p class="continue_reading"><txp:permlink>Continue reading »</txp:permlink></p>
<txp:else />
<!-- if there are no exerpt, place article body -->
<txp:body />
</txp:if_excerpt>
</txp:if_individual_article>
<hr />
</div>
</txp:if_section>6. How to add new articles (tips)
Here is some tips that may be useful for you:
- If arcticle is long, add exerpt.
- If there are few to many headers, add id to them - to create TOC.
- Add some image to article - they're looking nice in intro section and also adding colors to maybe "too serious" for someones taste Roowhaline's layout.
- Try make your article images with 2-3px rounded border. Intended border color is #f1f1f1.
- Keep exerpts short.
- Use H3-H6 in article body.
7. How to add new sections
Go to admin panel, Presentation - Sections, and create new section with desired name. Now move to Pages. In default template find this string:
<txp:ako_nav name="Home,About,Articles,Archive,Contact" url="/,/about,/articles,/archive,/contact" headon="0" divon="0" />Change it like this:
<txp:ako_nav name="Home,About,Articles,Archive,Contact,NEW_SECTION" url="/,/about,/articles,/archive,/contact,/NEW_SECTION" headon="0" divon="0" />NEW_SECTION is of course the name of your just created section. If you don't use CURLs, urls should be different (check plugin and TXP documentation, as well as Roowhaline's Installation Guide).
Also check out previously explained logic of layout sections and form, and change it as you wish to handle new section correctly.
8. Ideas and tips on customization
You can extend your primary navigation with additional menus, like Categories navigation. To do this, simply add such code after sections navigation:
<h1>Categories</h1>
<ul>
<li><a href="#">Hope for the future</a></li>
<li><a href="#">Meaningful labor</a></li>
<li><a href="#">Reciprocal affection</a></li>
</ul>It will look like this (it's screen from coded page, not psd's one ):
If you don't like sidebar, you can remove it - this page is good example. Check page code to figure out how it was done.
Code styling isn't included in default style. You can use your own style, or take it from this page code (Note: other styles are non-ordered and not the same as Roowhaline defaults). I prefer to use some scripts with syntax highlight possibilities (ask google about them).
You can also add menus to the right column, in this case you'll need to edit a CSS a little bit to adjust menu's width.
You can customize color scheme with included in distribution package PSD file.
And don't forget about metas at the very top of XHTML code. And by the way, site name can be changed in page template, not in the site preferences.
Hope you understood essentials of this template and now able to customize it as you wish. Have fun :)
Feel free to contact me regarding any possible bugs in template via e-mail: info@webgrower.ru.
P.S. I'm very sorry for my basic english.
