Create new template - Part 5 - Define the widgets

From TomatoCMS Documentation

In previous post, you know that layout of each page is configured by XML file. In this guide, I will show you how to choose a widget and configure the widgets in this XML file.

TomatoCMS uses 960 grid system framework to layout the page.Basically, our webpage have width of 960 pixel and will be split into 12 or 16 columns (or even 24 columns which is not a version used by TomatoCMS at this time of writing this post). TomatoCMS uses 12 columns layout.Set of columns is called as container. A full row which consist of 12 columns is called as full-row container

Now, image that the layout of homepage:

will be organized as follow:

Or more clear:

First, change the content of default layout (default.phtml) to indicate that the main content will be in 12-columns container:

// app/templates/sample/layouts/default.phtml

BEFORE:

...
<div>
   <?php echo $this->layoutLoader(); ?>
   <div class="clearfix"></div>
</div>
...

AFTER:

...
<div class="container_12">
   <?php echo $this->layoutLoader(); ?>
   <div class="clearfix"></div>
</div>
...

Next, create containers in home.xml:

// app/templates/sample/layouts/home.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE layout SYSTEM "http://schemas.tomatocms.com/dtd/layout.dtd">
<layout>
  <container cols="12">
  </container>
  <container cols="12">
  </container>
  <container cols="12">
    <container cols="4" position="first">
    </container>
    <container cols="4">
    </container>
    <container cols="4" position="last">
    </container>
  </container>
</layout>

In home.xml file above:

- container tag to create new container. The cols property defines the number of columns in container

- Containers can be nested. The final 12-columns container consist of three 4-columns containers.

- If a container is first container in children of parent container, set position="first".And set position="last" if you want container to be the last one in children of parent container.

Question is how to put sample HTML content to test our layout configurations?

Answer is use HTML widget from core module. This widget allows you to put static HTML content and show it on page. I will try to insert widget in the first 12-columns container:

// app/templates/sample/layouts/home.xml

...
<layout>
  <container cols="12">
    <widget module="core" name="html">
      <params>
        <param name="content">
          <value><![CDATA[Display slide of hotest aritcles]]></value>
        </param>
      </params>
    </widget>
  </container>
   ...
</layout>
...

Here it comes with widget configuration:

- Use widget tag to insert a widget

- module and name properties define module and name of widgets

- params list all params of widget- param tag define widget param. The name property define name of param

- value tag define the value of param. You can use CDATA for value of param.

NOTES:

- Widgets come from module. Each module may have a sub-directory named widget that consist all of widgets belonging to module.

- To view the list of widget's param, see the about.xml in widget directory.

For example, you can see the full list params of html widget in app/modules/core/widgets/html/about.xml file.

Refresh our homepage. Now, the result is as follow:

I decide to use this widget to show the sample content of container. Also, I use HTML widget to show content of "Company info" and "Contact info" widget:

// app/templates/sample/layouts/home.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE layout SYSTEM "http://schemas.tomatocms.com/dtd/layout.dtd">
<layout>
  <container cols="12">
    <widget module="core" name="html">
      <params>
        <param name="content">
          <value><![CDATA[Display slide of hotest aritcles]]></value>
        </param>
      </params>
    </widget>
  </container>
  <container cols="12">
    <widget module="core" name="html">
      <params>
        <param name="content">
          <value><![CDATA[Display 3 newest articles]]></value>
        </param>
      </params>
    </widget>
  </container>
  <container cols="12">
    <container cols="4" position="first">
      <widget module="core" name="html">
        <params>
          <param name="content">
            <value><![CDATA[
<div class="company">
   <h2>A Little Company Information !</h2>
   <img class="company_logo" src="/skin/sample/plus/images/demo/left.gif" alt="" />
   <p>Morbitincidunt maurisque eros molest nunc anteget sed vel lacus mus semper. 
      Anterdumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa. 
      Condimentumfelis et amet tellent quisquet a leo lacus nec augue</p>
   <p>Portortornec condimenterdum eget consectetuer condis.</p>
</div>                 
]]></value>
          </param>
        </params>
      </widget>
    </container>
    <container cols="4">
      <widget module="core" name="html">
        <params>
          <param name="content">
            <value><![CDATA[Show Flickr images]]></value>
          </param>
        </params>
      </widget>
    </container>
    <container cols="4" position="last">
      <widget module="core" name="html">
        <params>
          <param name="content">
            <value><![CDATA[
<div class="contact">
   <h2>Our Contact Details !</h2>
   <ul>
      <li>Company Name</li>
        <li>Street Name & Number</li>
        <li>Town</li>
        <li>Postcode/Zip</li>
        <li>Tel: xxxxx xxxxxxxxxx</li>
        <li>Fax: xxxxx xxxxxxxxxx</li>
        <li>Email: info@domain.com</li>
        <li class="last">LinkedIn: <a href="#">Company Profile</a></li>
   </ul>
</div>                 
]]></value>
          </param>
        </params>
      </widget>
    </container>
  </container>
