Shape 5

Joomla Templates => Arthur - Club => : labadmends September 20, 2017, 08:21:23 AM



: FAQ: adding a 3rd container
: labadmends September 20, 2017, 08:21:23 AM
I've added a third section to the FAQ Accordion but there seems to be a color issue on the first question in the third container. See it here:
http://collectivedialogue.org/index.php/about/faqs

I'm not sure where the color option applies here.  Help me out please!

This is the code:
/* FAQ ACCORDION
----------------------------------------------------------- */

.ac-container label,.ac-container2 label,.ac-container3 label{font-size:1em!important;height:43px!important;line-height:43px!important;padding:5px 20px;position:relative;z-index:20;display:block;margin-bottom:0!important;margin-top:0!important;cursor:pointer;background:#fff;color:#333;box-shadow:0 0 0 1px rgba(155,155,155,.3),0 0 0 rgba(255,255,255,.9) inset,0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(155,155,155,.3),0 0 0 rgba(255,255,255,.9) inset,0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(155,155,155,.3),0 0 0 rgba(255,255,255,.9) inset,0 0 1px rgba(0,0,0,.1)}.ac-container,.ac-container2,.ac-container3{width:100%;position:relative;z-index:0;margin:10px auto 30px;text-align:left}.ac-container label:hover,.ac-container2 label:hover,.ac-container3 label:hover{background:#000000;color:#FFFFFF;}.ac-container input:checked+label,.ac-container input:checked+label:hover,.ac-container2 input:checked+label,.ac-container2 input:checked+label:hover,.ac-container3 input:checked+label,.ac-container3 input:checked+label:hover{background:#F9F9F9;color:#666;height:30px;line-height:21px;font-size:13px}.ac-container input:checked+label:hover:after,.ac-container label:hover:after,.ac-container2 input:checked+label:hover:after,.ac-container2 label:hover:after,.ac-container3 input:checked+label:hover:after,.ac-container3 label:hover:after{content:'';position:absolute;width:24px;height:24px;right:13px;top:7px}.ac-container input,.ac-container2 input,.ac-container3 input{display:none}.ac-container article,.ac-container2 article,.ac-container3 article{background:rgba(255,255,255,.5);margin-top:-1px;overflow:hidden;height:0;position:relative;z-index:10;-webkit-transition:height .3s ease-in-out,box-shadow .6s linear;-moz-transition:height .3s ease-in-out,box-shadow .6s linear;-o-transition:height .3s ease-in-out,box-shadow .6s linear;-ms-transition:height .3s ease-in-out,box-shadow .6s linear;transition:height .3s ease-in-out,box-shadow .6s linear}.ac-container article p,.ac-container2 article p,.ac-container3 article p{font-style:normal;color:#333;padding:20px}.ac-container input:checked~article,.ac-container2 input:checked~article,.ac-container3 input:checked-article{-webkit-transition:height .5s ease-in-out,box-shadow .1s linear;-moz-transition:height .5s ease-in-out,box-shadow .1s linear;-o-transition:height .5s ease-in-out,box-shadow .1s linear;-ms-transition:height .5s ease-in-out,box-shadow .1s linear;transition:height .5s ease-in-out,box-shadow .1s linear;box-shadow:0 0 0 1px rgba(155,155,155,.3)}.ac-container input:checked~article.ac-text,.ac-container2 input:checked~article.ac-text2,.ac-container3 input:checked-article.ac-text3{height:auto}.ac-container input:checked~article.ac-small,.ac-container2 input:checked~article.ac-small2,.ac-container3 input:checked-article.ac-small3{height:140px}.ac-container input:checked~article.ac-medium,.ac-container2 input:checked~article.ac-medium2,.ac-container3 input:checked-article.ac-medium3{height:180px}.ac-container input:checked~article.ac-large,.ac-container2 input:checked~article.ac-large2,.ac-container3 input:checked-article.ac-large3{height:230px}

.ac-container, .ac-container2, .ac-container3 {
margin-left:2px;
}

.ac-container input:checked + label, .ac-container input:checked + label:hover, .ac-container2 input:checked + label, .ac-container2 input:checked + label:hover, .ac-container3 input:checked + label, .ac-container3 input:checked + label:hover {
color:#FFFFFF;
}



: Re: FAQ: adding a 3rd container
: mikek September 20, 2017, 08:39:55 AM
That color is controlled in the template's index.php file. Just search for ".ac-" and it will take you right to that section and you'll need to a create a third instances of that css.


: Re: FAQ: adding a 3rd container
: labadmends September 22, 2017, 10:16:16 AM
Ahhh! Thank you Mike!