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
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

WebCards Custom Side Menu


We are ready to customize the side menu. As this fan page is for marketing an ecards website, we will have links to the main website for information about subscribing to a membership, to view all the ecards, and to the About Us page. Therefore we have these three links to add. It would be nice if we could use header graphics in the menu to separate the category links (General and Holidays) from the other links. Let's put a "Categories" header graphic above the General and Holiday category links and an "Information" header graphic above the three links we just discussed above.

As of now, the only links in the menu that are generated by the system are the All Categories, General and Holiday links and we have already removed the All Categories link.

The select_img.html template displays the side menu.

Open the select_image.html file and find the code that displays the side menu. As you can see, we have two divs. The col1 div begins the side column with the categories div that contains the template variable {{cat_jump}} that creates the generated links.

<div class="col1">

<div id="categories">
{{cat_jump}}
</div>
</div>

We can put our categories graphic header just after the opening categories div and before the template variable. Next, we will add a few break tags and the information graphic header. That will be followed by the links to our extra pages. Because these links will be moving away from the facebook fan page iframe, we want them to open into a new browser window. We can do this by using the target="_blank" attribute.

<div class="col1">

<div id="categories">
<img src="{{url}}templates/{{template}}/images/categories.png" width="93" height="33" alt="categories" /><br>
{{cat_jump}}

<br><br>

<img src="{{url}}templates/{{template}}/images/information.png" width="93" height="33" alt="information" /><br>

<a href="..." target="_blank"></a><br>
<a href="..." target="_blank"></a><br>
<a href="..." target="_blank"></a>

</div>
</div>

As you can see, the category links have bullets and our information links do not. We can easily add these because we have placed our info links inside the categories div. All we need to do is convert the links to an unordered lists.

<ul>
<li><a href="..." target="_blank"></a></li>
<li><a href="..." target="_blank"></a></li>
<li><a href="..." target="_blank"></a></li>
</ul>

If you wish to change the bullet image in the ul list or remove it, you will do this in the webcards.css file. Find the style for the categories li. Change the image name in the list-style-image property or set this property to none.

#categories li{
list-style: none;
list-style-image: url(../../site_images/bullet.png);
margin-left: 10px;
margin-top: 5px;
}

Note: We can remove the Currently browsing . . . text at the top by commenting out the template variables in the select_img.html template.

<!--<h2>||curr_browsing||: {{cat_name}} (||total_images||: {{total_images}})</h2>-->

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Add WebCards+Custom+Side+Menu to Twitter Add WebCards+Custom+Side+Menu to Facebook Add WebCards+Custom+Side+Menu to MySpace Add WebCards+Custom+Side+Menu to Del.icio.us Digg WebCards+Custom+Side+Menu Add WebCards+Custom+Side+Menu to Yahoo My Web Add WebCards+Custom+Side+Menu to Google Bookmarks Add WebCards+Custom+Side+Menu to Stumbleupon Add WebCards+Custom+Side+Menu 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
Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Paper Bead SVG Cut Files

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