|
Post by Admin on Jun 14, 2013 21:15:01 GMT
xxxx
|
|
|
Post by Admin on Jun 14, 2013 21:15:16 GMT
xxx
|
|
|
Post by Admin on Jun 14, 2013 21:22:04 GMT
xxxx
|
|
|
Post by Admin on May 7, 2015 7:59:50 GMT
|
|
|
Post by Admin on May 9, 2015 9:34:13 GMT
@sugilite O.K I redid them using an animated slide and cleaned things up a bit. I made right sided ones and left sided ones but here are the right sided ones. putteraround11.boards.net/A few things: 1. Keep in mind they are on a test site and don't look as styled as the other ones. 2. I don't have anything but IE to test them on to make sure everything works right so hopefully you might have Chrome or FF and if all is well on one of those browsers they should be o.k. on the other. 3. I don't have a iPhone/cell phone so haven't a clue what they will look like but on my small tablet, they looked ??.
|
|
|
Post by Admin on May 9, 2015 9:34:58 GMT
<div class="slide"> <div id="my_tabbie">Tab One</div> <div class="my_wrapper"> <div class="inner_wrap"> To open more than one tab double click. <br /> If you have more than one tab open the first one will close with one click but double click to close the rest. </div> </div> </div>
<div class="slide" style="position:absolute;top:200px;z-index: 202;"> <div id="my_tabbie">Tab Two</div> <div class="my_wrapper"> <div class="inner_wrap"> Ambassador, society luxury salon cigar townhome portfolio club, grande. Wine art inspiring benefactor noble reserved salon art auction travel travel using, regal with. Benefactor inspiring silk fine blissfull high-rise auction charity. Rare luxury cruise cultered, university cocktail purebred saphire gem. Monogram estate, suite affluent society with designer polo status suite ballroom butler noble cultered university. Silver cutlery, caviar fine cigar acumen gifted property classical property sport sport yacht art silver. </div> </div> </div> <!--You can copy this part to add another tab--> <div class="slide" style="position:absolute;top:386px;z-index: 203;"> <div id="my_tabbie">Tab Two</div> <div class="my_wrapper"> <div class="inner_wrap"> Politically caviar, gilded manor metropolitan genuine enthusiast caviar. Bonds manor aristocratic member classical rich benefactor university tailored philanthropic auction ballroom gold becoming crafted. Educated educated cultered polo affluent with blissfull. Elegant cocktail five-star, cruise salon sheer, monogram pearl delegate butler echelon investments, cocktail in. Auction impressive ornamental benefiting in world, regal in saphire, lifestyle european, fashion acumen art. Cutlery, ornamental topiary, echelon, butler, opulent. Ambassador opera pearl charity in, board, becoming expensive portfolio butler rare. </div> </div> </div> <!--Paste a 4rd tab here and set the top position approx 186px more -->
<script> $(document).ready(function(){ var r=0, dir=true; $(".slide").click(function() { dir = !dir; r = dir? -270 : 0; $(this).stop().animate({right: r+'px'}, 800); }); }); </script> <div style="clear:both;"></div> <script> $('.my_item').hide(); $('.my_divBox').hover(function() { $(this).children('.my_item').show(); }, function() { $(this).children('.my_item').hide(); });
</script>
|
|
|
Post by Admin on May 9, 2015 9:40:01 GMT
<!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} <div id="wrapper"> <header> <div id="banner-container" role="banner"> <h2 id="banner"> $[forum.title] </h2> </div> <br /> <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> $[participated_threads_link] {if $[navigation.tree]} <div id="navigation-tree"> $[navigation.tree] </div> {/if} $[header] <!--<style> #wrapper_two{ width: 85%; margin: 0 auto; background-color:#444444; } </style>--> <div id="wrapper_two"> <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></div> <div class="my_slide"> <div id="my_tabbie">Tab One</div> <div class="my_wrapper"> <div class="inner_wrap"> To open more than one tab double click. <br /> If you have more than one tab open the first one will close with one click but double click to close the rest. </div> </div> </div>
<div class="my_slide" style="position:absolute;top:200px;z-index: 202;"> <div id="my_tabbie">Tab Two</div> <div class="my_wrapper"> <div class="inner_wrap"> Ambassador, society luxury salon cigar townhome portfolio club, grande. Wine art inspiring benefactor noble reserved salon art auction travel travel using, regal with. Benefactor inspiring silk fine blissfull high-rise auction charity. Rare luxury cruise cultered, university cocktail purebred saphire gem. Monogram estate, suite affluent society with designer polo status suite ballroom butler noble cultered university. Silver cutlery, caviar fine cigar acumen gifted property classical property sport sport yacht art silver. </div> </div> </div> <!--You can copy this part to add another tab--> <div class="my_slide" style="position:absolute;top:386px;z-index: 203;"> <div id="my_tabbie">Tab Two</div> <div class="my_wrapper"> <div class="inner_wrap"> Politically caviar, gilded manor metropolitan genuine enthusiast caviar. Bonds manor aristocratic member classical rich benefactor university tailored philanthropic auction ballroom gold becoming crafted. Educated educated cultered polo affluent with blissfull. Elegant cocktail five-star, cruise salon sheer, monogram pearl delegate butler echelon investments, cocktail in. Auction impressive ornamental benefiting in world, regal in saphire, lifestyle european, fashion acumen art. Cutlery, ornamental topiary, echelon, butler, opulent. Ambassador opera pearl charity in, board, becoming expensive portfolio butler rare. </div> </div> </div> <!--Paste a 4rd tab here and set the top position approx 186px more --> <div style="clear:both;"></div> {if $[is_mobile_browser]} <br /><p class="center">Switch to the $[mobile_switch_link].</p> {/if} </body> </html>
<script> $(document).ready(function(){ var r=0, dir=true; $(".my_slide").click(function() { dir = !dir; r = dir? -270 : 0; $(this).stop().animate({right: r+'px'}, 800); }); }); </script> <div style="clear:both;"></div> <!--<script> $('.my_item').hide(); $('.my_divBox').hover(function() { $(this).children('.my_item').show(); }, function() { $(this).children('.my_item').hide(); });
</script>-->
xxxxxxx
|
|
|
Post by Admin on May 9, 2015 10:08:38 GMT
Some sort of table
<!--<table width="600px"> <tbody> <tr> <td width="250px">
<div style="color: #f1efe9; text-align: justify; font-size: 11px; overflow: auto; width: 250px; height: 114px; background-color: #514f33; padding: 4px; border-width: 1px; border-style: solid; border-color: #f1efe9;">
<font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 15px; text-align: left; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">HOUSEPOINT RANKS</font>
<center> <table align="center" width="250px"> <tbody> <tr> <td align="center" width="22%"> <img src="http://i1260.photobucket.com/albums/ii562/hsoww2003/Gryffindor_Pottermore.png"/> </td> <td align="center" width="22%"> <img src="http://i1260.photobucket.com/albums/ii562/hsoww2003/Hufflepuff_Pottermore.png"/> </td> <td align="center" width="22%"> <img src="http://i1260.photobucket.com/albums/ii562/hsoww2003/Pottermore_Ravenclaw.png"/> </td> <td align="center" width="22%"> <img src="http://i1260.photobucket.com/albums/ii562/hsoww2003/Slytherin_Pottermore.png"/> </td> </tr> <tr> <td align="center" width="22%"> 3,755 </td> <td align="center" width="22%"> 3,389 </td> <td align="center" width="22%"> 6,131 </td> <td align="center" width="22%"> <b>6,317</b> </td> </tr> </tbody> </table> </center> </div>
<div style="color: #f1efe9; text-align: justify; font-size: 11px; overflow: auto; width: 250px; height: 135px; background-color: #514f33; padding: 4px; border-width: 1px; border-style: solid; border-color: #22211d;">
<font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 15px; text-align: center; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">THE PLOT</font>
PLOT STUFF HERE </div>
</td> <td width="150px" align="center" valign="center">
<div style="color: #f1efe9; text-align: justify; font-size: 11px; overflow: auto; width: 150px; height: 265px; background-color: #514f33; padding: 04px; margin-left: 5px; border-width: 1px; border-style: solid; border-color: #f1efe9;">
<table align="center" width="150px"> <tbody> <tr> <td> <center><font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 15px; text-align: center; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">HEADMISTRESS</font>
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=bballtk" target="_blank"><img title="Headmistress Hawthorne" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/taranewdsgjndf_zpsb0265f4d.png"/></a></center>
<font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 15px; text-align: center; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">DEPUTY HEADS</font>
</td> </tr> <tr> <td style="float:left;padding-left:2px;"> <center> <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=katarina" target="_blank"><img title="Deputy Head Summers" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/newkatmini.png"/> </a>
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=malachi" target="_blank"><img title="Deputy Head Hawthorne" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/newmalmini.png"/> </a>
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=emma" target="_blank"><img title="Deputy Head Harris" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/newemmamini.png"/></a> <br />
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=karinaadams" target="_blank"><img title="Deputy Head Adams" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/newkarinamini.png"/> </a>
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=quinn" target="_blank"><img title="Deputy Head Hawkins" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/newquinnmini.png"/> </a>
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=jackie" target="_blank"><img title="Deputy Head Garrison" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/newjacimini2.png"/></a> <br />
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=tilly" target="_blank"><img title="Deputy Head McCalman" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/tillyminiicon_zps33bac210.png"/></a>
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=brix" target="_blank"><img title="Deputy Head Garrison" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/newbrixiconmini_zps9e15d85f.png"/></a>
<a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=taramiagriffin" target="_blank"><img title="Deputy Head James" src="http://i1260.photobucket.com/albums/ii562/hsoww2003/carleighanna_zpsdd6c8f32.png"/></a> </center>
</td> </tr> </tbody> </table> </div>
</td> <td width="180px" align="center" valign="center">
<div style="color: #f1efe9; text-align: justify; font-size: 9px; overflow: auto; width: 160px; height: 265px; background-color: #514f33; padding: 04px; margin-left: 5px; border-width: 1px; border-style: solid; border-color: #f1efe9;">
<table align="center" width="180px"> <tbody> <tr> <td>
<font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 10px; text-align: center; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">GRYFFINDOR STAFF</font> HoH: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=cassandra28">Cassandra Castile</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=vaughan">Vaughan Bradette</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=leonjoel">Leon Joel Finster</a>
<font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 10px; text-align: center; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">SLYTHERIN STAFF</font> HoH: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=hyunahx">Hwang Soo Rin</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=vlong">Ruth Jones</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=hutson">Gray Eastlake</a>
<font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 10px; text-align: center; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">HUFFLEPUFF STAFF</font> HoH: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=diona">Diona Castile</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=nixon">Nixon Allister Hawk</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=acciolove7">Danielle Belrose</a>
<font style="display: block; background: #22211d; color: #f1efe9; padding: 3px; font-size: 10px; text-align: center; margin-bottom: 7px; line-height: 8px; font-family: 'wire one', arial, sans-serif;">RAVENCLAW STAFF</font> HoH: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=emma432">Eireann Graham</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=lillie">Lillie Alfarinsdóttir</a><br> Prefect: <a href="http://hsoww2003.proboards.com/index.cgi?action=viewprofile&user=janessa">Jack Braden</a>
</td> </tr> </tbody> </table> </div>
</td> </tr> </tbody> </table>-->
|
|
|
Post by Admin on May 9, 2015 10:21:58 GMT
Taken out of headers:
<style> body{height:100%; } .my_slide { position:absolute; width:250px; height:400px; top:20px; right:-270px; /* this moves tabs and content left or right and must match jquery */ background-color:#8cc; padding:10px; cursor:pointer; overflow:hidden; } /* everything is rotated so commented to help guide you */ #my_tabbie{ position:absolute; top:80px; /* this will position your tab up or down on content box */ right:218px; /* this will mover your tab closer or futher from content box */ font-family:'Aguafina Script', cursive; font-size:1.2em; text-align:center; width:130px; /* since rotated this is actually the height of your tab */ height:22px; /* since rotated this is actually the width of your tab */ letter-spacing:2px; font-weight:bold; color:#8cc; padding-top:10px; /* since rotated this moves the tab text a bit left so centered */ background-color:white; border-top: 3px solid #8cc; border-right: 3px solid #8cc; border-left: 3px solid #8cc; border-top-left-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -ms-transform:rotate(270deg); /* IE 9 */ -moz-transform:rotate(270deg); /* Firefox */ -webkit-transform:rotate(270deg); /* Safari and Chrome */ -o-transform:rotate(270deg); /* Opera */ z-index:2000; } .my_wrapper{ width:100%; height:100%; border-top-left-radius: 10px; border-top-right-radius: 10px; z-index:100; padding-bottom:0px; } .inner_wrap{ position:relative; bottom:10px; font-size: 12px; background-color: white; opacity:.50; -moz-opacity:.50; filter:alpha(opacity=50); height:100%; padding-top:8px; padding-right:8px; padding-bottom: 0px; padding-left: 8px; margin: 4px 24px 0px 0px; /* the second number moves the text so tabs do not cover text */ border:1px solid red; } #pbn-bar-wrapper{ position:fixed; right:60px!important; bottom: 20px!important; } </style>
<div class="my_slide"> <div id="my_tabbie">Tab One</div> <div class="my_wrapper"> <div class="inner_wrap"> To open more than one tab double click. <br /> If you have more than one tab open the first one will close with one click but double click to close the rest. </div> </div> </div>
<div class="my_slide" style="position:absolute;top:200px;z-index: 202;"> <div id="my_tabbie">Tab Two</div> <div class="my_wrapper"> <div class="inner_wrap"> Ambassador, society luxury salon cigar townhome portfolio club, grande. Wine art inspiring benefactor noble reserved salon art auction travel travel using, regal with. Benefactor inspiring silk fine blissfull high-rise auction charity. Rare luxury cruise cultered, university cocktail purebred saphire gem. Monogram estate, suite affluent society with designer polo status suite ballroom butler noble cultered university. Silver cutlery, caviar fine cigar acumen gifted property classical property sport sport yacht art silver. </div> </div> </div> <!--You can copy this part to add another tab--> <div class="my_slide" style="position:absolute;top:386px;z-index: 203;"> <div id="my_tabbie">Tab Two</div> <div class="my_wrapper"> <div class="inner_wrap"> Politically caviar, gilded manor metropolitan genuine enthusiast caviar. Bonds manor aristocratic member classical rich benefactor university tailored philanthropic auction ballroom gold becoming crafted. Educated educated cultered polo affluent with blissfull. Elegant cocktail five-star, cruise salon sheer, monogram pearl delegate butler echelon investments, cocktail in. Auction impressive ornamental benefiting in world, regal in saphire, lifestyle european, fashion acumen art. Cutlery, ornamental topiary, echelon, butler, opulent. Ambassador opera pearl charity in, board, becoming expensive portfolio butler rare. </div> </div> </div> <!--Paste a 4rd tab here and set the top position approx 186px more-->
<script> $(document).ready(function(){ var r=0, dir=true; $(".my_slide").click(function() { dir = !dir; r = dir? -270 : 0; $(this).stop().animate({right: r+'px'}, 800); }); }); </script> <div style="clear:both;"></div>
|
|
|
Post by Admin on May 12, 2015 10:47:27 GMT
bbb
|
|