|
|
Post by Tumble on Sept 30, 2016 22:27:46 GMT -5
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<style>
#wrapper1{width:793px;
}
.top {
position:relative;
top:237px;
width: 743px;
height: 236px;
opacity: 1;
text-align: center;
margin-right:auto!important;
margin-left:auto!important;z-index:-1;
}
.title {
position: fixed;
top:0px;
left: 50%;
transform: translate(-50%, 0);
width: 743px;
height: 236px;
/* border-right: 12px solid black;
border-left:12px solid black;
margin-right:auto!important;
margin-left:auto!important;
background-image:url(http://i1268.photobucket.com/albums/jj577/ted_holmes1/T2TQFIs_zpsqdnhmcbd.gif);
background-repeat:no-repeat;*/
}
</style>
<!--http://codepen.io/nickcil/pen/sfutl/-->
<center>
<div id="wrapper1">
<header>
<center>
<div id="banner-container" role="banner">
<div class="top">
<center>
</center>
</div>
</div>
</center>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a {if $[navigation.menu.active]} class="state-active"{/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>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
</header>
<div style="position:relative;width:773px;margin-auto;background-color:black;padding-left;12px;padding-right:12px;">
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
$[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>
<script>
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
</script>
|
|
|
|
Post by jasmine on Aug 7, 2017 14:31:08 GMT -5
That's a cool scroll.
|
|
|
|
Post by Tumble on Aug 12, 2017 21:47:36 GMT -5
$[news]
{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}
{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2>Legend</h2></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
</div>
</div>
{/if}
<style>
.make_relative{position:relative;}
.rotate_text{ transform: rotate(-90deg);
height:140px; width:150px;
font-size:16px; color:black;
}
.rotate_text_sm{ transform: rotate(-90deg);
font-size:12px;border:1px solid yellow;
color:black;vertical-align:center;text-align:center; width:40px; height:20px;
}
.rotate_text_sm24{ transform: rotate(-90deg);
font-size:12px;border:1px solid purple;
color:black;width:80px; height:20px; margin-left:-20px;}
/*td tags*/
#who_online{width:30px;height:130px;
border:1px solid blue;text-align:center;
}
#now{width:40px;height:45%;vertical-align:center;text-align:center;padding:0px;border:1px solid green;
}
#last_24{width:40px;height:55%;vertical-align:middle;text-align:right; padding:0px; border:1px solid green;
}
#affies_wrap{height:130px;
border:1px solid blue;text-align:center;
}
#affies{width:5%;
border:1px solid blue;text-align:center;
}
.content td,#sample_table9 td {vertical-align:middle;text-align:center;}
/*liked and top poster lists*/
.liked_posts{width:100%;margin-right:auto;margin-left:auto;padding-top:6px;float:right;}
.liked_posts ol{display:-moz-inline-stack;list-style-position: inside!important;
list-style: decimal;display:inline-block;zoom:1;*display:inline;padding-top:6px;
}
.liked_posts ol li{text-align:left;line-height:18px;}
</style>
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td style="width:70%;border:1px solid red;">
<!--ONLINE INFO-->
<table id="sample_table9">
<tr>
<td rowspan="2" id="who_online">
<div class="make_relative">
<div class="rotate_text">Users Online</div>
</div>
</td>
<td id="now">
<div class="make_relative">
<div class="rotate_text_sm">Now</div>
</div>
</td>
<td>
Users online now
</td>
</tr>
<tr>
<td id="last_24">
<div class="make_relative">
<div class="rotate_text_sm24">In 24 hrs</div>
</div>
</td>
<td>
Users in the last 24 hours
</td>
</tr>
</table>
<!--END OF ONLINE INFO-->
</td>
<td style="text-align:center;vertical-align:middle;">
<!--TOP POSTERS-->
<table>
<tr>
<td>
<div class="make_relative">
<div class="rotate_text">Top Posters</div>
</div>
</td>
<td>
<div class="liked_posts">
<b>Top 5 Posters</b><br>
<ol>
<li><span>Tumbleweed</span></li>
<li><span>Jeff</span></li>
<li><span>Sascatuan</span></li>
<li><span>Babybug </span></li>
<li><span>Member 5</span></li>
</ol>
</div>
</td>
</tr>
</table>
<!--END OF TOP POSTERS-->
</td>
</tr>
<tr>
<td id="affie_wrap">
<!--AFFILIATES-->
<table>
<tr>
<td width="50%">
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="3">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a><br>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
</marquee>
</td>
<td>
<td width="5%">
<div class="make_relative">
<div class="rotate_text">Sister Sites</div>
</div>
<td width="40%">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/88x33"></a>
</td>
<td id="affies">
<div class="make_relative">
<div class="rotate_text">Affiliates</div>
</div>
</td>
</tr>
</table>
<!--END OF AFFILIATES-->
</td>
<td>
<!--TOP LIKED THREAD-->
<table width="100%">
<tr>
<td>
Things here
</td>
<td width="8%">
<div class="make_relative">
<div class="rotate_text">Threads Liked</div>
</div>
</td>
</tr>
</table>
<!--END OF TOP LIKED THREAD-->
</td>
</tr>
<tr class="last">
<td>
<!--FORUM AND MEMBER INFO-->
<table id="sample_table9">
<tr>
<td rowspan="2" id="who_online">
<div class="make_relative">
<div class="rotate_text">Info</div>
</div>
</td>
<td id="now">
<div class="make_relative">
<div class="rotate_text_sm">Forum</div>
</div>
</td>
<td>
<!--CATEGORIES AND BOARDS-->
Categories: $[category.length]<br />
Boards: <span id="boardNum"></span>
<script type="text/javascript">
var boardNum = $(".board-link").length;
$("#boardNum").text(boardNum);
</script>
<br />
Sub-Boards:<span id="subBoardNum"></span>
<script type="text/javascript">
var subBoardNum = $(".sub-boards a").length
$("#subBoardNum").text(subBoardNum);
</script>
<!--END OF CATEGORIES AND BOARDS-->
</td>
<td>
Posts threads
</td>
</tr>
<tr>
<td id="last_24">
<div class="make_relative">
<div class="rotate_text_sm24">Member</div>
</div>
</td>
<td>
Most users online ,bdays
</td>
<td>
Something
</td>
</tr>
</table>
<!--END OF FORUM AND MEMBER INFO-->
</td>
<td>
<!--FORUM AND MEMBER INFO-->
<div class="make_relative">
<div class="rotate_text">Must Read</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
|
|
