[Clelia MattanaParticipant]

I’d like to play around with the accordions, is there an easy way to change the color of the box and the color of the text?
I guess I should try to put the CSS on the style field, but i don’t know the code.
I tried to put “color: blue” and I got the text inside the accordion in blue. So I was on the right track…too bad that i don’t know how to change the other colors…

Can you help me with that?

Thanks a lot!

[SenthilMember]

Hey There,

Thanks for writing in.

You already started learning CSS and keep going 🙂

So here is some sample attributes that you can try on accordion.

To change accordion title style :

.x-accordion-heading .x-accordion-toggle {
	color: #CC0000;
	font-size: 18px;
	padding: 5px 0;

}

To change accordion inner content style :

.accordion-body {
	color: #C00;
	font-size: 18px;
	padding: 10px;
}

Play with the sizes and colors and you will soon become a master in CSS .
Here are some color codes to try out.
http://www.color-hex.com/

Hope it helps, thanks!

[Clelia MattanaParticipant]

Thank you! I tried but it didn’t work… strangely enough, if i just put the color: blue (example) on the style css of the accordion, it gives me a blue border.

I am looking for simple customization, doing it directly on the style field of the accordion. I tried different versions of your code, and it worked once changing the size, but not the color.

Any hint? Thanks a lot!

[ZeshanMember]

Hi Klelietta,

Thanks for writing in! In that case, to assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

Thanks!

[Clelia MattanaParticipant]

My URL is http://www.keepcalmandtravel.com

Thanks again!

[SenthilMember]

Hi There,

Thanks for sharing the informationn!

We can see that the code is working fine with your site.

Please paste the code in your Appearance > Customize > Custom > CSS and it will work.
You can update the colors/sizes etc.

.x-accordion-heading .x-accordion-toggle {
	color: #CC0000;
	font-size: 18px;
	padding: 5px 0;
}

.accordion-body {
	color: #C00;
	font-size: 18px;
	padding: 10px;
}

Hope it helps, thanks!

[Clelia MattanaParticipant]

Thanks! I tried and it work but i can’t change the color of the box (only the text color), also I noticed that the + sign is now too attached to the left border, before there was a bit more space and looked nicer.

Is there a way to change the color of the box, instead of white, make it another color?
here is an example of what it looks like now that i’ve added the code

http://www.keepcalmandtravel.com/how-to-move-in-sardinia-buses-flights-rent-a-car/

thanks!

[ChristopherModerator]

Hi there,

Add these codes too:

/* Icon space */
.x-accordion-heading .x-accordion-toggle:before{
margin-left:17px;
}
/* Accordion's title color */
a.x-accordion-toggle {
color: red !important;
}
/* Accordion's title background's color */
.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: blue;
}

Hope it helps.

[Clelia MattanaParticipant]

Thanks! it worked 🙂

Just one more question: now the color of the text on the accordion title, when i hover on it, doesn’t change the color anymore (before when collapsed it was almost black and when i hovered the cursor on it became blue). When the accordion is open (being the text white) i can’t see it anymore… any suggestion on how to pick a color when the accordion is open?

example in here : http://www.keepcalmandtravel.com/how-to-move-in-sardinia-buses-flights-rent-a-car/ (the green accordions with the white text, when open…the text obviously disappear)

Also, let’s say that I want to have different background colors for different accordions. Is there a way to personalize each one on the inline style CSS?

Thanks a lot!

[Paul RModerator]

Hi,

Please replace the code given abovewith this.

/* Icon space */
.x-accordion-heading .x-accordion-toggle:before{
      margin-left:17px;
}

/* Accordion's title color */
.x-accordion-heading .x-accordion-toggle {
      color: #fff;
}

/* Accordion's title background's color */
.x-accordion-heading .x-accordion-toggle.collapsed {
      background-color: blue;
}

Hope that helps.

[jptrotierParticipant]

Hi there,

it is possible to have two different color. I precise, i have already custom in one page the accordion color.
Now i want to have different look in another page (same site).

Here are the code i have for the first on : /*closed icon color*/
.x-accordion .x-accordion-heading .x-accordion-toggle.collapsed:before {
color: #86AB6B;
}

/*open icon color*/
.x-accordion-heading .x-accordion-toggle:before {
color: #86AB6B;
}

/*hover icon color*/
.x-accordion .x-accordion-toggle.collapsed:hover:before {
color: #ffffff;
}

Now i need to custom a new one but in the same site ???
Thanks

[JadeModerator]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[jptrotierParticipant]

Thanks.
Here are the URL :
http://www.kshsolutions.ca/projects-list-by-sector

I have another page using the same CSS code. I need to create an another code for this Accordion.

thanks a lot.. 🙂

[ZeshanMember]

Hi there,

Thanks for writing in!

In that case, you can add a custom CSS class e.g. diff-color-acc to your accordion element under Class field of its settings (see: http://prntscr.com/7qeolc). Then, you can use following CSS code under Custom > CSS in the Customizer:

/* closed accordion header font/background code */
.diff-color-acc .x-accordion-heading .x-accordion-toggle.collapsed {
    color: #86AB6B;
    background-color: #ffffff !important;
}

/* open accordion header font/background code */
.diff-color-acc .x-accordion-heading .x-accordion-toggle {
    color: #ffffff;
    background-color: #86AB6B !important;
    font: bold 17px "open sans" !important;
}

/* hover accordion header font/background code */
.x-accordion.diff-color-acc .x-accordion-toggle.collapsed:hover {
    color: #ffffff;
    background-color: #86AB6B !important;
}

Then you can replace the colors for that specific accordion.

Thanks!

[jptrotierParticipant]

ok great. I understand the trick. 🙂
i will reuse it for other element in the theme.
thanks a lot.

[Author]

Posts