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

A-Z Tree

Discussion in 'Styling and Customization Questions' started by JVCode, Jul 16, 2011.

  1. JVCode

    JVCode Well-Known Member

    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.​
     
  2. James

    James Well-Known Member

    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)
     
  3. JVCode

    JVCode Well-Known Member

    Ah thanks James, sounds simple! for me? no lol. can someone be a sweetheart and post the code edit for me, pretty please :)
     
  4. James

    James Well-Known Member

    On mobile so this might not come out correct:
    Code:
    <div class="categoryStrip"> 
    <div class="categoryText">Product List</div>
    </div>
    Hyperlinks here
    
     
  5. JVCode

    JVCode Well-Known Member

    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
     
  6. James

    James Well-Known Member

    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.
     
    JVCode likes this.
  7. JVCode

    JVCode Well-Known Member

    Great, thanks James.
     
  8. James

    James Well-Known Member

    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.
     
    JVCode likes this.
  9. JVCode

    JVCode Well-Known Member

    Thanks James, that did the trick :)
     

Share This Page