Hover over Banner / Tables [CB] Update 1.0
Sept 8, 2013 20:26:41 GMT -8
Jen Parsons, Txep'Kxetse, and 4 more like this
Post by SARI-SINISTER on Sept 8, 2013 20:26:41 GMT -8
Title: Hover over Banner / Tables Update 1.0
Description: Need a place to add tables, but want something organized? This code offers you the ability to add a hover code to your banner/logo, and upon doing so you can add tables into the banner. So when a user hovers their mouse of your banner, viola! There is a welcome table, updates, links...etc!
Browsers: Chrome, Firefox, and IE all worked.
Preview: One, two Hover!
Live Preview: Eating Us Alive!
This code can be very complex, and I'm going to leave things blank for you too fill in. I had one friend help me figure out the coding transition, but this code was written by me. I edited the Style Sheet, and the Forum Wrapper in the Layout Templates. The following is what I have added into the Style Sheet:
.base is where you will define your header/logo image. Where I've said banner image here, you need to past a direct link to your banner's image. This code means that you do not need to upload your image directly to the forum. DO NOT place the banner image into anywhere but in .base.
.hover has nothing to do with the actual hovering of the image. It is simply what you want things to look like after it has hovered. The background color, the width and height for the banner...etc
.hover:hover is the actual hover of the image. It has nothing to do with what the hover looks like once it's fully transitioned. The only thing it controls is how full the hover is. Opacity: 1 will leave it a solid color, but any other number would need to be .# and I have mine on .9 so that it is slightly transparent.
The second section is for the links I have in the tables. You don't have to use them unless you want links on the forum. You can also change euaq1 to something else if you don't want it as such. EUA is the initials of my forum. You would need to change it in the Layout Templates as well too. The following is what I have in the Layout Templates:
The above was placed between the:
<!DOCTYPE HTML>
$[tag.html.open]
and
</header>
This moves the navigation menu as well. As far as I am concerned, it has made sure my banner is centered. As well as, my tables are centered. The second section are blank. They are table codes, and I tried to make it obvious what you needed to edit. Anything titled #here needs a color code placed after the #. The rest is information you can fill in. You need css and html experience to deal with this. It can become very complex if anything isn't copied right.
I will also say that I removed the navigation tree completely. It wasn't pretty looking, and I'm picky. You can leave it if you can make it look nice. If you have any questions, feel free to post! Remember who made this, and all the hours I slaved over it. Trust me... It took a lot of hours!
If you don't want to move the Nav Menu, then your Layout Templates need to be edited right where it says <a id="navigation-skip"<div id="wrapper"><header> and <a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
This is so it is above the nav menu's. Add this code:
Then, it's pretty simple. Add two: <br><br> Right above: $[participated_threads_link] <div id="navigation-tree"> $[navigation.tree] </div>
Hopefully that helps a little better.
Description: Need a place to add tables, but want something organized? This code offers you the ability to add a hover code to your banner/logo, and upon doing so you can add tables into the banner. So when a user hovers their mouse of your banner, viola! There is a welcome table, updates, links...etc!
Browsers: Chrome, Firefox, and IE all worked.
Preview: One, two Hover!
Live Preview: Eating Us Alive!
This code can be very complex, and I'm going to leave things blank for you too fill in. I had one friend help me figure out the coding transition, but this code was written by me. I edited the Style Sheet, and the Forum Wrapper in the Layout Templates. The following is what I have added into the Style Sheet:
.base { border-radius: 100px 100px 0px 0px; opacity: 1; width: ###px; height: ###px; background-color: #here; }
.hover { border-radius: 100px 100px 0px 0px; width: ###px; height: ###px; background: #here; color: #here; opacity: 0; transition-duration: 2s; -moz-transition-duration: 2s; -webkit-transition-duration: 2s;}
.hover:hover {opacity: .9;}
.euaql { background-color: #here; color: #here; padding: 5px; text-align: justify; font-family: Georgia; font-style: italic; line-height: 10px; letter-spacing: 1px; width: 150px; }
a.eua:link, a.eua:visited { display: block; background: #here; padding: 3px 0px 2px 0px; border-left: #here 6px solid; text-align: center; font-family: Georgia; color: #here; text-transform: uppercase; font-size: 10px; margin-bottom:1.4px; }
a.eua:active, a.eua:hover { display: block; transition-duration: 2s; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; border-left: #here 6px solid;}
.tabletitle1 { margin-right:2px;text-align:center;margin-top:1px;background-color: #here;width:205px;height:17px;font-size:13px;font-family:Verdana; }
.tabletitle2 { margin-right:2px;text-align:center;margin-top:1px;background-color: #here;width:125px;height:17px;font-size:13px;font-family:Verdana; }
.tabletop { font-size:9px;background-color: #here;color:#here;width:205px;height:165px;text-align:justify; }
.tablebottom { font-size:9px;text-align:justify;background-color: #here;color:#here;width:125px;height:150px; }
.base is where you will define your header/logo image. Where I've said banner image here, you need to past a direct link to your banner's image. This code means that you do not need to upload your image directly to the forum. DO NOT place the banner image into anywhere but in .base.
.hover has nothing to do with the actual hovering of the image. It is simply what you want things to look like after it has hovered. The background color, the width and height for the banner...etc
.hover:hover is the actual hover of the image. It has nothing to do with what the hover looks like once it's fully transitioned. The only thing it controls is how full the hover is. Opacity: 1 will leave it a solid color, but any other number would need to be .# and I have mine on .9 so that it is slightly transparent.
The second section is for the links I have in the tables. You don't have to use them unless you want links on the forum. You can also change euaq1 to something else if you don't want it as such. EUA is the initials of my forum. You would need to change it in the Layout Templates as well too. The following is what I have in the Layout Templates:
<head>
<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. Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div></center><br>
<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}
<div id="wrapper">
<header>
<center><div class="base">
<div class="hover">
<div style="margin-left: 10px;padding-top:30px;">
<center><table>
<tr><td>
<div class="tabletitle1">WELCOME</div>
<div class="tabletop">
<div style="padding:1px;">A beautiful little welcome message here, for your lovely guests and members!
</div></div></td>
<td><div class="tabletitle1">QUICK LINKS</div>
<div class="euaql">
<a href="link" class="eua">THE RULES</a>
<a href="link" class="eua">STORYLINE</a>
<a href="link" class="eua">THE PATHOGEN</a>
<a href="link" class="eua">THE CLAIMS</a>
<a href="link" class="eua">THE GROUPS</a>
<a href="link" class="eua">THE TIMELINE</a>
<a href="link" class="eua">REGISTRATION</a>
<a href="link" class="eua">AFFILIATE</a>
</div></td>
<td><div class="tabletitle1">UPDATES</div>
<div class="tabletop">
<div style="padding:2px;"><center><font size=1>Month || Season</font></center><Br>
<div style="overflow-y: scroll;height: 110px;"><br><Br>
Information for site updates in here!</div>
</div></div></td></tr>
</table></center>
<center><div style="margin-left:10px;"><table>
<tr><td>
<div class="tabletitle2">STAFF</div>
<div class="tablebottom">
<center><div style="padding:5px;">Staff can be placed here!
</div></center></div></td>
<td>
<div class="tabletitle2">STATISTICS</div>
<div class="tablebottom">
<div style="padding:5px;">
Statistics are placed in here!
</div></div></td>
<td><div class="tabletitle2">AWARDS</div>
<div class="tablebottom">
<div style="padding:0px;">Awards can be placed here!
</div></div></td>
<td><div class="tabletitle2">CREDITS</div>
<div class="tablebottom">
<div style="padding:5px;">Credits can be placed here!
</div></div></td></tr>
</table></div></center>
</div>
</div>The above was placed between the:
<!DOCTYPE HTML>
$[tag.html.open]
and
</header>
This moves the navigation menu as well. As far as I am concerned, it has made sure my banner is centered. As well as, my tables are centered. The second section are blank. They are table codes, and I tried to make it obvious what you needed to edit. Anything titled #here needs a color code placed after the #. The rest is information you can fill in. You need css and html experience to deal with this. It can become very complex if anything isn't copied right.
I will also say that I removed the navigation tree completely. It wasn't pretty looking, and I'm picky. You can leave it if you can make it look nice. If you have any questions, feel free to post! Remember who made this, and all the hours I slaved over it. Trust me... It took a lot of hours!
If you don't want to move the Nav Menu, then your Layout Templates need to be edited right where it says <a id="navigation-skip"<div id="wrapper"><header> and <a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
This is so it is above the nav menu's. Add this code:
<center><div class="base">
<div class="hover">
<div style="margin-left: 10px;padding-top:30px;">
<center><table>
<tr><td>
<div class="tabletitle1">WELCOME</div>
<div class="tabletop">
<div style="padding:1px;">A beautiful little welcome message here, for your lovely guests and members!
</div></div></td>
<td><div class="tabletitle1">QUICK LINKS</div>
<div class="euaql">
<a href="link" class="eua">THE RULES</a>
<a href="link" class="eua">STORYLINE</a>
<a href="link" class="eua">THE PATHOGEN</a>
<a href="link" class="eua">THE CLAIMS</a>
<a href="link" class="eua">THE GROUPS</a>
<a href="link" class="eua">THE TIMELINE</a>
<a href="link" class="eua">REGISTRATION</a>
<a href="link" class="eua">AFFILIATE</a>
</div></td>
<td><div class="tabletitle1">UPDATES</div>
<div class="tabletop">
<div style="padding:2px;"><center><font size=1>Month || Season</font></center><Br>
<div style="overflow-y: scroll;height: 110px;"><br><Br>
Information for site updates in here!</div>
</div></div></td></tr>
</table></center>
<center><div style="margin-left:10px;"><table>
<tr><td>
<div class="tabletitle2">STAFF</div>
<div class="tablebottom">
<center><div style="padding:5px;">Staff can be placed here!
</div></center></div></td>
<td>
<div class="tabletitle2">STATISTICS</div>
<div class="tablebottom">
<div style="padding:5px;">
Statistics are placed in here!
</div></div></td>
<td><div class="tabletitle2">AWARDS</div>
<div class="tablebottom">
<div style="padding:0px;">Awards can be placed here!
</div></div></td>
<td><div class="tabletitle2">CREDITS</div>
<div class="tablebottom">
<div style="padding:5px;">Credits can be placed here!
</div></div></td></tr>
</table></div></center>
</div>
</div>Then, it's pretty simple. Add two: <br><br> Right above: $[participated_threads_link] <div id="navigation-tree"> $[navigation.tree] </div>
Hopefully that helps a little better.
