I'd like to add an icon to the background of each tab. It seems the flick styling has a lot of background images involved already because when I try to add one it doesn't show up. Can you provide some guidance?

Here is my page with the tab set.

www.asomatouspeat.com/esc/furbay/internal.html

Hello Simon

If you need to add background image to specific tab, place the following code just above the closing </head> tag.

if you need to style the first tab:

<style>
#dmxTabs1-1 {
	background-image:url(yourimagename.jpg) !important;
}

</style>

if you need to style the second tab :

<style>
#dmxTabs1-2 {
	background-image:url(yourimagename.jpg) !important;
}

</style>

If you need to style the third tab :

<style>
#dmxTabs1-3 {
	background-image:url(yourimagename.jpg) !important;
}

</style>

e.t.c.

Regards: Vulcho.

Hi Vulcho,

Adding this code put the background image in the body of the tab. I was hoping to put it in the header part of the tab, the <li></li> tags, where you first click.

I found that if I apply an inline style to the <li> tags like this:

<li style="background: url(images/specials-icon.png) no-repeat right center"><a href="#dmxTabs1-1">MONTHLY SPECIAL</a></li>

it works, but masks the existing background image. If I could understand where this background image is controlled in the css I think I can get it to work.

Here is my page if you want to take a look:

www.asomatouspeat.com/esc/furbay/internal.html

Hello Simon

I have a couple questions regarding the layout you are trying to achieve:
1).Do you need to remove the star image from the body of tab1 ?
2).Do you need to have the image in the both tab buttons?
3).Do you need to keep the color of the tab buttons ?

Regards: Vulcho.

Hello Vulcho,

1)Do you need to remove the star image from the body of tab1?
- Yes
2)Do you need to have the image in the both tab buttons?
- I have a different image for the second tab button, but for now we could use the same one
3)Do you need to keep the color of the tab buttons?
- I'd like to keep the original color of the tab buttons (the "flick" styling)

Thank you.

Hello Simon.

1)Delete the code of the following property:

#dmxTabs1-1 {
    background: url("../images/specials-icon.png") no-repeat scroll right center transparent;
}

in www.asomatouspeat.com/esc/furbay/Styles/dmxTabs.css

2)I will talk to our developers, and will notify you here if they plan to implement the functionality of having a icon in each tab separately in the next update of the product.

3)O.k. so there is no need to do any changes.

For the time being I created the following classes and applied them to the two <li> button tags.

#dmxTabs1 .li01 {
background: url(jqueryui/flick/specials-icon.png) no-repeat right center;
}
#dmxTabs1 .li02 {
background: url(jqueryui/flick/newsletter-icon.png) no-repeat right center;
}