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
WebCards screenshots used by permission.