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

Style menu at pages

Chris D

XenForo developer
Staff member
#2
This may help:

Code:
<div class="helpSideBar">
<ul>
<li class="section"><h4 class="heading">{xen:phrase help}</h4>
<ul>
<li><a href="{xen:link help/smilies}" class="{xen:if "{$selected} == 'smilies'", 'secondaryContent', 'primaryContent'}">{xen:phrase smilies}</a></li>
<li><a href="{xen:link help/bb-codes}" class="{xen:if "{$selected} == 'bbCodes'", 'secondaryContent', 'primaryContent'}">{xen:phrase bb_codes}</a></li>
<li><a href="{xen:link help/trophies}" class="{xen:if "{$selected} == 'trophies'", 'secondaryContent', 'primaryContent'}">{xen:phrase trophies}</a></li>
</ul>
</li>
</ul>
</div>
This is the kind of skeleton of the Help page. You should be able to re-use it in your own pages.
 

MOZ

Well-known member
#3
We are using something like this on our forum. It is 3:30am at my place. Ping me in 6 hours time, I'll surely have it for you :D
 

HenrikHansen

Well-known member
#4
Hmm, I will need to changes at least two templates, I guess. The template for the page menu and the template for page content - yodawan did you have specific tips?
 

MOZ

Well-known member
#5
This is how we are doing it:

PHP:
<xen:require css="help_wrapper.css" />
 
<div class="container">
    <div class="helpSideBar">
        <ul>
            <li class="section"><h4 class="heading">Heading</h4>
                <ul>
                        <li><a href="{xen:link pages/link1}" class="primaryContent">Link 1</a></li>
                        <li><a href="{xen:link pages/link2}" class="primaryContent">Link 2</a></li>
                        <li><a href="{xen:link pages/link3}" class="secondaryContent">Link 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
 
  <div class="helpContent section sectionMain">{xen:raw $_subView}
        <xen:title>Title goes here</xen:title>
        <div class="baseHtml">
            Stuff goes here
        </div>
    </div>
</div>
This is about it
-The "Heading" is the part in the vertical menu bar you see at the top.
-class="primaryContent" are the links in the menu
-class="secondaryContent" is the link in the menu that is selected
-<xen:title></xen:title> is the page title
-Your contents go in the <div class="baseHtml"></div>