Tagged: ,

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #470956

    Hi,

    I’ve been searching the forum and couldn’t find exactly what I need.

    I would like to know, how I can change one single tab colour on just one page of the website?
    See below for link.

    Once this is possible, I would also like to alter the active and hover colours of the tabs.

    Thank you in advance!

    #470998

    One more thing to add to this section.

    I’m trying to use the Accordion to section off each of the product. But when i’m adding more than 2 tabs, the whole page breaks. See test page link.

    Maybe I’m throwing too much information into the tabs.

    #471409

    Hi!

    use this code for to change background color for your first tab:

    .togglecontainer .single_toggle:first-child .toggler, .togglecontainer .taglist + .single_toggle .toggler {
    background-color: red;
    }
    

    If you want it only on your first link (only on this page) you have to add the page-id:

    .togglecontainer .single_toggle:first-child .toggler, .togglecontainer .taglist + .single_toggle .toggler .page-id-4856 {
    backgrund-color: red;
    }
    

    On your second link I can’t see any issue. Can you highlight what’s going on? you can use screenshots (imgur, dropbox).

    Regards,
    Andy

    #471506

    Thanks for replying, I will try the code provided and I’ll let you know whether it does the trick.

    As for my other problem, please take a look at another link, for a better idea of what i mean.

    I’m trying to fit all the information below the accordion, so that each section becomes a tab. maybe there’s some formatting issues because I’ve had to “manually” rebuild the layouts, so that they fit inside each tab.
    The problem comes, when i add more than one tab. the second tab becomes unclickable, but when i add a third tab, this is when the fun begins – the third tab separates from the other two and changes color. which is still unclickable.

    I hope you understand what I trying to get at. If not, take a look at the other web link provided. this site uses an accordion that i’m trying to achieve, only mine will have an easy slider.

    Thanks inadavance for your help and understanding.

    #471527

    Ok. I tested the suggested code.

    The first code worked, but changed all other accodions.
    The Second code didn’t work at all.

    #471541

    I just deactivated all plugin to test. nothing.

    #472222

    Hey!

    could you provide us admin access, so we can take a closer look into it? Are we allowed to temporarily deactivate all your plugins? Post login details here as private reply.
    Please try to remove the second accordion tab and update your page. Afterwards rebuild it and check again. Keep all plugins deactivated while testing.

    Regards,
    Andy

    #472230

    You can test whatever you need to test and turn off what you need to. the site is not “live” at the moment.

    I’ll try the changes you mentioned. See below for account details.

    #472453

    Hey!

    I couldn’t log in with those details, I think the user might be incorrect?

    Cheers!
    Rikard

    #472461

    Ok, I turned all plugins off and resaved the page with the second tab removed. I then proceded to add the second tab and the accordion broke again.

    See below for updated user name.

    #472819

    Hi!

    Sorry, same result with those details. Could you verify that they work before sending them please?

    Cheers!
    Rikard

    #472887

    Sorry for the back and forth.

    Ok, i messed up the password, so i changed it. I’ve just checked the account and i can confirm that logging in is now 100% possible. Please see the private message.

    #473639

    Hey!

    in my second code from this post I had a typo (I wrote backgrUnd-color instead f background-color), so with this code instead it will work:

    .togglecontainer .single_toggle:first-child .toggler, .togglecontainer .taglist + .single_toggle .toggler .page-id-4856 {
    background-color: red;
    }
    

    I already implemented it in your Quick CSS and it is showing fine for me.

    However, I think for what you want to achieve you would need to turn on custom class for all ALB elements. Then you can define a unique CSS class for each accordion element you are using. Let us know when you are done with this and still need help.

    Regards,
    Andy

    #473658

    Thanks Andy, that tab colour works now. I guess i would need to change the tab heading colour next and possibly resize height of the tabs.

    How would I go about customising this accordion? so that all the tabs with each of the enfold elements work together?

    Would it be best to use a plugin? any suggestions? I’ve searched everywhere for a plugin that can work in this way, but I’ve found nothing. This is the reason why I stuck with the enfold accordion. Hoping that it would work.

    Thanks inadvance to the Kriesi support team.

    Regards,

    #473662

    Hey!

    I already told you what to do to customize your tabs: turn on custom class for all ALB elements. Let us know when you are done with this and still need help.

    Cheers!
    Andy

    • This reply was modified 9 years, 4 months ago by Andy.
    #473668

    Ok, now i understand. Your first link was broken.

    Thanks Andy

    #473696

    Hey!

    you are right.
    We will wait for you to implement everything. Let us know when you are ready and need more help.

    Regards,
    Andy

    #474132

    OK, I’m unable to target a single accordion tab. I would like to make tab 1 (toggle-id-1) one colour, then tab 2 another.
    Could you show me the way to the land of Accordion heaven??

    Regards,

    #474155

    Hey!

    I can see that you turned on custom class for all ALB elements already. Nice. Now we need a correct unique CSS class. Just use something simple. For your first three accordion elements I put an example. Please have a look inside your accordion elements.
    Now you can call them via CSS with this:

    .accordion-1 p.toggler {
    background-color: blue !important;
    }
    .accordion-2 p.toggler {
    background-color: green !important;
    }
    .accordion-3 p.toggler {
    background-color: pink !important;
    }
    

    and so on.

    Best regards,
    Andy

    #474170

    Wow, it finally works! Thanks Andy! Virtual high five coming your way!! I just wish there would be an easier way to find this information.

    Just two more things to change, so that we can finally put this issue to bed:

    1: The height of the tab box?
    2: The tab icon colour and size? (is that 3 things?)

    Regards

    #474187

    OK, maybe one more thing…

    Because i now have 4 seperate accordions on this page, how can i activate the “Only one tab open at a time” feature?

    Regards

    #474211

    Hi!

    1.) use this:

    .accordion-1 p.toggler {
    height: 79px;
    }
    

    2.) Use this code:

    .accordion-1 p.toggler span.toggle_icon {
    background-color: red;
    }
    

    Size:

    .accordion-1 p.toggler span.toggle_icon {
    width. 23px;
    height: 23px;
    }
    

    3.) Not sure what you mean. Which feature do you mean exactly? where have you seen/read about such a feature?

    Best regards,
    Andy

    #474220

    take a look at the link below.

    below the heading appears a small accordion. when i click on the second tab, the first tab closes as the second opens. So only one tab is open at one time.

    Regards

    #474266

    Hey!

    edit your accordion element and look for “Behavior”. There you can choose those settings, e.g. “Only one toggle open at a time”.

    Hope this helps.

    Cheers!
    Andy

    #474281

    That i’ve changed already. But this feature doesn’t work when i have more than one accordion on a page.

    i just copied this from Firefox: is it something like this (“toggle_close_all”)
    class=”togglecontainer toggle_close_all avia-builder-el-5 el_after_av_textblock avia-builder-el-last enable_toggles”

    Regards

    #474295

    Hi!

    unfortunately that won’t work when using different accordion elements. It would require a heavy customization of the theme, which is out of our support scope. If you really need it, you would need to hire a freelancer for this job.

    Best regards,
    Andy

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