Stinky's Board Remodel

Stinky666

Senior Member

422

5

December 2009

Stinky's Board Remodel Jan 7, 2014 14:11:46 GMT Chris likes this

Quote

Figured I may as well post 2 mods here that I have done on themes..

PREVIEW:

Start off by going to: Admin > Themes > Layout Templates > Board, and then select the Board List tab.
Replace EVERYTHING in this tab, with the below (use ctrl+a to select all, and then backspace/delete):

<table class="list" role="grid">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">

<td class="main">
<span class="link"><a href="$[board.href]">$[board.icon] $[board.display_name]</a> 
{if $[board.num_mods]}

<div style="clear: right; float: right; text-align: right;"> Led By{if $[board.num_mods] != 1}{/if}:
{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}</div>

{/if}
</span><br />
<p class="description">$[board.description]</p>
<div id="lastpost3" class="last post">
{if $[board.posts] > 0}

{if $[board.last_thread]}
$[board.last_thread.last_post.created_by_user] replied to <font color="c1f93e">'</font>$[board.last_thread.recent_link]<font color="c1f93e">'</font>
<span class="date">$[board.last_thread.last_post.date]</span>
{/if}
{else}
<i>No posts have been made in this board</i>
{/if}
<div style="clear: right; float: right; text-align: right;"><font color="#6f8992">(<b>$[board.posts]</b> post{if $[board.posts] != 1}s{/if} in <b>$[board.threads]</b> thread{if $[board.threads] != 1}s{/if})</font>
</div>
{if $[board.sub_board]}
<tr style="background-color: #3a474d;"><td style="padding: 2px 14px;"><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></td></tr>
{/if}
{else}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main 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}</div>

</td>
</tbody>
</table>

Now go to Admin > Themes > Advanced Colors & CSS > Style Sheet.
Scroll to the very bottom and hit enter a few times to make a gap, and insert the following:

/* Alignment for Stinky666 Board List Remodel */
.main .link img {
vertical-align: bottom;
display: inline-block;
margin-bottom: -11px;
}
/* Sub-boards Link Colour */
.sub-boards a { color: #e0e0e0;
}

/* Last Post */
#lastpost3 {
background-color: #43545B;
border-bottom: 1px solid #43545B;
border-top: 1px solid #43545B;
height: 14px;
margin-left: 0;
margin-top: 0;
padding: 4px;
}

For all of the above, you just need to edit HEX codes (highlighted in blue), to match your forums colours.

Last Edit: Jan 16, 2014 22:17:13 GMT by Stinky666

Chris

Head Coder

19,519

∞

24

June 2005

Stinky's Board Remodel Jan 11, 2014 5:23:01 GMT

Quote

Looks good Stinky. May I recommend that you move the CSS form the board page into the additional css part?

Stinky666

Senior Member

422

5

December 2009

Stinky's Board Remodel Jan 15, 2014 14:02:05 GMT

Quote

Jan 11, 2014 5:23:01 GMT Chris said:

Looks good Stinky. May I recommend that you move the CSS form the board page into the additional css part?

Is there any particular reason why? Does it load faster or anything? Or would moving it not really make a difference?

Chris

Head Coder

19,519

∞

24

June 2005

Stinky's Board Remodel Jan 16, 2014 3:15:24 GMT

Quote

Jan 15, 2014 14:02:05 GMT Stinky666 said:

Jan 11, 2014 5:23:01 GMT Chris said:

Looks good Stinky. May I recommend that you move the CSS form the board page into the additional css part?

Is there any particular reason why? Does it load faster or anything? Or would moving it not really make a difference?

Consistency mainly. That, and we're -already- editing the CSS file... might as well. You can also then, in theory, expand it to be customizable using the Advanced CSS Editor by adding rules. (Again, in theory.

)

Stinky666

Senior Member

422

5

December 2009

Stinky's Board Remodel Jan 16, 2014 22:16:05 GMT

Quote

Jan 16, 2014 3:15:24 GMT Chris said:

Jan 15, 2014 14:02:05 GMT Stinky666 said:

Is there any particular reason why? Does it load faster or anything? Or would moving it not really make a difference?

Consistency mainly. That, and we're -already- editing the CSS file... might as well. You can also then, in theory, expand it to be customizable using the Advanced CSS Editor by adding rules. (Again, in theory.

)

I wouldn't personally be adding parts for the CSS Editor bit. To be honest, I haven't really played with it much, except for little bits that I have been told to add in for some stuff to help fix stuff.

But either way, I have edited the above post

Chris

Head Coder

19,519

∞

24

June 2005

Stinky's Board Remodel Jan 19, 2014 19:47:31 GMT Stinky666 likes this

Quote

Jan 16, 2014 22:16:05 GMT Stinky666 said:

Jan 16, 2014 3:15:24 GMT Chris said:

Consistency mainly. That, and we're -already- editing the CSS file... might as well. You can also then, in theory, expand it to be customizable using the Advanced CSS Editor by adding rules. (Again, in theory.

)

I wouldn't personally be adding parts for the CSS Editor bit. To be honest, I haven't really played with it much, except for little bits that I have been told to add in for some stuff to help fix stuff.

But either way, I have edited the above post

I haven't played with it enough yet either. Like I said, all of this is "in theory." I don't care if you do or don't. Just some suggestions that could make it easier to edit/use.