|
|
Post by Tumble on Aug 12, 2015 22:37:17 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>
#navigation-menu{width:94.7%;
}
/*don't touch this*/
.f-nav1{ z-index: 9999; position: fixed; left:0; top: 0; width: 100%;
}
/*the margin move the menu over and the 1s is the transition speed*/
.f-nav1 ul{ margin-left:30px;transition-duration: 1s;
}
/*this was added to keep the tips in view*/
.f-nav1 ul li{ padding-top:6px;padding-bottom:4px;
}
/*positioning the logo*/
#logo-fade{position:relative;float:left;top:6px; left:10px;z-index:3000;background-color: rgb(55,55,55,0.4); display:none;transition-duration: 2s;
}
</style>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<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">
<!--added the logo here-->
<img id="logo-fade" style="display:none;" src="http://storage.proboards.com/2955945/i/PPLfTdq7IWaaDtC7Opn5.png ">
<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>
<!--this added-->
<div style="clear:both;"></div> <!--this added-->
<div id="wrapper"><!--moved wrapper and header here-->
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
$[header]
<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>
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('#navigation-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 140) {
nav.addClass("f-nav1");
} else {
nav.removeClass("f-nav1");
}
});
});
</script>
<!--<script>
var img = $('#logo-fade');
$(window).scroll(function(){
if($(window).scrollTop() <140 ){
img.fadeOut(1);
} else {
img.fadeIn(2000);
}
});
</script>-->
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() <140 ){
$('#logo-fade').fadeOut(10);
} else {
$('#logo-fade').fadeIn(200);
}
});
</script>
<!--<script>
$(document).ready(function(){
// hide image first
$("#logo-fade").hide();
// fade in #logo-fade
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 110) {
$('#logo-fade').fadeIn();
} else {
$('#logo-fade').fadeOut();
}
});
// scroll body to 0px on click
$('#logo-fade a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>-->
|
|
|
|
Post by Tumble on Aug 13, 2015 0:13:31 GMT -5
|
|
|
|
Post by Tumble on Aug 22, 2015 18:27:15 GMT -5
xx
|
|
|
|
Post by Tumble on Aug 22, 2015 23:27:13 GMT -5
|
|
|
|
Post by Tumble on Aug 23, 2015 7:13:24 GMT -5
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// shows the slickbox on clicking the noted link
$('#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
<a id="slick-show" href="#">Show the box</a>
<a id="slick-hide" href="#">Show the box</a>
<div id="slickbox" style="display: none;">This is the box that will be shown and hidden and toggled at your whim. :)</div>
|
|
|
|
Post by Tumble on Aug 23, 2015 7:56:29 GMT -5
|
|
|
|
Post by Tumble on Aug 23, 2015 8:07:43 GMT -5
<style>
* {
word-wrap: break-word;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, tfoot, thead, tt, u, ul, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: 0 0;
}
.smallheader {
background: #f1f1f1;
border-top: 1px solid #E4E4E4;
border-bottom: 1px solid #E0E0E0;
box-shadow: 0px 0px 0px #e0e0e0;
width: 100%;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
body {
line-height: 1;
}
body {
background-color: #ffffff;
background-image: none;
line-height: 1.2;
color: #000000;
font-size: 10pt;
font-family: Verdana,Arial;
text-decoration: none;
text-transform: none;
font-variant: normal;
}
body {
background-color: #efefef;
color: #666;
font-family: "open_sansregular",Tahoma,Arial,Sans-Serif;
font-size: 13px;
text-align: center;
line-height: 1.4;
margin: 0 auto;
}
.wrap {
width: 90%;
margin: 0 auto;border:1px solid purple;background-color:tan;height:40px;
}
.rblock {
float: right;border:1px solid red;
}
.lblock {
float: left;border:1px solid green;
}
.socialmenu {
height: 40px;
line-height: 40px;
width: auto;
display: inline-block;
margin-left: 0px;
float: left;
padding: 0;
border-right: 1px solid #dadada;
border-left: 1px solid #F4F4F4;
}
ol, ul {
list-style: none;
}
p, ul {
display: block;
}
.socialmenu ul {
float: left;
margin: 0;
padding: 0;
margin-left: -20px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.socialmenu ul li {
float: left;
display: inline-block;
margin-right: 0px;
list-style: none;
}
a {
cursor: pointer;
color: #004fa0;
font: 100% Verdana, Arial;
text-decoration: none;
}
a {
color: #000000;
text-decoration: none;
}
.ease-all {
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.socialmenu li a:link, .socialmenu li a:visited, .socialmenu li a {
color: #999;
display: inline-block;
padding: 0;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
transform: translate(0px, 0px);
}
.fa-dribbble::before {
content: "\f17d";
}
.fa-pinterest::before {
content: "\f0d2";
}
.fa-youtube::before {
content: "\f167";
}
.fa-twitter::before {
content: "\f099";
}
.fa-facebook-f::before, .fa-facebook::before {
content: "\f09a";
}
.socialmenu ul li a i {
border: 0;
display: inline-block;
padding: 0px 0px;
width: 40px;
height: 40px;
line-height: 40px;
border-left: 1px solid #dadada;
border-right: 1px solid #F4F4F4;
font-size: 1.3em;
}
:focus {
outline: 0;
}
.mnav {
width: auto;
right: 0px;
float: right!important;
text-align: right;
display: inline-block;
padding: 0px;
margin-right: 0px;
border-left: 1px solid #F9F9F9;
border-right: 1px solid #EFEFEF;
}
.fa-sign-in::before {
content: "\f090";
}
.fa-certificate::before {
content: "\f0a3";
}
</style>
<div class="smallheader">
<div class="wrap" style="background-color:tan;">
<div class="rblock">
<div class="mnav">
<i class="fa fa-sign-in" style="margin-right: 6px;" original-title=""></i> <a href="https://login.proboards.com/login/6293044/1">Login</a> <i class="fa fa-certificate" style="margin-right: 6px;" original-title=""></i> <a href="https://login.proboards.com/register/6293044">Register</a>.
</div>
</div>
<div class="lblock">
<div class="socialmenu">
<ul>
<li><a class="ease-all" href="#" original-title="Like Our Page on Facebook"><i class="fa fa-facebook" original-title=""></i></a></li>
<li><a class="ease-all" href="#" original-title="Follow us on Twitter"><i class="fa fa-twitter" original-title=""></i></a></li>
<li><a title="View our Youtube Channel" class="ease-all" href="#"><i class="fa fa-youtube"></i></a></li>
<li><a title="Follow us on Pinterest" class="ease-all" href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a title="Follow us on Dribbble" class="ease-all" href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
|
|
