Cleaned v5 templates | GANGNAM STYLE

katya

Administrator

Seer of Blood

625 POSTS	$
OFFLINE	GALLERY

Cleaned v5 templates POST CREATED Feb 16, 2013 22:13:00 GMT -8 amlin and Maniac like this

Quote

Post by katya on Feb 16, 2013 22:13:00 GMT -8

Okay, so everyone knows v5 is a headache. I've gotten around that by basically saying screw their CSS stylesheet and all their predefined stuff. The default templates are hell for me to work from, so I've started writing up my own barebones templates to skin from. Beats me if this'll be handy for anyone else, but I figured I may as well share.

Basically, all I've done is reduce the default template to stuff that skinners would actually use, and created a bajillion classes for various forum parts--enough to make the built-in stylesheet mostly irrelevant.

forum wrapper (CSS included in head)
.pop_html controls whether the navtree has a dropdown menu or not; display: none sets it to off
.recent-threads-button is the participated button
.logger is a container for the welcome+login/logout stuff.

<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]

<style>
.popup_html {
display: none;
}

#forumcontainer {
display: block;
background-color: white;
padding: 20px;
}


#navigation-menu {
display: block;
margin: auto;
padding: 5px;
border-radius: 0px;

}

#navigation-menu a {
display: inline;
margin: 0px 5px;
color: black;
}

.navactive {
font-style: italic;
}

#navigation-menu div.tip-holder {
right: -10px;
top: -12px;
}

#navigation-tree {
border-radius: 0px;
}

.recent-threads-button {
border-radius: 0px;
}

.logger {

}

.logger a {
}

</style>

</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}

<div id="forumcontainer">

<header>

<div id="navigation-menu" class="ui-helper-clearfix">
{foreach $[navigation.menu]}
<a{if $[navigation.menu.active]} class="navactive"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
{/foreach}
</div>


<div class="logger">
{if !$[current_user.is_member]}
Welcome Guest. Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</div>



$[participated_threads_link]




<div id="navigation-tree">
$[navigation.tree]
</div>

</header>

$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>

$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>

board list CSS
.on/.off should be familiar if you've skinned for v4; they represent new posts and no new posts, respectively.
.redirect represents what shows up in place of on/off if the board is actually a link.

<style>
.forumtable {
width: 100%;
margin: 20px;
}

.boardcontainer {
background-color: gainsboro;
margin: 10px;
}

.on {
color: blue;
font-size: 30px;
display: block;
}

.off {
color: red;
font-size: 30px;
display: block;
}

.redirect {
color: yellow;
font-size: 30px;
display: block;
}

.boardname a {
color: green;
font-size: 22px;
}

.sublinks {
display: block;
}

.desc {
display: block;
background-color: silver;
padding: 5px;
}

.threadcount {
display: block;
font-size: 20px;
color: pink;
}

.postcount {
display: block;
font-size: 20px;
color: purple;
}

.recent {
display: block;
font-size: 11px;
}


</style>

board list template:

<table class="forumtable">
{foreach $[board]}


<tr>
<td>
{if !$[board.is_redirect]}

<div class="boardcontainer">

{if $[board.icon.title] == "No New Posts"}
<div class="off">OLD</div>
{/if}
{if $[board.icon.title] == "New Posts"}
<div class="on">NEW</div>
{/if}

<div class="boardname">$[board]</div>

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

<div class="threadcount">{if $[board.threads] == -1}0{else}$[board.threads]{/if} threads</div>

<div class="postcount">{if $[board.posts] == -1}0{else}$[board.posts]{/if} posts</div>

<div class="recent">
{if $[board.posts] > 0}
{if $[board.last_thread]}
$[board.last_thread.recent_link] 
by $[board.last_thread.last_post.created_by_user] 
<span class="date">$[board.last_thread.last_post.date]</span>
{/if}
{else}
No posts have been made on this board.
{/if}
</div>

{if $[board.sub_board]}
Sub-board{if $[board.sub_board] != 1}s{/if}:{foreach $[board.sub_board]}$[board.sub_board]$[board.sub_board.comma] {/foreach}<br>
{/if}

</div>
</td>
</tr>


{else}
<tr>
<td>
<div class="boardcontainer">

{if $[board.icon.title] == "Redirect"}
<div class="redirect">LINK</div>
{/if}

<div class="boardname">$[board]</div>
<div class="desc">$[board.description]</div>


</div>
</td>
</tr>
{/if}


{/foreach}



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

</table>