Docs

[Cherylwoodman]

Hi Themeco,

I want to change the Ethos accordion styling to look like the Integrity accordion (like this –> http://theme.co/x/demo/integrity/1/shortcodes/accordion/)

That means I need to

1. change the background colour to white
2. input a border
3. Change text colour
4. change button ‘+’ & ‘-‘) colours
5. change font

I’ve found this code to do 1 & 3 ….

/* Background Color */
.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: #134565;
}
/* Font Color */
.x-accordion-heading .x-accordion-toggle {
color: #fff;
}

But I’m stumped on the rest, can you help?

Thanks,

Cheryl

[Rupok]

Hi Cheryl,

Thanks for writing in! Let’s use this :

.x-accordion-heading .x-accordion-toggle {
  background-color: #fff;
  border: 1px solid #333;
  color: #333;
}

.x-accordion-inner {
  border-color: #333;
}

.x-accordion-heading .x-accordion-toggle:hover {
  color: #f54;
}

.x-accordion-heading .x-accordion-toggle:hover::before,
.x-accordion-heading .x-accordion-toggle.collapsed::before {
  color: #333;
}
 

Now let’s change the values and color codes as needed.

Cheers!

[Cherylwoodman]

Hi Rupok,

Thankyou…

I’ve written the code out into the CSS panel (is there a way to copy and paste this? I used to be able to in the custom CSS box of an older X theme version, but now It looks like copy+paste is not accepted in the new filed?)

Unfonrtunaly the code isn’t modifying any of the colors…

Have I written it correctly?

.x-accordian-heading .x-accordion-toggle {background-color: #d0c0d0; border: 1px solid #c0c0c0; color: #c0c0c0;}

.x-accordian-inner {border-color: #333;}

.x-accordion-heading .x-accordion-toggle:hover {color: #c0c0c0;}

.x-accordian-heading .x-accordion-toggle:hover::before,
.x.accordion-heading .x-accordion-toggle.collapsed::before {colour: #c0c0c0;}

Cheryl

[Paul R]

Hi Cheryl,

Please change x-accordian to x-accordion

Thanks

[Cherylwoodman]

Thanks Paul!

The code works perfectly to change the look of the accordion, it’s just missing a few parts to modify..

– the colour of the header bar when it’s not selected
– the colour of the text in the header bar when not selected

I’d be lost without you guys!

[Rupok]

Hi there,

Thanks for updating. Custom CSS/JS box certainly supports copy pasting so not really sure what you are facing.

However it should be the background color of title when collapsed :

.x-accordion-heading .x-accordion-toggle.collapsed {
  background-color: #fff;
}

And text color should be this that already provided :

.x-accordion-heading .x-accordion-toggle {
  color: #333;
}

If that doesn’t work then update this to :

.x-accordion-heading .x-accordion-toggle {
  color: #333!important;
}

If you still have any question then provide your URL and add screenshot to point out the issue so that we could understand the issue right.

Cheers!

[Cherylwoodman]

Thankyou! That works..

Yup its strange, I tried again to copy & paste the code, but when I do this, the code doesn’t colour code itself (which I guess is when the system recognises the individual attributes), then when I try to click into it, to change colours, it self deletes… hmmm….

The last thing I wanted to change is the colour of the arrows on the accordion header bar… see screenshot and link…

http://honestyforyourskin.co.uk/index.php/product/renew-antioxidant-night-oil/

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-accordion-heading .x-accordion-toggle:before {
    color:red !important;
}

Change red with the color that you like.

[Cherylwoodman]

Awesome! Thankyou 😀

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts