Docs

[Mireo_GeniusMaps]

Hi Themeco team,

Im satisfied with Xtheme functionality and flexibility, but Ive been experiencing certain problems while trying to apply a custom style to Accordion within Integrity theme.

I tried all style attributes proposed on this forum, but had no luck. I hope you can help me with this particular issue.

Page url: http://fcluster.mireo.hr:8081/automotive-gps-navigation/ (Accordion at the bottom of the page)

Thanks in forward,
Vedran.

[Paul R]

Hi Vedran,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Mireo_GeniusMaps]

Hi Paul,

what Im tryin to achieve is to change accordion`s:

1.) all background colors to yellow (#fcb813),
2.) “+” icon larger but thinner and with black color
3.) heading font hover color to black

Unfortunately, none of the provided codes worked for me (I know that I`m missing
something but still not sure what).

Screenshot attached.

Thank you,
Vedran.

[Lely]

Hi Vedran,

On you accordion element class field, please add custom-accordion. Then use the following CSS:

1.)

.custom-accordion .x-accordion-heading .x-accordion-toggle, .custom-accordion .x-accordion-inner {
    background-color: #fcb813;
    border: 0; /*Remove this line if you want to retain border*/
    box-shadow: none; /*Remove this line if you want to retain box-shadow*/

}
.custom-accordion .x-accordion-group {
    border-color: #fcb813;/*Feel free to change this to your preferred border color*/
}

2.)

.custom-accordion .x-accordion-heading .x-accordion-toggle:before {
    font-size: 100%;
    color: #000000;
}

3.)

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

Hope this helps.

[Mireo_GeniusMaps]

Hi Lely,

thanx for your lightning-fast response. Unfortunately, it doesn`t work.
I think I somehow messed up something because all custom css changes remain
as they should, but newer changes in css cannot be applied (even for custom buttons).
There`s obviously some kind of conflict which I cannot detect.

Can I provide you with my login data so you could take a look?

Great theme and even better support!
BIG THANKS!

[Paul R]

Hi,

I can see there are syntax errors in your css code preventing the codes below it from working.

Please replace your button’s css in Custom > Edit Global CSS with this

  /*
// Buttons
*/

.x-btn {
  font-weight: 700;
}

.x-btn.x-btn-alt,
.button.x-btn-alt,[type="submit"].x-btn-alt {
  border-color: #02aed6;
  background-color: #02aed6;
  box-shadow: 0 0.25em 0 0 #0b8ead, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.x-btn-alt:hover,
.button.x-btn-alt:hover,[type="submit"].x-btn-alt:hover {
  border-color: #0b8ead;
  background-color: #0b8ead;
  box-shadow: 0 0.25em 0 0 #097690, 0 4px 9px rgba(0, 0, 0, 0.75);
}

If that doesn’t help, please provide login in private reply.

Thanks

[Lely]

Hi Vedran,

Please look for this part on your custom CSS:

.x-btn-navbar.collapsed, .x-btn-navbar.collapsed:hover {
-webkit-box-shadow: none;
box-shadow: none;

.x-btn-navbar.collapsed:hover {
color: #ffff;
background-color: #ffff;
box-shadow: none;
}

The’re’s missing closing curly brace. That is considered syntax error in CSS. Please update to this:

.x-btn-navbar.collapsed, .x-btn-navbar.collapsed:hover {
-webkit-box-shadow: none;
box-shadow: none;
} /* This closing is needed*/

.x-btn-navbar.collapsed:hover {
color: #ffff;
background-color: #ffff;
box-shadow: none;
}

If it is still not working after that, please provide credentials on a private reply!

Cheers!

[Mireo_GeniusMaps]

I owe you,

youre my hero! Now its all fine.

Next time I`ll doublecheck everything 🙂

Cheers!
Vedran.

[Rahul]

Glad we were able to help you out!

Let us know if we can help with anything else.

Thanks!

[Author]

Posts