Create new template - Part 7 - Define CSS class for container, widget

From TomatoCMS Documentation

In previous post, creating new template is almost complete. But it does not look like our design exactly. This post will show how to improve template.

After previous post, our template now looks like:

What we have to do is improve this so that it will look like the design version:

If you look at two images above, the differences are the containers which contain slideshow at the top and company information at the bottom.

TomatoCMS use 960 Grid System to layout the page, it means that the width of page is always 960 pixels.

Currently, all content is bounded in div container which was defined by container_12 class.

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

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

So, we have to remove this class firstly:

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

But, now all content are left as follow:

Don't worry! I will guide you how to modify the layout configuration file (home.xml, in this case) to match our design.

Open our layout file (app/templates/sample/layouts/home.xml).

The first container is used to show the slides of hottest articles:

...
<container cols="12">
  <widget name="hotest" module="news">
    <params>
      <param name="limit"><value><![CDATA[3]]></value></param>
    </params>
  </widget>
</container>
...

Remove the cols property as follow:

...
<container>
  <widget name="hotest" module="news">
    <params>
      <param name="limit"><value><![CDATA[3]]></value></param>
    </params>
  </widget>
</container>
...

Now, the first container looks like what we expected:

The first container is centered, because we defined the styles for this in CSS:

// skin/sample/plus/default.css

#t_new_hotest_slide {
  ...
  margin: 0 auto 0;
  width: 840px;
  ...
}

Set cssClass property for containers, widgets

The next mission is second container which show the 3 latest articles.

The current configuration for this container is:

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

...
<container cols="12">
  <widget name="newest" module="news">
    <params>
      <param name="limit"><value><![CDATA[3]]></value></param>
    </params>
  </widget>
</container>
...

I wish I can set container_12 class for container which bound the newest widget. Fortunately, TomatoCMS allows you to do this.

I remove cols property and set cssClass property as follow:

...
<container cssClass="container_12">
  <widget name="newest" module="news">
    <params>
      <param name="limit"><value><![CDATA[3]]></value></param>
    </params>
  </widget>
</container>
...

Refresh our homepage:

Well, the last thing have to do is fix the bottom container.

Currently, the bottom container is full-row container and is split into three 4-columns containers:

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

...
<container cols="12">
  <container cols="4" position="first">
    ...
  </container>
  <container cols="4">
    ...
  </container>
  <container cols="4" position="last">
    ...
  </container>
</container>
...

I will make a small modification. I put this container in other containers which is used to centered the bottom container:

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

...
<container cssClass="bottom">
  <container cssClass="container_12">
    <container cols="12">
    ...
    </container>
  </container>
</container>
...

The following image illustrates the structure of containers:

Finally, we have to define the styles for .bottom class:

// skin/sample/plus/default.css

...
#footer, #footer a {
  ...
}
.bottom {
  padding: 20px 0;
  color: #FFFFFF;
  background-color: #000000;
  height: 300px;
}
...

Now our home page looks like our design exactly:

It works great!

In this post, you know that you can remove the cols property from container. Also, you can set cssClass property for containers and widgets.

I close the series of guides on customizing template here. I hope you can create new template by yourself after reading this series.

Thank and wait for your comments!