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

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:
 
Sort by date Sort by votes
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"
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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...
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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 ;-(
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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! :)
 
Upvote 0 Downvote
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 ;-)
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

K
  • Question Question
XF 2.2 How to enable what's new tab on p-nav-opposite
Replies
6
Views
826
Kone
K
M
  • Question Question
XF 2.2 what exactly do I need to do here? (Rebuilding)
Replies
2
Views
301
mrdoitnyce
M
Mave
  • Question Question
XF 2.2 Restoring SHIFT+TAB functionality to return back to the message field after replying?
Replies
0
Views
259
Mave
Mave
philmckrackon
  • Question Question
XF 2.2 CSS border and background questions.
Replies
1
Views
934
Nicolas FR
N
Oliver Jones
  • Question Question
XF 2.2 Translation of XenForo and all addons
Replies
8
Views
1K
richardduboi
richardduboi
Top Bottom