• Resolved planetboris

    (@planetboris)


    Hi, my website is not public yet and probably not necessary for this question. I am trying to use some css to make some adjustments to the excellent Advanced Tabs widget. I tried e-n-tabs .e-n-tabs-heading for example but I need to target individual tabs. Because I am using images for the tabs and I need to put in a hover affect when active and I can’t do that within the normal EA settings. Could you guide me on how to target individual tabs? What class I should use? Thanks and best regards.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support amin

    (@amin7)

    Hi planetboris

    I hope you are fine.
    In the advanced tab, you can use custom ID for targeting individual tabs, check the screencast, https://d.pr/v/Q4uItk

    Thanks & regards

    Thread Starter planetboris

    (@planetboris)

    That is excellent, that will also help with some other elements that require a similar solution. Thank you very much for helping me solve this. Wish you and your team a super day! Cheers

    • This reply was modified 3 months, 4 weeks ago by planetboris.
    Plugin Support Ashikur Rahman

    (@ashikurwp)

    Hi planetboris,
    Greetings.

    We haven’t received any updates from you since then. Could you please let us know the update?

    Thank you

    Thread Starter planetboris

    (@planetboris)

    Hi Ashikur, thanks for the follow up but I believe you missed my previous message. Please review this message thread. Cheers

    Plugin Support Ashikur Rahman

    (@ashikurwp)

    Hi planetboris,

    We’re glad to hear that everything is working properly. We’re closing this ticket. You’re always welcome to reopen the topic again if you face any issues.

    Thank you.

    Thread Starter planetboris

    (@planetboris)

    Hi Ashikur, I was able to implement the CSS ID with my code to enable change on hover. But I can’t get the correct code to work once the tab is active. What would the code be for making a change once a particular tab is active? I can set the code for change on hover, which works great, [ :hover ] but I can’t get the right code to make changes to the tab once it is active. Hope you can help. Thanks

    Plugin Support Ashikur Rahman

    (@ashikurwp)

    Hi planetboris,
    Greetings.

    You can utilize the [:active] for the particular tab when it’s in an active state. Additionally, we also have the option to style CSS changes for hover and active states. Please take a look at the demonstration here: https://d.pr/v/20KTwy.

    Please check and feel free to correct us with additional information if we have misunderstood your query.
    Thank you.

    Thread Starter planetboris

    (@planetboris)

    Hi Ashikur, thanks for the demo but I already know how those features work, I have been working with Advanced Tabs since 3 years. My question was about what css to use for the active tab. I know for hover you can use :hover, but I don’t know what syntax to use for active tab. Is it simply placing ” :active ” in front of the selector?

    Plugin Support Ashikur Rahman

    (@ashikurwp)

    Hi planetboris,

    Greetings. Sorry for not getting back to you sooner.

    You can utilize the CSS selector for ‘active’ just like you used for ‘hover’. For example, please have a look at the following:

    a.ex2:hover, a.ex2:active {
      font-size: 150%;
    }


    Hope it might help you out.
    Thank you.

    Thread Starter planetboris

    (@planetboris)

    Ok great, really appreciate, thanks very much. Will keep you posted once I have a chance to implement this

    Thread Starter planetboris

    (@planetboris)

    Hi, here is some feedback regarding the code implementation. I tried using the following CSS with the ID for the first tab: “#1:active {filter: contrast(1.75);}” The effect does indeed happen, as soon as I click the tab, but the effect is not sustained, it only appears quickly at the moment that you click, but then the effect quickly disappears, even though that tab is now active.

    • This reply was modified 3 months, 2 weeks ago by planetboris.
    Thread Starter planetboris

    (@planetboris)

    Hi, any update? Thanks

    Plugin Support Ashikur Rahman

    (@ashikurwp)

    Hi planetboris,
    Greetings. Sorry for not getting back to you sooner.

    Could you please share your page URL with us? Additionally, please clarify what you intended to achieve when the tab is in the active state? This will enable us to review it thoroughly from our end and provide you with the assistance you require.

    Thanks!

    Thread Starter planetboris

    (@planetboris)

    Hi Ashikur, I discovered that the code I was provided was not entirely accurate for my case. Finally I was able to get it to work by replacing the semi-colon with a period. I believe it is because of the use of ID and not class:

    #ID.active{
    filter:saturate(2)contrast(120%);
    }

    Have a great day, cheers!

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.