8 replies to this topic

[nick spooner]

Hey,

On my staging site you can see Widget Bar titled 'A - Z of Features' that contains 3 red bulleted Lists. Under the hood this is in fact three widgets each containing the Flexxi page widget. I want to include these three widgets on a single tab in the Tabber Widget so as the three column list is on a single tab. Obviously if I drag the three Flexxi page widgets onto the Tab 'holder' then the list is presented as a single column, I of course need it to be presented in three columns like it is currently displayed on the page. How do I do this?

Cheers

Nick

PS: Remember the whole site has to be updated by 'marketing folk' with no HTML or Web Dev. skills so it's important that I preserve the use of the Flexxi page widgets.

[nick spooner]

Hello,

Are there any support folk here?

[skylermoore]

Hi Nick sorry that we didn't get to you yesturday, it looks like you are going to need a css fix to make sure that your widgets don't stack vertically in the tab. If you will put those widgets in a tab then I should be able to look at it and find some styles to make those three widgets appear in columns like you are wanting.

[nick spooner]

Hi Skyler!

I have done as you asked - see here -

I have provided login details via a PM to you.

I basically shifted the three Flexi pages widgets from the 'A-Z features' three widget module ( Main - Key Feature Navigation 1, 2, 3,) into a single widget (Main - QuestionsFeatures) in the two widget module.. You now see 2 'master' Tabber Widgets in the last widget on the widgets page (Main - ContentSearches).

I have provided login details via a PM to you.

I hope you can help.

Cheers and Thanks again

Nick

[skylermoore]

If you add the following style to the bottom of your style.css file it should create the 3 columns you are wanting:

<p style="padding-left: 30px">#tab-tabber_widget-9-2.tabber-widget-content .tabber-widget {
width: 32%;
float:left;
color: #FF0030;
}
#tab-tabber_widget-9-2.tabber-widget-content .tabber-widget .page_item a {
color: #FF0030;
}

Good luck, please let us know if there is anything else we can help you with.

Edited by skylermoore, 21 July 2010 - 02:50 PM.

[nick spooner]

Hey Skyler,

Thanks!!!

I'm sorry for the delay I've been on holiday. I just tried your suggestion and it works perfectly! There is an underlying issue if the columns dont contain the same number of pages. The succeeding Tabber Widget begins to wrap into the it's tabs onto the preceding row.

I have a couple more questions if thats ok to add them here...

How do I style the Tabs? As you can see herethe current tabs display in a counter intuitive way, in as much as the dark background and mouse over places emphasis on the wrong tab contents (if you see what I mean)....I'd like the Tabs to reflect the green I'm using in the rest of the site.

Also, how do increase the spacing between the first and second Tabber module. As you can see they are quite close together...

I'm really grateful for all of your help.

Thanks

Nick

[Sridhar Katakam]

Hi Nick,

Add the following at the end of your theme's style.css:

.tabber-widget-rounded-light ul.tabber-widget-tabs a.selected, .tabber-widget-rounded-light ul.tabber-widget-tabs a.selected:hover {
 background: #004027 !important;
 color: #FFFFFF !important;
}

Should make it look better.

[nick spooner]

Hey Sridhar,

This is simply fantastic.....

I'm really pleased with the result. So I am very grateful.

I have one more question...

A grey area has 'suddenly appeared' on the background of the A - Z of features tab. It wasnt previously there and I have not altered the style sheet for this area. Its just appeared after I had tried out the shiba plug in (which is now disabled). How do I remove this?

Secondly I guess I should explain that I used the Shiba plug in to try and create a widget that contained content in context with each page. Have you any suggestions how I do this?

Cheers

Nick

PS:Have a good weekend

[skylermoore]

I took a look at your site and it looks like you have made some changes. Have you found a solution to this?