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

Style menu at pages

Discussion in 'XenForo Questions and Support' started by HenrikHansen, Jul 16, 2012.

  1. HenrikHansen

    HenrikHansen Well-Known Member

  2. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  3. MOZ

    MOZ Well-Known Member

    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
     
  4. HenrikHansen

    HenrikHansen Well-Known Member

    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?
     
  5. MOZ

    MOZ Well-Known Member

    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>
     
    HenrikHansen and Chris D like this.
  6. HenrikHansen

    HenrikHansen Well-Known Member

    yodawan, thanks a lot :)
     

Share This Page