[Kitten4u Only With A Long Name]

Color to Dust: First board mod

Board
{if $[board.sub_board_list]}
<div class="container boards">
<div class="title-bar"><h2>Sub-Boards</h2></div>
<div class="content cap-bottom">
$[board.sub_board_list]
</div>
</div>
{/if}
{if $[display_thread_list]}
<div{if $[viewing_bookmarks]} id="bookmarks"{/if} class="container threads">
<div class="title-bar">
{if $[create_thread_button]}
<ul class="controls"><li>$[create_thread_button]</li></ul>
{/if}
<h1>$[board.display_name]</h1>
</div>
<div class="control-bar ui-helper-clearfix $[scroll_class]">
$[search]
<div class="controls">
$[selection_menu]
$[action_menu]
</div>
$[pagination]
</div>
<div class="content cap-bottom">
<table class="list">
<thead>
<tr class="head">
<th class="icon"><span class="aria-hidden">Status</span> </th>
<th class="checkbox"> </th>
<th class="main">Subject</th>
<th class="created-by">Created By</th>
<th class="replies">Replies</th>
<th class="views">Views</th>
<th class="latest last">Last Post</th>
</tr>
</thead>
<tbody class="$[list_class]">
$[thread_list]
</tbody>
</table>
</div>
</div>
{/if}

