Is there a way to have different color tabs on different pages?
Permalink Browser Info Environment
Pardon my ignorance, I got the tabs looking the way I want on one page, but I want to use the app on another page on the website with different colors. Is there a way to do that?
| Type: | Discussion |
|---|---|
| Status: | New |
Hi,
I used the method you describe here and tweaked it a bit so I thought I'd contribute.
I attached a value with a hidden input on each page, like you suggested, but then I used an if/else statement in easy_accordion.js to attach those values to classes I created in the easy_accordion.css file, like so:
then I changed the line
to
This also needs to be changed in the jQuery.fn.clickActions function inside easy_accordion.js file by adding the same if/else statement and changing the line
to
Finally, the colors in the ccm-easyAccordion-title-active class in the css file were removed. They can likely be changed with another if/else statement and a different variable. Hope this helps!
I used the method you describe here and tweaked it a bit so I thought I'd contribute.
I attached a value with a hidden input on each page, like you suggested, but then I used an if/else statement in easy_accordion.js to attach those values to classes I created in the easy_accordion.css file, like so:
if($("#thispageis").val()=="shop"){ var usedclass = 'acc-shop'; }else if($("#thispageis").val()=="dine"){ var usedclass = 'acc-dine'; }else if($("#thispageis").val()=="live"){ var usedclass = 'acc-live'; }else { var usedclass = 'ccm-easyAccordion-title'; }
then I changed the line
.addClass('ccm-easyAccordion-title')
to
.addClass(usedclass)
This also needs to be changed in the jQuery.fn.clickActions function inside easy_accordion.js file by adding the same if/else statement and changing the line
$('.ccm-easyAccordion-title', ref).removeClass('ccm-easyAccordion-title-active').next().slideUp();
to
$('.'+usedclass, ref).removeClass('ccm-easyAccordion-title-active').next().slideUp();
Finally, the colors in the ccm-easyAccordion-title-active class in the css file were removed. They can likely be changed with another if/else statement and a different variable. Hope this helps!
Line 34:
and changed it to
Also changed lines 71 and 73 from
to
Then just on the cms I'd put in a html block in that said..
Just change value to what you want the color to be. Now I wanted the tab to be white with the value set in the tag to be the border. This will give others a start though!