-
AuthorPosts
-
July 9, 2015 at 3:46 pm #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!
July 9, 2015 at 4:43 pm #470998One 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.
July 10, 2015 at 12:30 pm #471409Hi!
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,
AndyJuly 10, 2015 at 3:23 pm #471506Thanks 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.
July 10, 2015 at 3:38 pm #471527Ok. I tested the suggested code.
The first code worked, but changed all other accodions.
The Second code didn’t work at all.July 10, 2015 at 3:44 pm #471541I just deactivated all plugin to test. nothing.
July 13, 2015 at 10:43 am #472222Hey!
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,
AndyJuly 13, 2015 at 10:52 am #472230You 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.
July 13, 2015 at 2:39 pm #472453Hey!
I couldn’t log in with those details, I think the user might be incorrect?
Cheers!
RikardJuly 13, 2015 at 2:46 pm #472461Ok, 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.
July 14, 2015 at 5:57 am #472819Hi!
Sorry, same result with those details. Could you verify that they work before sending them please?
Cheers!
RikardJuly 14, 2015 at 8:51 am #472887Sorry 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.
July 15, 2015 at 12:00 pm #473639Hey!
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,
AndyJuly 15, 2015 at 12:26 pm #473658Thanks 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,
July 15, 2015 at 12:31 pm #473662Hey!
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.
July 15, 2015 at 12:36 pm #473668Ok, now i understand. Your first link was broken.
Thanks Andy
July 15, 2015 at 1:12 pm #473696Hey!
you are right.
We will wait for you to implement everything. Let us know when you are ready and need more help.Regards,
AndyJuly 16, 2015 at 10:22 am #474132OK, 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,
July 16, 2015 at 11:08 am #474155Hey!
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,
AndyJuly 16, 2015 at 11:25 am #474170Wow, 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
July 16, 2015 at 11:54 am #474187OK, 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
July 16, 2015 at 12:21 pm #474211Hi!
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,
AndyJuly 16, 2015 at 12:34 pm #474220take 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
July 16, 2015 at 1:31 pm #474266Hey!
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!
AndyJuly 16, 2015 at 1:49 pm #474281That 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
July 16, 2015 at 2:07 pm #474295Hi!
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 -
AuthorPosts
- You must be logged in to reply to this topic.