CLASSIC TABS, How do I set an image instead text in classic tab

Support
#1

How do I add an image and center it in the title of a classic tab

I was able to get close but the image display in title and content area also, display “Make Sure to Set a Title”

Please check: https://southlandservices.net/sandbox/#

#2

Hi there,

Our theme does not have a feature like that out of the box and it is considered as a customization and outside of our support scope. We will do our best to suggest the correct way to do it but the implementation is on your shoulders.

Go to theClassic Tab element and add the titleimage class to it:

Then add the CSS code below to X > Launch > Options > CSS:

.titleimage .x-nav-tabs-item:nth-child(1) > a {
    background: url('http://via.placeholder.com/50x50') no-repeat center center;
    text-indent: -9999px;
}

.titleimage .x-nav-tabs-item:nth-child(2) > a {
    background: url('http://via.placeholder.com/50x50') no-repeat center center;
    text-indent: -9999px;
}

Change the URL of the background image with the URL of the image you want to have as a title. Also this assuemes that the tab has 2 items and it adds separate images for item one and 2. You can continue by copying the same code and add for the position 3, just change the portion of the code to nth-child(3).

Thank you.

#3

Hey Christopher, Thank you very much for your help. You were right on it. The only thing I noticed was that I didn’t need the class for each tab. Just by creating your CSS rule worked like a charm:

.x-nav-tabs-item:nth-child(1…2…3… and so on…) > a {
background: url(‘URL’) no-repeat center center;
background-color: transparent!important;
text-indent: -9999px;
}

I just have one more question. How can I swap the image on .active and .hover?

Look forward to hearing from you.

Best,

Robert B.

#4

Hello There,

To swap the image when it is active and hover, you use this:

.titleimage .x-nav-tabs-item:nth-child(1) > a {
    background: url('http://via.placeholder.com/50x50') no-repeat center center;
    text-indent: -9999px;
}

.titleimage .x-nav-tabs-item.active:nth-child(1) > a {
    background: url('http://via.placeholder.com/50x50/ffee00') no-repeat center center;
    text-indent: -9999px;
}

.titleimage .x-nav-tabs-item:nth-child(1):hover > a {
    background: url('http://via.placeholder.com/50x50/ee0000') no-repeat center center;
    text-indent: -9999px;
}

Hope this helps.

#5

Sweet. You nail it. Thank you so much, sir.

I wish found X-Theme a long time ago. Your customer support is NOT great but EXTRAORDINARY.

Keep it Up.

Best,

#6

You’re welcome. And, thank you for your kind words.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.