HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media


Welcome to TinyPortal. Please login or sign up.

May 27, 2023, 11:47:33 PM

Login with username, password and session length
  • Total Members: 3,864
  • Latest: Joonoz
  • Total Posts: 194,353
  • Total Topics: 21,156
  • Online today: 142
  • Online ever: 3,540
  • (September 03, 2022, 01:38:54 AM)
Users Online
Users: 0
Guests: 78
Total: 78

ITS HERE!!! Yahoo styled tabbed content

Started by akulion, August 30, 2006, 09:18:55 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.


Something so cool

It will make you rip your clothes off and run naked into the streets with joy



soon  :coolsmiley: as in TP 0.9.5 soon - but its not that, its a block code snippet (in case u were wondering lol)




I have become comfortably numb!

Cripzone | Crip's Free 2.0.2 Themes


man it sure was a tough task getting this sorted out

but it basically gives the same - exact same functionality as the yahoo tabs we see

smooth scrolling
can support all types of elements including polls, forms, login boxes and whatever...

i love it :D

i dont have any documentation for it yet - but im trying to complie something so i can put it here :D

Credits go to: moofx for the base code and joomla template for the tabbed style :up:


Best of luck on that.. it's really nice. 8)
I have become comfortably numb!

Cripzone | Crip's Free 2.0.2 Themes


I Like It, Good Job Akulion :)


Ok here are the install instructions with a small DEMO

sorry i havent had much time to experiment around with this thingie

but basically it can give you the exact same features as on the page with their tabbed content. Its all really up to you and your creativity as to how you decorate it and make it interesting.

Please note that SOME knowledge of HTML is required for this - since all content created inside the tabs is basically handeled with html tabs.

PHP I havent tested yet, but i am sure it will support it if you echo out the whole script leaving the php bits out of the quotes (if u know what i mean)

as u may have guessed im being hasty here - already had to work nearly 3 hours to get this lil script working.

The script itself is freeware and available from but it is not available in the tabbed format you see here. But still that page is worth a look especially for theme creators since it offers some cool functions for browsers.

Anyways on to the instructions...

Download this zip file open it, upload all its content to a folder in your forum root, call it whatever you want - as long as you put the correct address in the code below.

Create a script block and add all the following code to it:

<title>Your title here - but not necessary</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script language="javascript" type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript" src=""></script>
<link href="" rel="stylesheet" type="text/css"/>


<div id="spotlight">

      <ul class="headtab-wrapper">
                <li class="headtab" id="headtab-1">
          <a>Your Tab 1</a>
                <li class="headtab" id="headtab-2">
          <a>Your Tab 2</a>
                <li class="headtab" id="headtab-3">

          <a>Your Tab 3</a>
                <li class="headtab" id="headtab-4">
          <a>Your Tab 4</a>

      <div class="sl-wrapper">

                <div class="stretcher" id="stretcher-1">
<div class="moduletable">
Content 1 Goes here

                <div class="stretcher" id="stretcher-2">
          <div class="moduletable">

Content 2 Goes here

                <div class="stretcher" id="stretcher-3">
<div class="moduletable">

Content 3 Goes here


                <div class="stretcher" id="stretcher-4">
          <div class="moduletable">

Content 4 Goes here

      <script language="javascript" type="text/javascript">init();</script>

replace all the instances with the path to those files you uploaded.

where it says "your tab here" goes the heading for the tabs

where it says content 1 here, goes whatever content you wana put

ALL other customization is done in the CSS file..and I mean ALL customization, colors, box sizes, etc etc.

If you wana add more tabs, just study the sequence in the above code and add new tabs acordingly by creating a new LI tag and then a new DIV with the same Id to identify it.

Once again sorry for the short inctructions- but really right now im at the end of patience lol i need rest!


Pretty cool feature, i might use it some day .. thanks for sharing  ;)


Nice work  :up:.
Looks "not so difficult" to implement, but documentation is always important  ;)
I will give it a try on my next site-makeover :)

Thank's for sharing


SMF 2.0 RC3
TP 1.0 beta 5-1
Wordpress 3.0