Return to previous page

Accordion styling. - by Roobinda - on WordPress WooCommerce support

This topic has 18 replies, 2 voices, and was last updated 6 years, 10 months ago ago by Rose Tyler

Roobinda

Participant

January 18, 2018 at 19:39

Hi there. I cannot, for the life of me, figure out how to change the font colour of individual accordion titles.

I know the class is .vc_tta-panel-title as I can change the font-family, but the colour just will not change!

I’m sure it’s something simple.

Please help.

Thanks.

#182270 Copied

17 Answers

Rose Tyler

Support staff

January 19, 2018 at 09:32

Hello,

To find out classes which need to be used, you may inspect code of site using inspector tools http://prntscr.com/i2jt76 https://developer.chrome.com/devtools
Let us know if you need any further assistance.

Regards

#182316 Copied

Roobinda

Participant

January 19, 2018 at 10:23

That’s exactly what i did! And how I discovered .vc_tta-panel-title

I can use it to change the font, but not the font colour!

#182327 Copied

Rose Tyler

Support staff

January 19, 2018 at 10:25

Hello,

Ok. Please see this screenshot https://prnt.sc/i2jt76 Do you want such result?

Regards

#182329 Copied

Roobinda

Participant

January 19, 2018 at 13:29

Hi Rose. I have placed a link to the page in question in Private Content.

I would like the accordion section titles to be white font, not grey.
Only on this page though.

Please, contact administrator
for this information.

#182372 Copied
Rose Tyler

Support staff

January 19, 2018 at 13:56
Hello,

Thanks for the link.
Please try to add this code in Custom css for page http://prntscr.com/i2n8wn:
```
.vc_tta-panels .vc_tta-panel-title span {
    color:  white !important;
}
```
Regards
#182377 Copied
Roobinda

Participant

January 19, 2018 at 14:40

AMAZING!

And how would I turn the – and + icons white?

Thank you so much Rose!

#182383 Copied
Rose Tyler

Support staff

January 19, 2018 at 15:06
```
.wpb-js-composer .vc_tta .vc_tta-controls-icon::before, .wpb-js-composer .vc_tta .vc_tta-controls-icon::after {
    border-color: white !important;
}
```
Regards
#182389 Copied
Roobinda

Participant

January 21, 2018 at 11:15

Hey Rose. That one didn’t work!

#182528 Copied

Rose Tyler

Support staff

January 22, 2018 at 08:53

Hello,

I’ve checked your site code via console and do not see the custom css code. Did you remove the code?
Please see this screenshot http://prntscr.com/i3spmn
Could you please provide temporary wp-admin access in Private Content?

Regards

#182561 Copied

Roobinda

Participant

January 22, 2018 at 10:53

Strange. I placed it in the style.css in my child theme and it didn’t work.
However, it works in the custom css field of the theme settings.

My understanding is that they should both work. Is this wrong?

Thanks Rose.

#182585 Copied

Rose Tyler

Support staff

January 22, 2018 at 11:08

It is strange that the code doesn’t work from style.css of the child theme, if the child theme activated on your site.
Provide us with temporary wp-admin and FTP access in Private Content, so we could check a reason of the problem.

Regards

#182590 Copied

Roobinda

Participant

January 22, 2018 at 12:03

See private content Rose.

I worked out how to apply the white titles to this accordion ONLY, as I don’t want every title on the site to be white. However, I would also like the icons to be white ONLY on this accordion, which I have assigned the class ‘Acc_IN_Reg’. Can’t seem to get this to work though…

Please, contact administrator
for this information.

#182603 Copied
Rose Tyler

Support staff

January 22, 2018 at 14:22
You may change the code to this (contain your custom class):
```
.wpb-js-composer .vc_tta.Acc_IN_reg .vc_tta-controls-icon::before, .wpb-js-composer .vc_tta .vc_tta-controls-icon::after {
    border-color: white !important;
}
```
or simply add this code in Custom css for page http://prntscr.com/i3x15p

You have code in style.css file of the child theme and if only part of the code doesn’t work, this means that you have some problem, for example, is not closed {, so check code which you added in the file.

Regards
#182630 Copied
Roobinda

Participant

January 22, 2018 at 15:40

Okay that kinda works. Although, if you check the accordion on the page listed in the private content section, you’ll see the upward stroke of the plus icon is white!?

There are no parsing issues in my style.css file either.

Anything else it could be?

Thanks again.

Please, contact administrator
for this information.

#182638 Copied

Rose Tyler

Support staff

January 22, 2018 at 15:55

Please change the page now. I have a bit changed the code in Theme Options > Styling > Custom css > Global custom css.
About style.css file, it also can be a cache issue. Do not forget to clear cache before checking effect of custom code. Also, do you edit style.css file via Appearance > Editor or via FTP?

Regards

#182641 Copied

Roobinda

Participant

January 22, 2018 at 16:19

Fixed! Thanks Rose. I use ftp.

#182647 Copied

Rose Tyler

Support staff

January 22, 2018 at 16:24

Great. Feel free to ask if you have any other questions.

Regards

#182649 Copied
Viewing 18 results - 1 through 18 (of 18 total)