logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.

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

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Add Removing+the+Extras+from+WebCards+Layout to Twitter Add Removing+the+Extras+from+WebCards+Layout to Facebook Add Removing+the+Extras+from+WebCards+Layout to MySpace Add Removing+the+Extras+from+WebCards+Layout to Del.icio.us Digg Removing+the+Extras+from+WebCards+Layout Add Removing+the+Extras+from+WebCards+Layout to Yahoo My Web Add Removing+the+Extras+from+WebCards+Layout to Google Bookmarks Add Removing+the+Extras+from+WebCards+Layout to Stumbleupon Add Removing+the+Extras+from+WebCards+Layout to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Adobe KnowHow Learning Center

Silhouette Studio New PixScan Feature

Photorealistic Digital Art for Digital Stamp

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor