Jump to content


Welcome to the forum:

Welcome to the iThemes, PluginBuddy and WebDesign.com forum. We've created several tutorial video's to help you get you started with using the forum, please check them out!

Also take note of the forum guidelines.


Support hours:

Our moderators actively respond to forum support requests during normal business hours which are Monday-Friday, 8am - 5pm Central Standard Time, typically within one business day. Although some moderators choose to work during the weekends, we can not guarantee immediate attention to your requests. Thanks for understanding.

What is included with support:

Premium support includes theme/plugin issues such as: bugs encountered under normal operation, how to use basic features, basic WordPress help, and basic help with customization (meaning we point you to resources and will help in more depth as time allows). More information.






Important Security Update for All iThemes Customers - please read this



Styling Individual Tabs w/Images


This topic has been archived. This means that you cannot reply to this topic.
6 replies to this topic

#1 Jan Fox

Jan Fox

    Advanced Member

  • Members
  • PipPipPip
  • 106 posts

Posted 28 September 2010 - 11:12 PM

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

#2 skylermoore

skylermoore

    Member

  • Members
  • Others: All Themes, BackupBuddy, All Plugins, DisplayBuddy, ThumbsUp
  • 2,141 posts

Posted 29 September 2010 - 08:30 AM

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.


#3 Jan Fox

Jan Fox

    Advanced Member

  • Members
  • PipPipPip
  • 106 posts

Posted 29 September 2010 - 08:15 PM

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.

#4 Jan Fox

Jan Fox

    Advanced Member

  • Members
  • PipPipPip
  • 106 posts

Posted 29 September 2010 - 09:28 PM

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

#5 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 30 September 2010 - 05:12 AM

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

#6 Jan Fox

Jan Fox

    Advanced Member

  • Members
  • PipPipPip
  • 106 posts

Posted 30 September 2010 - 04:15 PM

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.

#7 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 03 October 2010 - 06:25 AM

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