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

Help for a Page template

Veer

Well-known member
#1
Hi guys,

I need a page (column) template for my custom pages. I'm not familiar with the code, nor html, so any help would be appreciated.

Thank you.
 

Attachments

Brogan

XenForo moderator
Staff member
#3
Here's some quick code to give you an idea.

HTML:
<div class="messageText ugc baseHtml"> <!-- All content must be wrapped in these default classes to enable pages to use the same CSS as forum posts and automatically update with each style -->

<xen:sidebar>test</xen:sidebar>

<table>
<tr>
<td width="160">this is the first row, first cell</td>
<td width="520">this is the first row, second cell</td>
</tr>
<tr>
<td>this is the second row, first cell</td>
<td>this is the second row, second cell</td>
</tr>
</table>

</div>

Paste that into a page to see how it looks.
 

Jake Bunce

XenForo moderator
Staff member
#4
Ah I love tables. But I spent some time trying to make it work with divs. I came up with this code that creates the 3-column layout you wanted. The code can be used as-is in your page node.

See the attached pic for what it looks like.

Code:
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 160px;">
	<div class="section">
		<div class="secondaryContent">
			LEFT CONTENT
		</div>
	</div>
</div>

<div>
	MIDDLE CONTENT
</div>

<xen:sidebar>
	<div class="section">
		<div class="secondaryContent">
			RIGHT CONTENT
		</div>
	</div>
</xen:sidebar>
 

Attachments

Brogan

XenForo moderator
Staff member
#5
I haven't decided yet whether to use tables or divs for my page layouts.
I constantly read how tables are out of date and yet they still do the job they were intended for very well.

I'll try both and see what works best in practice.
 

Veer

Well-known member
#6
Thank you Brogan for the useful links and table codes.

Well, Jake I really like your DIV style codes, it looks more beautiful than tables and that is what I'm looking for.
I've edited your given code and it needs some correction in the middle area as well as left block.

The code needs correction is:
Code:
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 160px;">
    <div class="section">
        <div class="secondaryContent">
            LEFT CONTENT
        </div>
    </div>
</div>

<div>
<h2 class="heading">TOP TITLE</h2>
    MIDDLE TOP CONTENT
<h3 class="subHeading">BOTTOM TITLE</h3>
    MIDDLE BOTTOM CONTENT
</div>

<xen:sidebar>
    <div class="section">
        <div class="secondaryContent">
<h3>TITLE</h3>
            RIGHT CONTENT
        </div>
    </div>
</xen:sidebar>
See the pic for what it looks like:
sample2.png

And the left side I'd like to add this block, I take it from profile:
Left.png
 

Brogan

XenForo moderator
Staff member
#7
I think Jake's code (as mine was), was just an example to get you started.

No doubt you can apply many different classes to the 3 main div's to achieve the look you're after.
The tables layout will look exactly the same as the div's if you change the css to remove the borders and apply the same headings, etc.

That particular section of the profile page is <div class="section infoBlock">