Now that we have our new template set as the default template for the WebCards system, we can begin to customize the layout. As we mentioned before, we only have 510 px to work with on our Facebook Fan Page. One way to save some space is to remove the Events Calendar and the Search Cloud from the right of the layout.

Events Calendar and Search Cloud

The template that we will need to work on is the view_image_stats.html template. As you can see, this template is basically a table with five cells. The first cell which holds the side menu links is given 15 percent of the total width of the table and the next three cells that contain the thumbnails are given 20 percent each. The last table cell which contains the calendar and cloud is given 25 percent.

An easy way to remove the calendar and cloud is to remove the fifth table cell. Of course, we will also remove 25 percent of the table. So we need to spread this 25 percent over the remaining cells.

First cell - 15 becomes 25
Second cell - 20 becomes 25
Third cell - 20 becomes 25
Fourth cell - 20 becomes 25
Fifth cell - 25

When we refresh the browser, we don't see any change. This is because we need to clear the cache to see the change. We can do this in the Admin Center. At the very bottom of the side menu, click on the Manage Caches link. On the Manage Caches page, click on the Rebuild Cache button. Now, we can see that the calendar and cloud have been removed when we again refresh the browser.

All Categories Link

We have such a small set of ecards, we really do not need the All Categories link in the side menu. So, let's remove this link to make the side menu less cluttered. We will need to work on another file called functions.php. This file is stored in the source folder.

htdocs/webcards/source/functions.php

To remove the All Categories link, we just need to comment out one line of code. Starting about line 1410, you will see a foreach loop. Within this loop is the code that creates the All Categories link. To comment out this line, add // before the line of code. To see the change, rebuild the cache and refresh the browser.

Horizontal Layout

You may have noticed that on the front page of the system we have three vertical lists of thumbnails which are New Images, Popular Images and Random Images. Because we have such a small set of ecards, we see some repetition. It would be better if we used a different layout that lists all the thumbnails on this front page in a horizontal layout. Then, the links in the side menu lead to the view of only the thumbnails in one of the two categories. To make this change to the front page layout, we will need to work on index.php file.

htdocs/webcards/index.php

Starting about line 315, you will see the view_stats_page function. We will add a line of code that will change the template layout for the front page. Add this line under the global variables.

return choose_image_template($messages);

https://www.mywebcards.net

WebCards screenshots used by permission.