Style menu at pages

[HenrikHansen]

Is there an easy way to make the menu (in the box), and content at pages
http://xenforo.com/community/pages/example-page/
be styled like here: http://xenforo.com/community/help/
?

 

[Chris D]

This may help:

<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]

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

 

[HenrikHansen]

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]

This is how we are doing it:

<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>

 

[HenrikHansen]

yodawan, thanks a lot