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.

Support during Holidays:

During the Holidays (Dec. 22 - Jan. 2) our support staff will spend well-deserved time with their families and loved ones.

We can not guarantee the same level of support that you are used to.

Moderators will check in on the support forum, but response times may be longer than expected.


Your iThemes support team wishes you happy holidays!

in progress

Assign Background Image Icons To Each Tab

background tabber images

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

#1 Guest_Jason_*

Guest_Jason_*
  • Guests

Posted 17 October 2012 - 01:04 PM

Hey there --

I want the tabber tabs to each have a different icon instead of text (such as pinterest, twitter, facebook).
I have used Firebug like crazy, but can't figure out how to target each tab individually. It would be great if we could assign classses to each tab when we add them in the Widget area, but until that happens, what should I do?

Thanks!
jason

#2 Gerroald

Gerroald

    iThemes Support

  • Moderators
  • Others: All Plugins, All Themes, Toolkit, Webdesign
  • 3,775 posts

Posted 18 October 2012 - 06:29 AM

Hey Jason,

Welcome to the iThemes Community Forums!

I'd like to look into this for you. Could you please provide a URL to your site so we can take a closer look?

Please let me know!

Thanks,

Gerroald

#3 Guest_Jason_*

Guest_Jason_*
  • Guests

Posted 19 October 2012 - 08:31 AM

Hey there...

So I got it to work, but it is not ideal.

First I set the tabs to fit the size of my icons, and set overflow to hidden, so the embedded widget titles wouldn't distort the size of the tab:
.widget div.tabberlive ul.tabbernav li a {
bottom: 10px;
display: inline-block;
height: 30px;
overflow: hidden;
padding: 0;
position: relative;
top: 8px;
width: 30px;
}

Then I set the image sprite position and background color for the active, inactive, and hover states...
ul.tabbernav li:first-child a {
ul.tabbernav li:nth-child(2) a {
ul.tabbernav li:nth-child(3) a {
...etc.

I would much rather NOT use these pseudo-classes because of issue in IE7 and before. Any other suggestions?
The example is on a sandbox page here:
stoked dot org/text-hierarchy

Cheers,
J

#4 Guest_Jason_*

Guest_Jason_*
  • Guests

Posted 19 October 2012 - 08:33 AM

Hey there...

So I got it to work, but it is not ideal.

First I set the tabs to fit the size of my icons, and set overflow to hidden, so the embedded widget titles wouldn't distort the size of the tab:
.widget div.tabberlive ul.tabbernav li a {
bottom: 10px;
display: inline-block;
height: 30px;
overflow: hidden;
padding: 0;
position: relative;
top: 8px;
width: 30px;
}

Then I set the image sprite position and background color for the active, inactive, and hover states...
ul.tabbernav li:first-child a {
ul.tabbernav li:nth-child(2) a {
ul.tabbernav li:nth-child(3) a {
...etc.

I would much rather NOT use these pseudo-classes because of issue in IE7 and before. Any other suggestions?
The example is on a sandbox page here:
stoked dot org/text-hierarchy

Cheers,
J