1. 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

Discussion in 'XenForo Questions and Support' started by Veer, Dec 15, 2010.

  1. Veer

    Veer Well-Known Member

    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.
     

    Attached Files:

  2. Brogan

    Brogan XenForo Moderator Staff Member

    Veer likes this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
    Veer likes this.
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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>
    
     

    Attached Files:

    Veer likes this.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  6. Veer

    Veer Well-Known Member

    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
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    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">
     

Share This Page