• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

A-Z Tree

JVCode

Well-known member
#1
How would I create an A-Z on the forum home page? I'll try and post a mock-up of what I mean.

Mock-up.png

The above I'd like to display just as all the other forums do, but as I've displayed above. Ofcourse each letter will be a link to another page. I'd like to take this even further to that when you hover over the left, a drop down appears with a list of all the products available and images next to them, but I doubt I'll ever achieve that.​

I would use Russ's modification for this, but I'm not wanting to use sub-forums for the A-Z and I really couldn't use my node_forum_level_2 for all the links as it would totally crash and kill my board lol. If anyone can help, I'd be eternally greatful.​
 

James

Well-known member
#2
Your "Product List" background just needs to be a div with a class of categoryStrip. Your Product List text just needs to be a div with a class of categoryText.

As for your A-Z, just hyperlinks.

All of the above in the forum_list template should do fine.
(that's as far as your styling and customisation goes until you delve into code)
 

JVCode

Well-known member
#3
Ah thanks James, sounds simple! for me? no lol. can someone be a sweetheart and post the code edit for me, pretty please :)
 

James

Well-known member
#4
On mobile so this might not come out correct:
Code:
<div class="categoryStrip"> 
<div class="categoryText">Product List</div>
</div>
Hyperlinks here
 

JVCode

Well-known member
#5
Doesn't come out correctly, it doesn't even come within the forum container, unless I'm putting the code in the incorrect place within forum_list

2.PNG
 

James

Well-known member
#6
Strange.. I'll take a look later but it should be fine anywhere below the breadcrumb. If nobody manages this by the time I return home I'll get it sorted.
 

James

Well-known member
#8
OK done:
In the forum_list template, find:
Code:
<xen:hook name="forum_list_nodes">
Add above
Code:
<div class="nodeList" style="text-align: center;">
<div class="categoryStrip">
<div class="categoryText">
<h3 class="nodeTitle">Product Listing</h3>
</div>
</div>
<a href="#">A</a>
</div>
Where it says <a href="#">A</a>, add hyperlinks for A-Z and replace # with the URL of the page it links to.