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
1
Assign Background Image Icons To Each Tab
Started by
Guest_Jason_*
, Oct 17 2012 01:04 PM
background tabber images
3 replies to this topic
#2
Gerroald
-
- Moderators
- Others: All Plugins, All Themes, Toolkit, Webdesign
-
- 1,115 posts
iThemes Support
- LocationiThemes World HQ
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
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:
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
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:
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
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
Reply to this Topic
ATTENTION
If this topic is marked RESOLVED or INFORMATION, or if you are NOT experiencing EXACTLY the same issue, please start a new topic to provide the details of your problem. If the solution provided doesn't work for you, you should start a new topic. If you feel this thread contains relevant information, you may include a link to it in your new topic. To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. When posting your question or request on the forum, please be as concise and specific as possible. The shorter and more to the point you can make your request, the better.
For BackupBuddy related issues, be sure to include the status log from your most recent backup.
CLICK HERE to start a new topic in the Tabber-Widget Plugin forum.
Also tagged with one or more of these keywords: in progress, background, tabber images
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
