Printer Friendly Version

BellaOnline's Digital Art and Design Editor

Removing the Extras from WebCards Layout

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 cell15 | First cell25
Second cell20 | Second cell25
Third cell20 | Third cell25
Fourth cell20 | Fourth cell25
Fifth cell25 |

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.


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.


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);


Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor