How to use help page classes to style additional help pages?

[RobinHood]

I used Jame's tutorial to create some additional help pages and now I really need to style them.

I've been viewing the source code for the default help pages, thinking I could take snips of that HTML, pop it in my new help page template with the correct classes and the same styling would apply, but it doesn't seem to be working.

It seems that <div class="container"> wraps the sidebar and content, so I iggore that.

Then there's the <div class="helpSidebar"> class, which is the sidebar, so I ignore that.

It looks like what I need it everything within the <div class="helpContent section sectionMain"> tag, which creates the 1px blue border around the content?

But if I take all that html, pop it in my template and load my custom help page not all the styles are applied the same.

I could just copy the css I want and make my own classes, but I thought I could just reference the existing ones...

Is it because my help pages are named differently from the ones I'm wanting to use the styling from?

See, no fancy blue styling:

 

[RobinHood]

Okay, I've found that some classes seem to work for me and some don't.



The layout from the main help page menu works fine in my template, which is as follows:

<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/cookies">Cookie Usage</a></dt>
        <dd>This page explains how this site uses cookies.</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>

The text heading from the cookie page works as follows:

<h3 class="textHeading">
    Text heading and horizontal 1px border below header from Cookie Usage page
</h3>

The blue wrapper for the smilies text works as follows:

<span class="mySmilie">
    mySmilie class from Smilies page
</span>

The table layout and styling from the smilies page works okay like this:

<table class="dataTable smilieList">
    <tr class="dataRow">
        <th>Headers from Smilies table</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr class="dataRow">
            <td>Row 1 column 1</td>
            <td>Row 1 column 2</td>
            <td>Row 1 column 3</td>
    </tr>
    <tr class="dataRow">
            <td>Row 2 column 1</td>
            <td>Row 2 column 2</td>
            <td>Row 2 column 3</td>
    </tr>
    <tr class="dataRow">
            <td>Row 3 column 1</td>
            <td>Row 3 column 2</td>
            <td>Row 3 column 3</td>
    </tr>
</table>

I can't seem to get the right html from the trophies page or the bb codes page though, particularly the nice blue boxes on the bb code page.. any ideas?