</layout>

Now, our homepage looks like:

Add some style sheets in our CSS for company and contact info:

// skin/sample/plus/default.css

.company a, .contact a {
  color: #95AD19;
  background-color: #000000;
}
.company ul, .contact ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.company h2, .contact h2 {
  margin: 0 0 15px 0;
  padding: 0 0 8px 0;
  font-size: 18px;
  color: #CCCCCC;
  background-color: #000000;
  border-bottom: 1px dotted #CCCCCC;
  font-family: Georgia,"Times New Roman",Times,serif;
  font-weight: normal;
  line-height: normal;
}
.company {
  color: #FFFFFF;
  background-color: #000000;
  height: 310px;
  line-height: 1.6em;
}
.company .company_logo {
  float: left;
  margin: 0 8px 8px 0;
  clear: left;
  border: 1px solid #CCCCCC;
  padding: 5px;
  color: #FFFFFF;
  background-color: #000000;
}
.contact {
  color: #FFFFFF;
  background-color: #000000;
  height: 310px;
  padding: 0;
}
.contact li {
  margin: 0;
  padding: 0;
}

The result will be:

Add Flickr images

For simply, I also set HTML content to show some Flickr images:

// app/templates/sample/layouts/home.xml

BEFORE:

...
<widget module="core" name="html">
  <params>
    <param name="content">
      <value><![CDATA[Show Flickr images]]></value>
    </param>
  </params>
</widget>
...

AFTER:

...
<widget module="core" name="html">
  <params>
    <param name="content">
      <value><![CDATA[
<div class="flickr">        
   <h2>Flickr Images</h2>
   <ul>
      <li><a href="http://www.flickr.com/photos/47962180@N04/4393483631/sizes/sq/">
          <img src="http://farm5.static.flickr.com/4042/4393483631_e65360ce1a_s.jpg" /></a></li>
      <li><a href="http://www.flickr.com/photos/47962180@N04/4393483243/sizes/sq/">
          <img src="http://farm5.static.flickr.com/4040/4393483243_af2ec8b778_s.jpg" /></a></li>
      <li><a href="http://www.flickr.com/photos/47962180@N04/4393482841/sizes/sq/">
          <img src="http://farm5.static.flickr.com/4037/4393482841_d34596aec7_s.jpg" /></a></li>
      <li><a href="http://www.flickr.com/photos/47962180@N04/4393482353/sizes/sq/">
          <img src="http://farm5.static.flickr.com/4056/4393482353_284d433ec3_s.jpg" /></a></li>
      <li><a href="http://www.flickr.com/photos/47962180@N04/4393481845/sizes/sq/">
          <img src="http://farm5.static.flickr.com/4013/4393481845_934d1b4638_s.jpg" /></a></li>
      <li><a href="http://www.flickr.com/photos/47962180@N04/4394247530/sizes/sq/">
          <img src="http://farm5.static.flickr.com/4058/4394247530_6897bc8841_s.jpg" /></a></li>
   </ul>        
   <div class="clearfix"></div>
</div>
]]></value>
    </param>
  </params>
</widget>
...

Refresh our homepage to see the result:

Add styles for flickr div:

// skin/sample/plus/default.css

.flickr {
  color: #FFFFFF;
  background-color: #000000;
  height: 310px;
}
.flickr a {
  color: #95AD19;
  background-color: #000000;
}
.flickr ul {
  margin: 5px 0 0 0;
  padding: 0;
  list-style: none;
}
.flickr h2 {
  margin: 0 0 15px 0;
  padding: 0 0 8px 0;
  font-size: 18px;
  color: #CCCCCC;
  background-color: #000000;
  border-bottom: 1px dotted #CCCCCC;
  font-family: Georgia,"Times New Roman",Times,serif;
  font-weight: normal;
  line-height: normal;
}
.flickr li {
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
}
.flickr li img {
  width: 60px;
  height: 60px;
}

At this time, our homepage looks like:

But there's a white space between "Company", "Flickr" and "Contact" containers.

How to fix it?

The space is a distinct between two consecutive div defined by 960 Grid System. The width of distinct is 20px. The tip here is change the style for .company and .flickr:

// skin/sample/plus/default.css

...
.company {
  ...
  margin-right: -20px;
}
.flickr {
  ...
  margin-right: -20px;
}

The result is better:

At this time, all content are static HTML. In the next post, I will guide you how to show the dynamic data taken from database in first and second 12-columns containers.

Create new template - Part 5 - Define the widgets

From TomatoCMS Documentation

Question is how to put sample HTML content to test our layout configurations?

Add Flickr images

Views

Personal tools

TomatoCMS Sites:

Contact:

Search

Navigation

Toolbox