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

Need Border for pages, BUT same one as the 'Xenforo Help' tab has?

Discussion in 'Styling and Customization Questions' started by CritiKiL, Apr 11, 2012.

  1. CritiKiL

    CritiKiL Active Member

    I need help on this. I have a MORE tab which shows other pages of video players and etc. It looks tacky with the player by itself, so I want to have a border just like the Xenforo Help area does (with the 'Help nav' omitted). I have the INTEL tab (formerly 'Help' tab) looking fine, I just want to be able to have a border with the same look, for my node pages...

    SITE IS HERE:
     
  2. mrGTB

    mrGTB Well-Known Member

    If you look at the source code of the Help page in your browser, you can see the classes it uses etc. That what I did before to figure out how to do the same on pages.

    Code:
    <div class="helpContent section sectionMain">
     
    <div class="baseHtml">
        <dl>
            <dt><a href="help/smilies">Smilies</a></dt>
            <dd>This shows a full list of the smilies you can insert when posting a message.</dd>
        </dl>
     
        <dl>
            <dt><a href="help/bb-codes">BB Codes</a></dt>
            <dd>The list of BB codes you can use to spice up the look of your messages. This page shows a list of all BB codes that are available.</dd>
        </dl>
     
        <dl>
            <dt><a href="help/trophies">Trophies</a></dt>
            <dd>You can earn trophies by carrying out different actions. This page shows a list of the trophies that are available.</dd>
        </dl>
     
     
            <dl>
                <dt><a href="help/terms">Terms and Rules</a></dt>
                <dd>You must agree to these terms and rules before using the site.</dd>
            </dl>
     
    </div></div>
    All I did was View Source and search for this using FireFox to find it. "This shows a full list of the smilies you can insert when posting a message"
     
    CritiKiL likes this.
  3. mrGTB

    mrGTB Well-Known Member

    Second thoughts just looking at the source again showing this (I missed something above):

    Code:
    <div class="container">
        <div class="helpSideBar">
            <ul>
                <li class="section"><h4 class="heading">Help</h4>
                    <ul>
                 
                        <li><a href="help/smilies" class="primaryContent">Smilies</a></li>
                        <!-- slot: pre_bb_codes -->
                        <li><a href="help/bb-codes" class="primaryContent">BB Codes</a></li>
                        <!-- slot: pre_trophies -->
                        <li><a href="help/trophies" class="primaryContent">Trophies</a></li>
                        <!-- slot: pre_tos_url -->
                 
                            <li><a href="help/terms" class="primaryContent">Terms and Rules</a></li>
                 
                 
                    </ul>
                </li>
            </ul>
        </div>
     
        <div class="helpContent section sectionMain">
     
    <div class="baseHtml">
        <dl>
            <dt><a href="help/smilies">Smilies</a></dt>
            <dd>This shows a full list of the smilies you can insert when posting a message.</dd>
        </dl>
     
        <dl>
            <dt><a href="help/bb-codes">BB Codes</a></dt>
            <dd>The list of BB codes you can use to spice up the look of your messages. This page shows a list of all BB codes that are available.</dd>
        </dl>
     
        <dl>
            <dt><a href="help/trophies">Trophies</a></dt>
            <dd>You can earn trophies by carrying out different actions. This page shows a list of the trophies that are available.</dd>
        </dl>
     
     
            <dl>
                <dt><a href="help/terms">Terms and Rules</a></dt>
                <dd>You must agree to these terms and rules before using the site.</dd>
            </dl>
     
    </div></div>
    </div>
    You may have to include this:

    Code:
    <div class="container">
     
    </div>
    So it looks like this (test it).

    Code:
    <div class="container">
     
    <div class="helpContent section sectionMain">
     
    <div class="baseHtml">
    YOUR CODE
    </div>
    </div>
    </div>
     
  4. CritiKiL

    CritiKiL Active Member

    That works, but I need to 'set it to a particular size'. This way only pushes the width all the way to the end. I need to have the border to a certain size constrainment such as (ex: 800 width x 415 height). How can this be done? That is the exact size of the Help pages...
     
  5. mrGTB

    mrGTB Well-Known Member

    The only thing I can think to do, giving you more control. Is look at the CSS used in those Classes and copy the code, then edit to suit and add them as new extra CSS Class using different names put in "Extra.css" template. Also change css class names to match in HTML code used. Like adding "_page" to container so it becomes a new class for pulling added in extra.css.

    Code:
    <div class="container_page">
     
    </div>
    This is the css I see for help pages doing a quick search:

    Code:
    .container {
        display: table;
        width: 100%;
        zoom: 1;
    }
     
    .helpSideBar
    {
        width: 150px;
        display: table-cell;
        vertical-align: top;
        *float: left;
    }
     
        .helpSideBar .heading
        {
            border-top-right-radius: 0;
            margin: 10px 0 0;
        }
     
        .helpSideBar .primaryContent
        {
            font-size: 11px;
        }
     
        .helpSideBar .secondaryContent
        {
            font-weight: bold;
        }
     
        .helpSideBar a
        {
            display: block;
            padding: 5px 10px;
        }
     
        .helpSideBar a:hover
        {
            background: @primaryLighterStill url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
            color: @primaryLightish;
            text-decoration: none;
        }
     
     
    .helpContent
    {
        display: table-cell;
        vertical-align: top;
        margin: 0;
        *margin-left: 150px;
        zoom: 1;
    }
    Then again, you could create a new CSS template and call it into (pages I think).

    Code:
    <xen:require css="help_wrapper.css" />
     
    <div class="container">
        <div class="helpSideBar">
            <ul>
                <li class="section"><h4 class="heading">{xen:phrase help}</h4>
                    <ul>
                        <xen:hook name="help_sidebar_links">
                        <li><a href="{xen:link help/smilies}" class="{xen:if "{$selected} == 'smilies'", 'secondaryContent', 'primaryContent'}">{xen:phrase smilies}</a></li>
                        <!-- slot: pre_bb_codes -->
                        <li><a href="{xen:link help/bb-codes}" class="{xen:if "{$selected} == 'bbCodes'", 'secondaryContent', 'primaryContent'}">{xen:phrase bb_codes}</a></li>
                        <!-- slot: pre_trophies -->
                        <li><a href="{xen:link help/trophies}" class="{xen:if "{$selected} == 'trophies'", 'secondaryContent', 'primaryContent'}">{xen:phrase trophies}</a></li>
                        <!-- slot: pre_tos_url -->
                        <xen:if is="{$tosUrl}">
                            <li><a href="{$tosUrl}" class="{xen:if "{$selected} == 'terms'", 'secondaryContent', 'primaryContent'}">{xen:phrase terms_and_rules}</a></li>
                        </xen:if>
                        </xen:hook>
                    </ul>
                </li>
            </ul>
        </div>
     
        <div class="helpContent section sectionMain">{xen:raw $_subView}</div>
    </div>
    Do search for HELP in templates to see everything it uses
     
  6. CritiKiL

    CritiKiL Active Member

    Code:
    <div class="container_page">
     
    </div>
    This code, 'above' was the first code I used before deciding to ask for help. They all seem to use the full length of the page and not allowing to constrain, yet it does this in each of the help pages (in help_wrapper). So I'm hoping someone can help me with something that 'seems' easily optainable, however it is not ;-(
     
  7. mrGTB

    mrGTB Well-Known Member

    This is totally untested because I've not messed around with PAGES for ages. Just a quick test to see if sets height and width?

    Put this in EXTRA.css

    Code:
    .container_page {
    display: table;
    width: 800px;
    Height: 414px;
    zoom: 1;
    }
    Test this class in your PAGES HTML code used:

    Code:
    <div class="container_page">bla</div>
     
  8. CritiKiL

    CritiKiL Active Member

    It shows 'no' border, just shows the 'bla' text by itself...
     
  9. mrGTB

    mrGTB Well-Known Member

    That's because it's only one class you used, others are used for border and lots of other things. Looking, I think there seems to be a global class used also on most pages, not just help pages (copy all the source from HELP pages and search for "class"). It's something either another person better in the know will have to explain, because there's a lot you'd have to do with different css custom classes added, edited and called to control things like you seem to want. It not something I've looked deep enough into because I don't uses the PAGES because of all that to be honest.

    if you look near top of source code for example, you have other classes like these controlling page layout.

    Code:
    <div id="content" class="help_index">
        <div class="pageWidth">
            <div class="pageContent">
    Get "BRUCE" on the job! :)
     
    CritiKiL likes this.
  10. CritiKiL

    CritiKiL Active Member

    Gotcha, will do. And BTW I'm the top-guy and your help is greatly appreciated ~ lol
     
  11. CritiKiL

    CritiKiL Active Member

    UPDATE! I finally got the right combination to work, thanks to all of you in this thread but especially to Mr.GTB for getting me in the manner of 'trail-n-error'ing to the finale of my solution! I now only need to put my HTML inside of this and the borders show perfectly and are dependant by the size of the HTML content:
    Code:
    <xen:require css="help_wrapper.css" />
    <br>
    <div align='center'>
    <div class="helpContent section sectionMain">{xen:raw $_subView}
     
     
    HTML CODE CONTENT GOES HERE AND THE SIZE OF THIS BORDER IS DEPENDANT ON THE SIZE OF THE CONTENT HERE.
     
     
    </div>
    </div>
    Not saying that this will work for anyone else hoping to achieve the same that I have been attempting, but these are my notes to reach the end of my issue ;-)
     

Share This Page