4 replies to this topic

[58twelve]

Hi

I am trying to get a quick small site up for my non profit.  The idea is just one page with tabbed content.  Really lightweight.

I wanted to use Tabber Widget because I love it, but couldn't easily see how to position the tabs in a column to the left of the content.  I messed with the CSS a bit but to no avail - as I expected I just managed to stack them above the content, and couldn't see where I could change the layout to put the tab section to the left and not above.

I have created it using a plugin off Code Canyon, which I managed to hack about to do what I wanted, but it is not as versatile or user-friendly as tabber widget.  What I am trying to do, and have done with the Code Canyon plugin, is here: http://i58.58twelve.com and that is exactly what I want to do with tabber widget.

Where do I go, if it can be done, to change the layout structure of the tabbed area - i.e float tabber-widget-tabs ul to the left of tabber-widget-content?

If this is do-able it'll make my Easter :-)

Thanks in advance

Andy

[58twelve]

Right, I am onto something.  I think I managed to understand what was happening in widget.php to come up with a rather ugly, but apparently workable, solution.

I created three id's left-side-tabs - vertical-tabs and vertical-content.  Then in widget.php I wrapped the whole tabber widget in left-side-tabs to give myself a bit of control, the tabs in vertical-tabs and the content in vertical-content as follows:

<div id="<?php echo $id; ?>-content" class="<?php echo $class; ?>">

<div id="left-side-tabs">

<div id="vertical-tabs">

<ul class="tabber-widget-tabs">
<?php for ( $counter = 1; $counter <= $tabber['num']; $counter++ ) : ?>
<?php
if ( true === $first ) {
$class = ' class="selected"';
$first = false;
}
else
$class = '';

$tab_href = "tab-$id-$counter";
?>
<li><a<?php echo $class; ?> href="#<?php echo $tab_href; ?>"><?php echo $tabber["title_$counter"]; ?></a></li>
<?php endfor; ?>
</ul>

</div>

<?php for ( $counter = 1; $counter <= $tabber['num']; $counter++ ) : ?>
<?php $tab_href = "tab-$id-$counter"; ?>

<div id="vertical-content">

<div id="<?php echo $tab_href; ?>" class="tabber-widget-content">
<?php dynamic_sidebar( "Tabber - {$tabber['name']} - {$tabber["title_$counter"]}" ); ?>
</div>

</div>

</div>

<?php endfor; ?>

</div>

That has generated what I needed, but is obviously vulnerable to disappearing if there are further tabber widget updates.  Is there a more elegant, future-proof solution I can use, or can this facility be built into the next update - i.e. some css elements that can be styled by the user or just left as default? Or, have I used a sledgehammer to crack a nut when there is an easier solution?

Thanks

Andy

[58twelve]

Update: for anyone else trying this, forget the wrapper around the whole tabber area (left-side-tabs in my code) as it broke the functionality - only the first tab would display.  Took it out and all is well.  Was overkill anyway so taking it out was fine.

[58twelve]

All done and working using the method above: http://i58.58twelve.com

I totally LOVE plugin buddy :-)

If anyone on the tech support can advise re there being a better way that won't be broken by updates, I'd be really grateful!

Andy

[Bes Zain]

Hi Andy,

Thanks for posting your custom solution: it looks beautiful!

I'm going to share this with the devs and see what they can suggest or do in the future to allow similar options easily without much editing. Thanks again!