Create new template - Part 4 - Use XML files to define layout of page

From TomatoCMS Documentation

TomatoCMS uses XML files to configure the layout of page. In this post, I will show you how to configure layout for a page manually.

In default template, we created XML files which configure layout of all front-end pages.

See the application/templates/default/layouts and you'll see 7 XML files:

- home.xml: Configure layout of homepage as http://demo.tomatocms.com/

- multimedia_file_details.xml: Configure layout of page that show details of photo, clip as http://demo.tomatocms.com/multimedia/file/details/12/

- multimedia_set_details.xml: Configure layout of page that show details of photo, clip set as http://demo.tomatocms.com/multimedia/set/details/2/

- news_article_category.xml: Configure layout of page that list of article in certain category as http://demo.tomatocms.com/news/category/view/1/

- news_article_details.xml: Configure layout of page that show details of article as http://demo.tomatocms.com/news/article/view/1/1/

- news_article_search.xml: Configure layout of page that show result of article searching as http://demo.tomatocms.com/news/search?q=Guide

- tag_tag_details.xml: Configure layout of page that list of items tagged by same tag as http://demo.tomatocms.com/tag/details/news_tag_article/4/

Back to our sample template, create home.xml file in application/templates/sample/layouts to define the layout of homepage.

// application/templates/sample/layouts/home.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE layout SYSTEM "http://schemas.tomatocms.com/dtd/layout.dtd">
<layout>
</layout>

Go to http://localhost/ and you'll see that our homepage loads header and footer successfully:

With basic knowledge of HTML and CSS, you can easily insert static content and make styles for header and footer: // application/templates/sample/layouts/_header.phtml:

With basic knowledge of HTML and CSS, you can easily insert static content and make styles for header and footer:

// application/templates/sample/layouts/_header.phtml

<div id="logo">
  <h1><a href="#">+Plus</a></h1>
  <p></p>
</div>

// app/templates/sample/layouts/_footer.phtml

<p>Copyright © 2010 - All Rights Reserved - <a href="#">Domain Name</a></p>
<div class="clearfix"></div>

// skin/sample/plus/default.css

Reset styles:

body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: verdana, Arial, Helvetica, sans-serif;
  color: #333333;
  background-color: #FFFFFF;
}
img {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}
a {
  color: #B2C629;
  background-color: #FFFFFF;
  outline: none;
  text-decoration: none;
}
h1 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: normal;
  line-height: normal;
  font-family: Georgia, "Times New Roman", Times, serif;
}

Styles for header:

#header {
  height: 55px;
  color: #CCCCCC;
  background-color: #000000;
  padding: 20px 0;
}
#header #logo {
  display: block;
  float: left;
  width: 300px;
  overflow: hidden;
}
#header #logo h1 {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-size: 36px;
  text-transform: uppercase;
}
#header h1 a {
  color: #B2C629;
  background-color: #000000;
}

And styles for footer:

#footer {
  padding: 10px 0;
}
#footer p {
  margin: 0;
  padding: 0;
}
#footer, #footer a {
  color: #333333;
  background-color: #95AD19;
}

Refresh our homepage (http://localhost) and you'll see result: