Edit Accordion CSS

[BrunoMaia]

Hi,

Is it possible to edit the Accordion CSS ?

As far as I can tell, accordion's CSS doesn't have a css file. It's stylesheet is embeded on html files.

Specifaclly, I would like to turn off the "text-transform: uppercase" on ".accordion__title" class.

Any way around this ? Or are we limited to the options in the buttons when editing the accordion ?

[MTpockets2 · Accepted solution]

Hi there!

Yes that's correct, there isn't a way to change the CSS code per say, but you can create CSS code to override what is already there and add it to the Theme > Edit HTML / CSS. 

[Erin6]

I don't believe you can change the accordion CSS, but you might be able to override it with some additional code. I'm really not sure, but @BJ or @MTpockets might be able to confirm or deny.

Thanks,

Erin

Weebly Community Manager

[MTpockets2 · Accepted solution]

Hi there!

Yes that's correct, there isn't a way to change the CSS code per say, but you can create CSS code to override what is already there and add it to the Theme > Edit HTML / CSS. 

[BrunoMaia]

Hi, 

Thanks for the reply.

I've tried placing the code bellow  on the CSS but nothing worked.

.accordion__title {

text-transform: Capitalize !important;

}

#element-c4efd066-820d-4d03-941f-1088f9afc4bf .accordion--box .accordion__item .accordion__title {

text-transform: Capitalize !important;

}

.accordion__title[stile] {text-transform: Capitalize !important;

}

#element-c4efd066-820d-4d03-941f-1088f9afc4bf .accordion--box .accordion__item .accordion__title[stile] {

text-transform: Capitalize !important;
}

I want to remove the Uppercase from the Accordion header.

Can you please tell me what to put on the CSS since none of my attempts worked ?

Thanks

Bruno

[BrunoMaia · Accepted solution]

Looks like
.accordion__title {
text-transform: Capitalize !important;
}
works

I had a typo in it

Thanks for the help.
Bruno

[Bernadette3]

I know this is an old post, but in case anyone comes across it.. you can turn off the caps by going to Themes>Change Fonts>Paragraph Text. Toggle the Uppercase ON and then OFF. Problem solved! 

[graemeleak]

thanks for this - I really needed to do it, but am not capable in the html/css department so your solution really helped