Code Storage
Sept 13, 2020 16:09:55 GMT -7
Post by Kitten4u Only With A Long Name on Sept 13, 2020 16:09:55 GMT -7
Color to Dust: First board mod
Board
Board List
Home
Style
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;
}