This recipe will show us how we can create a sitemap for our store. Sitemap is the page that has links for the main pages or features of the website. We are going to apply some styling to the sitemap here.
1. Getting ready
Let’s start our work for sitemap creation. We open up the sitemap.tpl file under the Catalog\view\theme\shop\template\information.
2. How to do it…
Now, we will see a step by step guide on how to modify our sitemap:
- The default sitemap is created with a two-column We will change the structure to div tags. And also add a sitemap-tree class to the div in the sitemap.tpl:
<div class=”sitemap-tree”>
<?php echo $category; ?>
</div>
<div class=”sitemap-tree”>
<ul>
//…
</ul>
</div>
- With the div and without the table, our sitemap looks like the following:
- To the sitemap-tree class, we apply the following styles in the stylesheets.css under the Catalog-\view\theme\shop\stylesheet:
.sitemap-tree
{
border: 1px solid #ddd;
}
- With the border, the sitemap appears as the following:
- And then, we need to apply some margin to separate the borders:
.sitemap-tree
{
border: 1px solid #ddd;
margin: 20px 10px;
}
- This brings a gap between the borders:
- Now, place some padding to the secondary ul tag of our sitemap:
.sitemap-tree li ul
{
padding: 10px 25px;
}
- This will make the secondary ul tag slightly away from the parent ul tag:
- On the child elements of the sitemap, there also needs to be padding:
.sitemap-tree ul ul li
{
padding: 5px 40px;
}
- When we go to the browser, it presents the following image:
- There is some space left on the left side of the child We will place an arrow icon there. Let’s create an arrow for it. You can create an arrow icon by yourself. Also, you can search Google for the image. But for now, we will use the following image for the icon:
- We will open up the image with GIMP and then select the Select by color tool from the toolbox:
- We select the centre big arrow with the Now, we will make a copy of it and create a new image with dimensions of 822×502 pixels and choose Transparent as the background from the advanced option.
- Now, we will change the color of the arrow image We select #c3e0ce as the arrow color. You can set your favourite one.
- And also choose #f0f3d6 as the background image color:
- We apply this color with the gradient tool from the toolbox:
- Now, we select the scale tool:
- We stretch the image to the left and So, our image becomes like the following:
- Then, click on the scale
- Now, we again scale the image by clicking the right button on the mouse:
- We scale it to 22×36 Then, we save it as sitemap-arrow.png.
- Now, we add the following background style block for it:
.sitemap-tree ul ul li
{
background: transparent url(‘../image/sitemap-arrow.png’) no- repeat;
padding: 5px 40px;
}
- This brings the following changes to our sitemap:
- There are two div elements for the sitemap So, we will apply float and a
width to div.
.sitemap-tree{
width:250px;
}
- Now, our sitemap becomes like this:
- And then, we apply the float property:
.sitemap-tree{
width:250px;
float:left;
}
- This makes the two to be placed by side by side:
- You will see that the sitemap container’s height looks very small So, we will use a clear class at the end of the sitemap-tree class.
</div>
<div class=”clear”></div>
<div class=”bottom”>
- This completes our sitemap for the store shop:
3. How it works…
We have changed the table-based style to div-based and added an arrow to the links and features. Also, there are many designs of sitemap pages in the Internet. You can see those also.
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.