Hey,
I would like to have a header bit which gives people the option to change theme so they can browse through my themes.
An example:
http://www.audentio.com/preview/mybb/citrus
Does anybody know how to do this?
Thanks,
~Hostpro
Thats an iframe lol, this s probably possible but not really sure how to do t, iframes would be easy though could help wth that if you like.
I would love some help, or maybe a template.
~Hostpro
<!DOCTYPE html>
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>MyBB | Preview - Audentio Design</title>
<meta name="robots" content="noindex" />
<link rel="stylesheet" href="//audentio.com/style/themebar/default.css">
<script>
if( self !== top ) { top.location = self.location }
var baseUrl = 'http://www.audentio.com/preview/',
secondaryMenuH2 = 'Theme';
(function(h,c){
h[c] = h[c].replace(/\bno-js\b/, '')
})(document.documentElement, 'className');
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4942073-2']);
_gaq.push(['_setDomainName', '.audentio.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="themebar">
<div class="wrap cf">
<h1 id="logo"><a href="#"><img src="http://www.audentio.com/images/logo.png" border="0" alt="Audentio Design" /></a></h1>
<div id="mainMenu" class="dropdown">
<h2>MyBB</h2>
<ul>
<li><a href="mybb" url="http://audentio.com/demo/mybb16" button="" children="MyBB" class="active">MyBB</a></li><li><a href="xenforo" url="http://audentio.com/demo/xf" button="" children="XenForo" class="">XenForo</a></li> </ul>
<div class="imgs">
</div>
</div>
<div id="secondaryMenu" class="dropdown">
<h2 >Theme</h2>
<ul>
<li class="MyBB" style=""><a href="mybb/gamingjam" url="http://audentio.com/demo/mybb16/index.php?themeid=67" button="buy, http://audentio.com/shop/view/MyBB/Gaming Jam-3" class="">Gaming Jam</a></li>
<li class="MyBB" style=""><a href="mybb/sky" url="http://audentio.com/demo/mybb16/index.php?themeid=56" button="buy, http://audentio.com/shop/view/MyBB/Sky-2" class="">Sky</a></li>
<li class="MyBB" style=""><a href="mybb/glowing" url="http://audentio.com/demo/mybb16/index.php?themeid=78" button="buy, http://audentio.com/shop/view/MyBB/Glowing-1" class="">Glowing</a></li>
<li class="MyBB" style=""><a href="mybb/minicolor" url="http://audentio.com/demo/mybb16/index.php?themeid=68" button="buy, http://audentio.com/shop/view/MyBB/miniColor-4" class="">miniColor</a></li>
<li class="MyBB" style=""><a href="mybb/urbana" url="http://audentio.com/demo/mybb16/index.php?themeid=50" button="buy, http://audentio.com/shop/view/MyBB/Urbana-5" class="">Urbana</a></li>
<li class="MyBB" style=""><a href="mybb/orangecrush" url="http://audentio.com/demo/mybb16/index.php?themeid=69" button="buy, http://audentio.com/shop/view/MyBB/Orange Crush-6" class="">Orange Crush</a></li>
<li class="MyBB" style=""><a href="mybb/luxure" url="http://audentio.com/demo/mybb16/index.php?themeid=65" button="buy, http://audentio.com/shop/view/MyBB/Luxure-7" class="">Luxure</a></li>
<li class="MyBB" style=""><a href="mybb/darkseries" url="http://audentio.com/demo/mybb16/index.php?themeid=16" button="buy, http://audentio.com/shop/view/MyBB/Dark Series-8" class="">Dark Series</a></li>
<li class="XenForo" style="display:none"><a href="xenforo/peachykeen" url="http://audentio.com/demo/xf/index.php?misc/style&style_id=15" button="buy, http://audentio.com/shop/view/XenForo/Peachy Keen-9" class="">Peachy Keen</a></li>
<li class="XenForo" style="display:none"><a href="xenforo/xensplash" url="http://audentio.com/demo/xf/index.php?misc/style&style_id=9" button="buy, http://audentio.com/shop/view/XenForo/xenSplash-10" class="">xenSplash</a></li>
<li class="XenForo" style="display:none"><a href="xenforo/eternelle" url="http://audentio.com/demo/xf/index.php?misc/style&style_id=16" button="buy, http://audentio.com/shop/view/XenForo/Eternelle-11" class="">Eternelle</a></li>
<li class="XenForo" style="display:none"><a href="xenforo/class" url="http://audentio.com/demo/xf/index.php?misc/style&style_id=21" button="buy, http://audentio.com/shop/view/XenForo/Class-12" class="">Class</a></li>
<li class="XenForo" style="display:none"><a href="xenforo/drift" url="http://audentio.com/demo/xf/index.php?misc/style&style_id=26" button="buy, http://audentio.com/shop/view/XenForo/Drift-13" class="">Drift</a></li>
<li class="MyBB" style=""><a href="mybb/citrus" url="http://audentio.com/demo/mybb16/index.php?themeid=101" button="buy, http://audentio.com/shop/view/MyBB/Citrus-14" class="">Citrus</a></li>
<li class="MyBB" style=""><a href="mybb/unova" url="http://audentio.com/demo/mybb16/index.php?themeid=103" button="buy, http://audentio.com/shop/view/MyBB/Unova-15" class="">Unova</a></li> </ul>
<div class="imgs">
</div>
</div>
<a href="" class="greyed" id="button"></a>
<a href="http://audentio.com/demo/mybb16" class="" id="close">Close</a>
</div>
</div>
<iframe src="http://audentio.com/demo/mybb16" id="iframe"></iframe>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="//audentio.com/js/jquery.themebar.min.js"></script>
<script>
$(function() {
$('#themebar').themeBar({
iframeId : "#iframe",
// Iframe ID - If none this will find the first iframe on the page.
fade : true,
// Set the iframe to fade in and out
fadeSpeed : 300,
// Iframe fade speed - 1000 = 1s
childMenu : true,
// Secondary menu - if you only want one dropdown set this to false
// If this is not set we will see if we can find a second ul inside the operator
loadOnClose : false,
// On close reload to the current url, If false the themebar will slideup and an open
// slide down
frameFadeOut : function() {},
// Function to run when the iframe fades out - disabled if iframe fade is set to false
frameFadeIn : function() {}
// Function to run when the iframe fades in - disabled if iframe fade is set to false
});
});
</script>
</body>
</html>
Thats the main source of the page you provded from here it should be very easy for you to ft it to your needs.
I don't want to just copy them, also I don't have the stylesheet that it is referring too,
Would you happen to have a basic iframe / still header template?
~Hostpro
(2012-06-09, 07:26 PM)Hostpro Wrote: [ -> ]I don't want to just copy them, also I don't have the stylesheet that it is referring too,
Would you happen to have a basic iframe / still header template?
~Hostpro
No, I'm not saying to copy them It's like taking a tutorial from the net and customzing t yourself unfortunately do not have a pre-maid template but maybe another member can help you further.
Thank you for all your help thought
~Hostpro
(2012-06-09, 07:31 PM)Hostpro Wrote: [ -> ]Thank you for all your help thought
~Hostpro
No problem, i'll check back in a couple days to see if this is resolved if not i'll see about making you an iframe.
Thank you very much!
I'd appreciate that a lot,
~Hostpro
Still wondering if anybody knows how to do this?
~Hostpro