indexu.com

developer blog

Category: Templates

Custom category listing in browse.html

In earlier post, I show you how to create custom category listing in front page. Now will show you how to create custom category listing in category pages (browse.html). The real challenge here is to construct the category path as we are deep inside category level.
First, you need to remove this tag from browse.html

<%$category%>

Then replace [...]

Show listing in two columns or more

Bored to have listing in single column? I will show you how to make listing in multiple columns.
Edit rows.html, clean the codes and replace with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%if $number % 2 eq 1%>
<div class="row_nl">
<%/if%>
 
<div class="row_item myrow">
<img src="http://open.thumbshots.org/image.aspx?url=<%$url%>" alt="<%$title%>" style="border:1px solid #777;">
[...]

Show category listing as list of images

In this tutorial I will show you how to create an alternative category listing in front page where the categories will be listed as a series of images.
1) Prepare the image files. Create a folder called ‘cat‘ in template folder. Then put the images files here.
2) Edit category image file for each categories with [...]

Adding dynamic gmap with navigation and zooming

As many of you request how to replace the static gmap image with dynamic gmap which allow navigation and zooming, I made some test how to do this for the easiest way.
Ok. This is the easiest way. We only need to change the template files. Actually only 2 files.
Edit header.html, usually we use

<body>

but now [...]

How to make slider work for your template

Indexu use stepcarousel.js for image slider. I realize that the slider need to be customized for each template.
Here is some direction how to make it work for any templates you want.
1) Check your header.html file, make sure you have base tag and jquery loaded. Here is my html head section to start:

<link href="<%$tpl_base%>/jquery.autocomplete.css" [...]