{if $[board.id]}{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Board Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
{if $[board.description]}
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.description]</td>
<td class="info last">
<div class="board-name">$[board.name]</div>
<div class="board-description">$[board.description]</div>
</td>
</tr>
</table>
</td>
</tr>
{/if}
<tr{if !$[show_users_viewing]} class="last"{/if}>
<td>
<table>
<tr>
<td class="icon">$[image.stats]</td>
<td class="info">
<table>
<tbody>
<tr><th colspan="2">Threads and Posts</th></tr>
<tr><td>Total Threads:</td><td>{if $[total_threads] == -1}N/A{else}$[total_threads]{/if}</td></tr>
<tr><td>Total Posts:</td><td>{if $[total_posts] == -1}N/A{else}$[total_posts]{/if}</td></tr>
{if $[board.moderators_link]}<tr><td colspan="2">This board has $[board.moderators_link]</td></tr>{/if}
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="icon">$[image.members]</td>
<td class="info last">
<table>
<tbody>
<tr><th colspan="1">On This Board</th></tr>
<tr><td>You <strong>can{if !$[can.create_threads]}not{/if}</strong> create threads.</td></tr>
<tr><td>You <strong>can{if !$[can.reply_to_threads]}not{/if}</strong> reply to threads.</td></tr>
<tr><td>You <strong>can{if !$[can.create_polls]}not{/if}</strong> create polls.</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
{if $[show_users_viewing]}
<tr class="last">
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Viewing</th></tr>
<tr><td>$[total_board_staff] Staff, $[total_board_members] Member{if $[total_board_members] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_board_guests] Guest{if $[total_board_guests] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
<tr><td><tr><td>
{foreach $[board_user]}
$[board_user]{if $[board_user.invisible]} <span class="small">(invisible)</span>{/if}$[board_user.comma]
{/foreach}
{if $[total_online_not_shown] > 0}
, and <a href="$[view_active_members_link.href]" class="$[view_active_members_link.class]">$[total_online_not_shown] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
{/if}
</tbody>
</table>
</div>
</div>
{/if}{/if}

Board List
{foreach $[board]}

                <div class="board-top-area">
                    <div class="board-title">
                        $[board]
                    </div>
                       <div class="last-post-avatar" style="border: 10px solid {if $[board.last_thread.last_post.created_by.group]}#$[board.last_thread.last_post.created_by.group.color]{else}#cbebec{/if}">
                           {if $[board.last_thread]}
                               $[board.last_thread.last_post.created_by.avatar]
                           {else}
                               <div class="avatar-wrapper">
                                   <img src="//storage.proboards.com/6465147/images/OODfRtnmVjDLDAMrkgyP.png">
                               </div>
                           {/if}
                       </div>
                    <div class="last-post-area">
                        {if $[board.last_thread]}
                               <div class="last-post-link">$[board.last_thread.recent_link]</div>
                               <div class="last-post-created-by">$[board.last_thread.last_post.created_by]</div>
                            <div class="last-post-title" style="color: #090909; background-color: {if $[board.last_thread.last_post.created_by.group]}#$[board.last_thread.last_post.created_by.group.color]{else}#cbebec{/if};">$[board.last_thread.last_post.created_on]</div>
                           {else}
                            <div class="last-post-title" style="background-color: #cbebec; color: #090909;">No posts in this area</div>
                           {/if}
                       </div>
</div>
                   <div class="board-bottom-area">
                    <div class="board-description">
                        <div class="description-area">
                            $[board.description]
                           </div>
</div>
                       <div class="board-totals">
                        <div class="board-totals-item">
                            $[board.threads]
                               <div class="board-totals-label">Threads</div>
</div>
                           <div class="board-totals-item">
                            $[board.posts]
                               <div class="board-totals-label">Posts</div>
                           </div>
                       </div>
                       <div class="sub-board-area">
                        <div class="sub-boards">
                            {foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a> {/foreach}
                           </div>
                       </div>
                   </div>
<div class="board-base-image"></div>

{/foreach}
{if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}


Home
$[news]
{foreach $[category]}
$[category.anchor]
<div class="boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
       <div class="category-border-top"><img src="//storage.proboards.com/6465147/images/qlPgCKpohuVOmbPOWlDC.png"></div>
<div class="cap-bottom">
$[category.board_list]
</div>
       <div class="category-border-bottom"><img src="//storage.proboards.com/6465147/images/qlPgCKpohuVOmbPOWlDC.png"></div>
</div>
{/foreach}

{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td class="icon">$[image.stats]</td>
<td class="info">
<table>
<tbody>
<tr><th>Threads and Posts</th></tr>
<tr><td>Total Threads: $[total_threads]      Total Posts: $[total_posts]</td></tr>
{if $[last_updated_thread]}<tr><td>Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by] ($[last_updated_thread.last_post.created_on])</td></tr>{/if}
<tr><td>$[recent_threads_link] - $[recent_posts_link]{if $[rss_feed_link]} - $[rss_feed_link]{/if}{if $[mark_boards_read_link]} - $[mark_boards_read_link]{/if}</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="icon">$[image.members]</td>
<td class="info">
<table>
<tbody>
<tr><th>Members</th></tr>
<tr><td>Total Members: $[total_members]</td></tr>
<tr><td>Newest Member: $[newest_user]</td></tr>
<tr><td>Most Users Online: $[most_users_online] <span class="small">($[most_users_online_date])</span></td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="last">
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online_24]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online in the Last 24 Hours</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
<tr><td>
{foreach $[online_user_24]}
$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]
{/foreach}
{if $[total_online_not_shown_24]}
, and <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}

Style
.title_wrapper {
   text-align: center;
   font-family: rwbyStyle;
   font-size: 52px;
   text-shadow: 0px 2px 4px #000000;
   color: @weiss;
   letter-spacing: 1.8px;
   padding-bottom: 20px;
   margin-top: 150px;
}
.category-border-top {
   margin-top: -28px;
}
.category-border-bottom img {
   transform: scaleY(-1);
}

.board-top-area {
   display: flex;
   width: 100%;
}

