+- MyBB Source (http://mybbsource.com)
+-- Forum: MyBBSource Discussion (/forum-3.html)
+--- Forum: Feedback/Testimonials (/forum-5.html)
+--- Thread: Header Links (/thread-4025.html)
Header Links - Heart - 06-12-2010 10:20 AM
Hi MyBBSource!
Just wanted to say I am a huge fan of the clean layout here.
In fact, I love certain aspects so much, I want to learn how to replicate them!
The header links are what interest me most. The rollover produces this "soft glow" effect, which is really cool. I understand how to create rollovers with CSS, but is this using the same technique?
I thought maybe you guys used animated .gifs as background images for the rollover to show the "fade in", but I don't understand how you guys achieved the "fade out".
It's been bugging me for a long time haha, almost ever since I learnt how to make rollovers.
If anyone is able to enlighten me, please go ahead!
RE: Header Links - Andraž Rihtar - 06-12-2010 10:40 AM
All the transmision effects on this site are made using jQuery. However I believe that none of the staff members here would be able to help you with this, because the theme was made by Combus (indiepaper.com) and I believe that managers didn't change the transmition effects. I could be wrong though
RE: Header Links - Mikers - 06-12-2010 09:36 PM
Yup, it's jQuery.
I had a quick look over the source, and didn't discover too much, but I didn't examine it all too thoroughly either. 
But I know a jQuery script when I see one.First off, to add something like that. You'd need to collect the latest version of jQuery, download it, and store it somewhere on your site. You can go grab it here.
http://docs.jquery.com/Downloading_jQuery#Current_Release . I prefer Google's version, but I can't find it at the moment for some reason.
Normally, it'd be impossible to install jQuery on a MyBB board. MyBB uses a similar library called Prototype, which due to their similarities, conflicts heavily with jQuery's library. And installing jQuery would break all of the scripts on MyBB running on Prototype (for instance, the moderator options, Quick Edit, and many various javascript features throughout MyBB). Luckily, jQuery has a simply way to beat this. Upload the jQuery library somewhere into your MyBB installation.
Then go to,
ACP -> Templates & Styles -> Templates -> Ungrouped Templates -> headerincludes
Find,
Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1400"></script>Add Below,
Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/path/to/jquery.js?ver=1400"></script>
<script>
jQuery.noConflict();
</script>And that'll solve confliction problems with Prototype. From then on, just include any jQuery scripts below that (any jQuery scripts you upload to your site should be added through headerincludes. Much cleaner that way, most of the time. There are exceptions.)
As for the script itself, I'm not sure where I could find something like that, but I'll check my jQuery sources and see if I can't find something. It'd just be a matter of including the script, and using the jQuery variable in your HTML templates wherever you want to add the header links. A nice alternative, an alternative I actually use on one of my own sites, is this.
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
I love it.
So long as you can adapt the tutorial into your knowledge of editing MyBB, it's pretty easy to add. It doesn't have that tabbed nicety that MyBB Source here has. But it is VERY fluid.
RE: Header Links - Heart - 06-13-2010 02:21 AM
Ah, so it's Javascript ... Very nice. Thank you for everyone's help here; I'm sure further research into jQuery scripts on the internet will allow me to find various neat effects!