ITS HERE!!! Yahoo styled tabbed content

[bloc]

I suggest rather looking at the stand alone demo, all the files are fetched there, just grab them and save.

[rockskullz]

thanks Bloc, works and looks great just need to figure out how to change the background of the selected cell... You mind taking a look? I don't see what im missing.

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
margin-right: 3px;
border: 1px solid #778;
color: #000000;
background: white url('http://www.offroad-review.com/new/addon/moo/tab-current-bg.gif') repeat-x top left;; padding-left:7px; padding-right:7px; padding-top:3px; padding-bottom:3px
}

.shadetabs li a:visited{
color: #000000;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #FFFFFF;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url('http://www.offroad-review.com/new/Themes/TP_day-of-defeat_111/images/bg2.gif');
border-bottom-color: none;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid black;
width: 615px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontentstyle2{ /*style of tab content oontainer*/
border: 1px solid black;
width: 200px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}

[rockskullz]

never mind just got it. thanks for your help!!

[bloc]

ok then lol.

[rockskullz]

alright one more question. This works great now by the way.

Is there a way to make the first tab default dropped down?

[awyett]

Please can you tell me how to integrate PHP scripts into this. for example, the latest member block (http://www.tinyportal.net/index.php?topic=20422.0) ?

I have read the message on the first page however i am kinda confused. Here is my site: http://www.projectpando.com

Thanks for your help in advance. Awaiting your reply....

[koolaid]

If you added like a bunch of pictures into each of the individual tabs, will they all load at once (all the images in all the tabs) when the page loads or will it only load the images contained in the tab you clicked?

[timothy082003]

Forgive me if this question has already been answered. I looked through this topic many times and did a search and I can't seem to figure this out.




Is it possible to add the following code into one of the tabs? It's the code for the SMF Recent Topics block.

Code Select Expand

global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
                        <table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
                               <tr><td colspan="3" class="titlebg">Recent Topics</td></tr> ';
       $what=ssi_recentTopics('5', NULL, 'array');


        foreach ($what as $topic)
        {
                echo '
                                <tr>
                                        <td class="windowbg" valign="middle">
                                                ', $topic['link'];

                // Is this topic new? (assuming they are logged in!)
                if (!$topic['new'] && $context['user']['is_logged'])
                        echo '
                                                <a href="', $scripturl, '?topic=', $topic['topic'], '.from', $topic['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';

                echo '
                                        </td>
                                        <td class="windowbg2" valign="middle" width="20%">
                                                ', $topic['poster']['link'], '
                                        </td>
                                        <td class="windowbg2" valign="middle" width="35%">';
                if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
                        echo '
                                        <a href="', $topic['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" border="0" style="float: right;" /></a>';
                echo '
                                                <span class="smalltext">
                                                        ', $topic['time'], '
                                                </span>
                                        </td>
                                </tr>';
        }

        echo '
                        </table>';

[SteveW]

*bump*

I would also be interested in incorporating php snippets into tabs so perhaps it could show recent topics, recent posts, etc etc..

[IchBin]

Would require ajax. I don't think this will happen any time soon. Thats why doing it would require a page load.