.board-title {
   display: inline-block;
   padding: 15px 30px;
   width: 675px;
   align-self: flex-end;
   box-sizing: border-box;
   margin-right: -75px;
   background: @ruby;
}
.board-title:hover {
   background: linear-gradient(270deg, #890001, #cbebec, #090909, #feda65, #890001);
   background-size: 1500% 1500%;

   animation: AnimationName 30s ease infinite;
}

@keyframes AnimationName {
   0%{background-position:0% 50%}
   50%{background-position:100% 50%}
   100%{background-position:0% 50%}
}
.board-title a {
   font-family: rwbyStyle;
   font-size: 50px;
   color: @weiss;
   letter-spacing: 1.8px;
   max-width: 670px;
   white-space: nowrap;
   text-shadow: 0px 2px 4px #000000;
}

.last-post-avatar {
   display: inline-block;
   border-radius: 100px 100px 0px 100px;
   position: relative;
   z-index: 10;
   width: 125px;
   height: 125px;
}
.last-post-avatar .avatar-wrapper {
   border-radius: 100px 100px 0px 100px;
   z-index: 10;
   width: 125px;
   height: 125px;
}
.last-post-avatar img {
   border-radius: 100px 100px 0px 100px;
   z-index: 10;
   width: 125px;
   height: 125px;
}

.last-post-area {
   flex: 1;
   align-self: flex-end;
   box-sizing: border-box;
   height: 76px;
   margin-left: -75px;
   padding: 0px 0px 0px 75px;
   background-color: @ruby;
   font-size: 14px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
.last-post-area a {
   font-size: 14px;
}
.last-post-link {
   padding: 4px 10px;
   white-space: nowrap;
   width: 230px;
   overflow: hidden;
  text-overflow: ellipsis;
   color: @yang;
}
.last-post-created-by {
   padding: 0px 0px 6px 10px;
   white-space: nowrap;
}
.last-post-title {
   padding: 4px;
}

.board-bottom-area {
   display: flex;
   box-sizing: border-box;
   clip-path: polygon(0px 0px, 40px 150px, 960px 150px, 1001px 0px);
   background-color: @ruby;
   background-size: cover;
   position: relative;
   z-index: 1;
   background: url('//storage.proboards.com/6465147/images/GngNHdHeUqKVHMnsQbIi.png');
}

.board-description {
   display: inline-block;
   width: 637px;
   padding: 10px 10px 20px 20px;
   margin-left: 40px;
   box-sizing: border-box;
   position: relative;
   z-index: 10;
}
.description-area {
   background-color: @blake;
   color: @weiss;
   padding: 10px;
   border: 1px solid black;
   font-family: @body-font;
   font-size: 14px;
   line-height: 155%;
   z-index: 11;
   position: relative;
   margin-left: -5px;
   height: 98px;
   overflow: auto;
}

.board-totals {
   display: inline-block;
   width: 120px;
   box-sizing: border-box;
   padding-top: 10px;
   position: relative;
   z-index: 3;
}
.board-totals-item {
   background-color: @blake;
   padding: 6px;
   text-align: center;
   font-family: @body-font;
   font-size: 24px;
   display: block;
   border: 1px solid black;
   color: @weiss;
   border-radius: 0px 0px 100px 100px;
   height: 60px;
   width: 120px;
   box-sizing: border-box;
}
.board-totals-item:first-child {
   border-radius: 0px 100px 0px 0px;
   border-bottom: 2px solid black;
}
.board-totals-label {
   font-size: 14px;
}

.sub-board-area {
   display: inline-block;
   flex: 1;
   box-sizing: border-box;
   margin-left: -60px;
   position: relative;
   text-align: center;
   z-index: 1;
   padding-top: 10px;
   margin-right: 55px;
}
.sub-boards {
   height: 118px;
   overflow: auto;
   padding: 0px;
   width: 100%;
}
.sub-boards a {
   background-color: @yang;
   color: @blake;
   width: 100%;
   padding: 6px 6px 6px 50px;
   display: block;
   font-size: 14px;
   box-sizing: border-box;
   border-bottom: 1px solid #c1a33b;
   border-right: 1px solid black;
}
.sub-boards a:first-child {
   border-top: 1px solid black;
}
.sub-boards a:hover {
   background-color: @weiss;
}
.board-base-image {
   margin: 0 0 30px 0;
   background: url('//storage.proboards.com/6465147/images/dQYaEGYk0fujKULVRHGP.png');
   width: 1000px;
   height: 50px;
}
.board-bottom-area:last-child .board-base-image {
   margin: 0;
}