Board Layout Modification

[Former Member]

Forum URL: asolutions.freeforums.net

Hello Guys 

I wondered if one of you template Wiz's could help me make a small change to my boards layout ?

I would like to change it from this ....




To this 



So basically split the Board Title cell in half down the middle 

Move the Board Description to the right hand split

Make sure the Board Description can be wrapped onto multiple lines if needed but still remaining on the right hand side 

But left alligned against the break line ( I know the description is centered on the example image but ignore that positioning)

Any takers ?

Thanks 

Dave

[pawl]

This should be a fairly simple modification Dave B - any chance you could post up your Board List template for me? =]

[Former Member]

Jul 9, 2014 8:00:49 GMT -8 pawl said:

This should be a fairly simple modification Dave B - any chance you could post up your Board List template for me? =]

  Hello pawl

  Yeah sure .. See below 

  Thanks 

 
<table class="list" role="grid">

<!-- <thead>

<tr>

<th class="icon"></th>

<th class="main">Board</th>

<th class="threads">Threads</th>

<th class="posts">Posts</th>

<th class="latest last">Last Post</th>

</tr>

</thead> -->

<tbody>

{foreach $[board]}

{if !$[board.is_redirect]}

<tr id="$[board.content_id]" class="$[board.content_class]">



<td class="main clickable">

<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />

<p class="description">$[board.description]</p>

{if $[board.sub_board]}

<p class="sub-boards">

Sub-board{if $[board.sub_board] != 1}s{/if}:

{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}

</p>

{/if}

</td>

<td class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads] thread{if $[board.threads] != 1}s{/if}{/if}

<br />{if $[board.posts] == -1}N/A{else}$[board.posts] post{if $[board.posts] != 1}s{/if}{/if}</td>

<!--<td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>-->

<td class="latest last">

{if $[board.posts] > 0}

{if $[board.last_thread]}

                       $[board.last_thread.recent_link]

by $[board.last_thread.last_post.created_by_user]<!-- <br />

<span class="date">$[board.last_thread.last_post.date]</span> -->

{/if}

{else}

No posts have been made on this board.

{/if}

</td>

</tr>

{else}

<tr id="$[board.content_id]" class="$[board.content_class]">

<td class="main clickable redirect last" colspan="4">

<span class="link">$[board]</span><br />

<p class="description">$[board.description]</p>

</td>

</tr>

{/if}

{/foreach}

{if !$[board]}

<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>

{/if}

</tbody>

</table>

[pawl]

Okay, fairly easy one, see how this looks. =]

<table class="list" role="grid">

<!-- <thead>

<tr>

<th class="icon"></th>

<th class="main">Board</th>

<th class="threads">Threads</th>

<th class="posts">Posts</th>

<th class="latest last">Last Post</th>

</tr>

</thead> -->

<tbody>

{foreach $[board]}

{if !$[board.is_redirect]}

<tr id="$[board.content_id]" class="$[board.content_class]">



<td class="main clickable" width="35%">

<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />

{if $[board.sub_board]}

<p class="sub-boards">

Sub-board{if $[board.sub_board] != 1}s{/if}:

{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}

</p>

{/if}

</td>
                                   
                   <td class="main clickable" width="35%">
                       
                       <p class="description">$[board.description]</p>
                       
                   </td>

<td class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads] thread{if $[board.threads] != 1}s{/if}{/if}

<br />{if $[board.posts] == -1}N/A{else}$[board.posts] post{if $[board.posts] != 1}s{/if}{/if}</td>

<!--<td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>-->

<td class="latest last">

{if $[board.posts] > 0}

{if $[board.last_thread]}

                       $[board.last_thread.recent_link]

by $[board.last_thread.last_post.created_by_user]<!-- <br />

<span class="date">$[board.last_thread.last_post.date]</span> -->

{/if}

{else}

No posts have been made on this board.

{/if}

</td>

</tr>

{else}

<tr id="$[board.content_id]" class="$[board.content_class]">

<td class="main clickable redirect last" colspan="4">

<span class="link">$[board]</span><br />

<p class="description">$[board.description]</p>

</td>

</tr>

{/if}

{/foreach}

{if !$[board]}

<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>

{/if}

</tbody>

</table>

And then in your Style Sheet look for this, and make the highlighted change (hopefully around line #852)

.boards .main { width: 30%; text-align: @board_align_main; }

[Former Member]

Hello pawl

That's perfect !!

Thanks

[pawl]

Happy days, and no worries. If you need any more help with it just let me know. =]