6 replies to this topic

[Jan Fox]

I would like to implement a different image for each tab in the tabber to correspond with the content in that tab. Also, I'd like to be able to have an active, hover, selected and inactive (default) image for each tab. I have tried various combinations of css utilizing firebug but can't seem to discover the correct combination. I found this code in another post but it did not work.

#tab-tabber_widget-3-1
{

background: url(images/tab1-background.jpg) no-repeat 0 0;

}

#tab-tabber_widget-3-2
{

background: url(images/tab2-background.jpg) no-repeat 0 0;

}

Of course, I modified it for my website but it didn't work.

The tabber is located on the home page at www.rrmg-hr.com/home . There are two tabbers on the page, but first one is the one I want to implement this feature in. The first tab will have rotating images and other tabs will contain static images and text. I'm trying to copy the idea from this website: www.hearthub.com minus the flash player stuff.

Thanks

[skylermoore]

This may be what you are looking for.

The tabber widget styles were built so that you can style the active tab and the other tabs.

If you add the following styles to the bottom of your style.css file it will allow you to set the background images:

<p style="padding-left: 30px">.tabber-widget-tabs li a.selected {
background: url('IMAGE-PATH') !important;
}
.tabber-widget-tabs li a {
background: url('IMAGE-PATH') !important;
}

Be sure to replace "IMAGE-PATH" with the path to your image.

Please let us know if there is anything else we can help you with.

[Jan Fox]

Thanks Skyler but that didn't work either. I want each tab to have a different image not the same image. Then each image and tab would have an inactive (default), active, hovered and selected image as well.

[Jan Fox]

It seems like the original code should work but it doesn't. I've put it at the end of the css to be sure I didn't have anything else written to rule it out and used "!important". Looking at the css using firebug it shows to reference

#tab-tabber_widget-5-1,

#tab-tabber_widget-5-2...on through

#tab-tabber_widget-5-6

I even copied the css from the plugin and played with it in firebug w/various combinations but couldn't find a solution.

I'd love to have this work, does anyone else know how to do this?

Thanks

[Sridhar Katakam]

What are the URLs of images that you would like to set as backgrounds for the tabber widget tabs' content?

[Jan Fox]

http://www.rrmg-hr.com/wp-content/themes/BuilderChild-Default/images/tab-1-bg.jpg

and

http://www.rrmg-hr.com/wp-content/themes/BuilderChild-Default/images/tab-2-bg.jpg

Their measurements are 150x120

I have only created 2 tab images as I couldn't get it to work but there will be 6 images for 6 tabs. If you can get this to work I will create an image for the different states.

I have removed the tabber and replaced with the Featured Posts Slider but here is another tabber half way down the page that I would like to put individual images in those tabs as well.

Let me know if you need access the to backend of the site.

Thanks so much for your help.

[Sridhar Katakam]

Can you provide working links to the tabs' background images?