XF 1.2 Styling & Tabs On xenForo Custom Pages

[TheBigK]

I'm trying to create a xenForo page with three tabs, each containing text+images. I'm trying to follow guide posted by @ragtek here and inserted following code in 'Template HTML' part of creating a xenForo custom page:

<ul id="ragtektabs" class="Tabs tabs" data-panes="#ragtek > li">
<li>
                <a href="foo"><b>Overview</b></a>
</li>
<li>
                <a href="foo2">Tab2</a>
</li>
<li>
                <a href="foo3">Tab3</a>
</li>
</ul>
<ul id="ragtek">
<li>element1</li>
<li>elemen2</li>
<li>element3</li>
</ul>

I'm trying to add my text & images by replacing 'element1' inside <li> ..</li> tags. The problem is -

All my HTML formatting is getting lost! None of my <h1>, <h2> tags or even the BB codes aren't working. I'd also like to make the tabs bigger.

Any help/pointers to fix this issue would be highly appreciated.

 

[ManOnDaMoon]

Test it using a wrapping "baseHtml" class, e.g.:

<li>
    <div class="baseHtml">
        <h1>element1</h1>
    </div>
</li>

 

[TheBigK]

Test it using a wrapping "baseHtml" class, e.g.:

<li>
    <div class="baseHtml">
        <h1>element1</h1>
    </div>
</li>

Watching magic happen in front of my eyes. It worked. Saved my day. Thank you!

 

[AndreaMarucci]

Do you mean that the baseHtml class strip out any XF formatting and leave the basic html or css formatting?

 

[xf_phantom]

Do you mean that the baseHtml class strip out any XF formatting and leave the basic html or css formatting?

xenforo removes all the basic browser specific formating (css reset http://meyerweb.com/eric/tools/css/reset/ ) and to get it back, you need to use the proper xenforo classes

 

[AndreaMarucci]

Aha that's the trick! Thank you very much! I've to put this class in front of each statement?