Styling Node List Inside A Drop-Down In An Overlay


Well-known member
I'm creating an add-on that shows the list of all the currently viewable nodes inside a drop-down in an overlay. My template is this:-

<form action="{xen:link misc/create-thread}" method="POST" class="xenForm formOverlay">
    <dl class="ctrlUnit">
        <dt>Choose from drop-down: </dt>
            <select name="node_id" class="textCtrl">
                <xen:foreach loop="$forums" value="$forum">
                    <option value="{$forum.node_id}">{$forum.title}</option>

    <dl class="ctrlUnit submitUnit">
            <input type="submit" value="{xen:phrase post_new_thread}" class="button primary" />

    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    <input type="hidden" name="_xfConfirm" value="1" />
I'm going totally clueless on how do I go about styling the drop-down list so that the user does not get confused between categories and forums.

I want to show the drop down items as follows:-

Category Name [Bold]
|---Forum Name 1
|---Forum Name 2

PS: I don't want ready-made answer. A hint in the right direction would be appreciated. It's part of my learning process (y)


Well-known member
Good to see you only want help to learn and not people to actually write the code for you. (y)

What you've got is a good start. I'm not sure how you've grabbed the nodes but each node should have a 'depth' key. You can use the string template helper (xen:string) before the title to correctly indent it. Without giving it away, one of the parameters will obviously be the depth so you can try and figure that out.

If you need further help, feel free to ask.


Well-known member
I'm not sure how you've grabbed the nodes but each node should have a 'depth' key
Thanks, @NixFifty . I figured out that I need to have _depth0 and _depth1 in my styling by looking at the way the nodes list is displayed in adminCP. Looks like I can't ignore helpers anymore.

I checked the admin template that displays the node tree and it uses this: class="_depth{$node.depth}"

My question: How do I know where exactly is $node.depth deriving its value from? (Where do I look?)


XenForo moderator
Staff member
It's stored in the node table so should be in the array, or you can add it to the array if it isn't already.

Try dumping the array to see what is available.