Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Stinky666

Stinky666 Avatar

****
Senior Member

422


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





PREVIEW:
http://i.imgur.com/JG8rgQ0.png





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):

<!--Board List Remodel by Stinky666 - http://smangii.proboards.com-->
<table class="list" role="grid">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
<!--<td class="icon">$[board.icon]</td>-->
<td class="main">
<span class="link"><a href="$[board.href]">$[board.icon] $[board.display_name]</a> <!--<font color="#6f8992">({if $[board.posts] == -1}post and thread stats{else}$[board.posts] posts |{/if} {if $[board.threads] == -1}hidden){else}$[board.threads] threads)</font> {/if}-->
{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

Chris Avatar

******
Head Coder

19,519


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

Stinky666

Stinky666 Avatar

****
Senior Member

422


December 2009
Chris Avatar
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

Chris Avatar

******
Head Coder

19,519


June 2005
Stinky666 Avatar
Chris Avatar
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. :P)

Stinky666

Stinky666 Avatar

****
Senior Member

422


December 2009
Chris Avatar
Stinky666 Avatar
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. :P)



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 :P

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
Stinky666 Avatar
Chris Avatar
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. :P)

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 :P
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. :)

newBookmarkLockedFalling