Docs

[Ryandm1983]

Hey there X Theme;

I’m in need of your ninja like coding skills, i’ve tried using the knowledge base to achieve what i want and proudly did have some success, but for a couple of hours now i’m banging my brain against the wall to probably achieve something quite simple. “Trying to add a background image to the head area of the tab element”

I have managed to add a background image to the tab head element successfully. However this affects all tabs, and i need help with the following.

The query is in reference to the URL of my the page ive begun working on: http://genesishotel.vayadata.co.za/work-play/

Login details are below in pvt…

1. I want to know how to only add the image background to this specific element only ?
2. Instead of addding a background image is it at al possible to pull through an iframe as the background ?
3. There is a blue borde rthat appears on top of the tab element showing the active selected tab, is it possible to increase the size/padding of this area to make it more pronounced?

Thanks team…

[Ryandm1983]

This reply has been marked as private.

[Lely]

Hi Ryan,

Can you clarify which specific element only? Do you mean the active tab only?
I can see that you have the following CSS already:

.x-nav-tabs > li >a {
    color: black;
    background-image: url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
    font-size: 15px;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}

Please update to this to adjust padding:

.x-nav-tabs > li >a {
    color: black;
    background-image: url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
    font-size: 15px;
    font-weight: bold;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 30px; /*For padding spacing*/
}

This two lines:

    background-size: contain;
    background-repeat: no-repeat;

Will control the size of your background. You may give us screenshot of what you want to achieve so we help you better.

Can you clarify what you meant by pulling an IFRAME? Do you mean IFRAME element? This might be possible via custom development which is outside the scope of our support. Thank you for understanding.

[Ryandm1983]

Hi There

Thanks for the code im sure i will be able to use it, main question was though – how to add a background to a specific set of tabs, without affecting all other tab elements on the site?

Example: Page url: “http://genesishotel.vayadata.co.za/work-play/”, this page has 3 tabs, namely…”Conferencing & Events”, “Fitness Centre” & “Onsite Convenience” titles. I would like to add an icon next to each of these titles on the left hand side. I plan to do this using the code you gave me, but the second i add the background image to these tabs all other tabs are affected. how can i isolate my changes to these specific tabs ?

No worries re the iframe, i know it was a bit of a far stretch 🙂

[Christopher]

Hi there,

Please try this code :

ul.x-nav.x-nav-tabs.my-class-1.three-up.top li:first-child a {
    background-image:url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
}
ul.x-nav.x-nav-tabs.my-class-1.three-up.top li:nth-child(2) a {
    background-image:url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
}
ul.x-nav.x-nav-tabs.my-class-1.three-up.top li:nth-child(3) a {
    background-image:url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
}

Hope it helps.

[Ryandm1983]

super ! – i managed to use the code to get the desired affect.

Tell me, when i put the code in, i managed to edit the tabs on the “work & play” page = http://genesishotel.vayadata.co.za/work-play/

Now, i would like to edit the tabs on my “suites” page, so i added the “my-class-1”, to the tab elements, thinking it would allocate the same css properties across. But alas nothing happens ?

What am i doing wrong ?

Here below is the code i used and is working (but not on the suites page)… =

ul.x-nav.x-nav-tabs.my-class-1.three-up.top li a {
background-color: rgba(29,58,98,.99);}

many thanks…

[Nabeel A]

Hi again,

Replace your code with this one:

ul.x-nav.x-nav-tabs.four-up.top li:first-child a {
    background-image:url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
}
ul.x-nav.x-nav-tabs.four-up.top li:nth-child(2) a {
    background-image:url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
}
ul.x-nav.x-nav-tabs.four-up.top li:nth-child(3) a {
    background-image:url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-award-tripadvisor-fullcolour-2.png");
}

Let us know how this goes!

[Ryandm1983]

Eurika !

Thank you – so now i see that, changing just “three-up.top” to > “four-up.top”, i can now edit my suites page.

So im guessing this is the menu position of the pages. IE three up top meaning three pages from the right hand side of the menu, then four up top meaning four pages up from the right hand side of the menu.

Thank guys – working now. Hope this thread helps someone else out.

[Joao]

Hi Ryan,

I am glad we were able to help.

Let us know if you need help with any other issue.

Thanks,

Joao

[Ryandm1983]

Hi Joao

One more question, how do i change the inner content background on a tab element ?

Thanks man

[Ryandm1983]

Hey There Joao- ok so i proudly figured out how to add an image into the content of a tab element….sort of… need a little help.. 2 questions regarding class…

1) I’m using the below code successfully to add a background image=

.x-tab-content .x-tab-pane {
background-image: url(“http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-site-highres-background.jpg”);
} = Question how do i only apply this code to a specific element class ?

2) I’m using the below code successfully to remove tab element borders=

.x-tab-content {
-webkit-box-shadow: none;
box-shadow: none;
border:none;
} = Question how do i only apply this code to a specific element class ?

[Friech]

Hi There,

You can update your code to:

.x-tab-content.yourclass .x-tab-pane {
background-image: url("http://genesishotel.vayadata.co.za/wp-content/uploads/2016/05/genesis-site-highres-background.jpg");
}

.x-tab-content.yourclass {
-webkit-box-shadow: none;
box-shadow: none;
border:none;
}

Replace the yourclass with your actual class.

Hope it helps, Cheers!

[Ryandm1983]

It helped indeed ! – thank you

[Joao]

Cool Ryan,

Let us know if you need help with anything else.

Joao

[Author]

Posts