Docs

[bak]

Hi

1) How can I change the backgroungcolor of the accordion when a) closed and b) when opened?
2) How can I change the color of the little plus sign when a) closed and b) when opened?
3) How can I change the font of the accordion title so it does not look bold but rather like a regular custom headline or text
4) How can I remove the frame and shadow of the accordion so I am left with the title looking like a regular link with a plus sign in front of it?

Thanks

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

For # 1 a&b (Toggle Bar):

/* Toggle Bar */

/* Toggle Heading Color & Background when open */
.x-accordion-heading .x-accordion-toggle {
    color:#ffffff;
    background:#000000;
}

/* Background color of Toggle when closed */
.x-accordion-heading .x-accordion-toggle.collapsed {
    background: #f8f8f8;
    color:#383838
}

For the toggle bar you can also change the color of it’s hover state. You can use the following if you wanted to do that:

/* Toggle Heading Hover Colors */
.x-accordion-heading .x-accordion-toggle:hover {
    color:#eeeeee;
    background:#555555;
}

For # 2 a&b (Toggle Icon):

/* Toggle Icons */

/* Change Icon of Toggle and color when open */
.x-accordion-heading .x-accordion-toggle:before {
    color:blue;
}

/* Toggle Icon Color when closed*/
.x-accordion-heading .x-accordion-toggle.collapsed:before {
    color:red;
}

Again here is the option to change the hover color of the toggle icon:

/* Toggle Icon Hover Color */
.x-accordion-heading .x-accordion-toggle:hover:before {
    color:yellow;
}

You can also change the Icon if you want by using the following:

/* Change Icon of Toggle and color when open */
.x-accordion-heading .x-accordion-toggle:before {
    content: "\f040";
}

/* change toggle Toggle Icon when closed*/
.x-accordion-heading .x-accordion-toggle.collapsed:before {
    content: "\f041"; /* If you wanted a different Icon when closed */
}

For # 3 (Adjust Font Weight of Accordion Title):

/* Change font-weight of Accordion Title */
a.x-accordion-toggle.collapsed {
    font-weight: normal;
}

Note: It is set to normal by default on our end, so it may not make a difference. you can also try these values to chang the font weight: normal, lighter, bold, bolder, 100. 200. 300, 400, 500, 600, 700, 800, 900. The font weights will only work if the font has those weight versions.

For # 4 (Remove frame and shadow):

.x-accordion-group {
    border: none;
    box-shadow: none;
}

Please Note, that since you did not provide your URL for us to check, these recommendations are based on the original configuration or our accordion theme assuming you did not have any customization on it already. If it does not work, please do provide us with your URL.

Let us know how that goes. Hope this helps – thanks!

[bak]

This reply has been marked as private.

[Joao]

Hi There,

1) Background color in close state add this code to your Customizer CSS

.x-accordion-heading .x-accordion-toggle.collapsed {

background-color: #f1f1f1 !important;
}

.x-accordion-heading .x-accordion-toggle {

background-color: #f1f1f1 !important;
}

.x-accordion-inner {

background-color: #f1f1f1 !important;

border-top: none !important;
}

2) Please try adding the following code:

.x-accordion-heading .x-accordion-toggle.collapsed:before:hover

color: #242e51 !important;

}

.x-accordion-heading .x-accordion-toggle:before:hover

color: #242e51 !important;

}

3-First code is for normal state, second for hover.

.x-accordion-heading .x-accordion-toggle { 

color: #242e51 !important;
 
}

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

4- Include on answer 2

5- For some reason you have som CSS rotate on your Icon here is how you undo it, but we could check if it is on your Custom / CSS and delete the original code that is doing that. The icon you should change for the number 54 and try to add this to fix the angle/rotation:

.x-accordion-heading .x-accordion-toggle:before {
    content: "\f054";
    webkit-transform: rotate(0deg) !important; 
    transform: rotate(0deg !important);
}

6- Yes.

7- Add the code and adjust according to your wishes:

.x-accordion-toggle{
    font-weight: 500;
}

I hope that helps,

Joao

[bak]

Hi, unfortunately most things did not work

Maybe it is easier to describe what I want to achieve

1) I want header box to completely disappear both in closed and open state. In closed stat the accordion header would look like a regular link with an icon in front of it. In open state, you would have the inner box opening below.

2) Closed state: The icon and the header should be in #DE0003. When you hover over it, both icon and header should go to #242e51. At the moment the header is #242e51, even when you do not hover instead of #DE0003

3) Open state: The icon and header should be #242e51, if you hover or if you do not hover. At the moment the icon goes to grey when you hover. The header font weight should be 100 but it does not apply the CSS

4) Closed state The triangle should face down. Open State: the icon should fave right. The code you gave me made it face right in the closed state

I think it would be best to give this accordion a class because some should stay as they are and some should be in this design

[Nabeel A]

Hi again,

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[bak]

OK no problem, so could you check why the changes you gave me above do not work properly?

[Joao]

Hi there,

Please provide your WP Admin credentials so we can have a better look why the codes didn´t work.

Make sure to mark it as a private reply.

Thanks

[bak]

This reply has been marked as private.

[Darshana]

Hi there,

CSS will not parse if there are any errors. Please copy all your custom CSS rules into an online tool like CSS Lint (http://csslint.net/) and check for errors. You need to fix the CSS errors to function your styles properly.

Thanks!

[bak]

This reply has been marked as private.

[Friech]

Hi There,

Please update those custom css blocks to this:

a.x-img.bottom-img-3 {
	background: url('http://194.126.200.62/~bakronat/wp-content/uploads/2016/01/Monitoring-Partikelz%C3%A4hler-N.jpg') no-repeat center top;
	background-size: contain;
	transition: 0.25s all ease-in-out;
}

.x-accordion-heading .x-accordion-toggle:before {
	content: "\f054";
	-webkit-transform: rotate(0deg) !important;
	transform: rotate(0deg) !important;
}

And another thing, please look for this @media query declaration on your custom css

( min-width: 400px )

and

( min-width: 1100px )

Then remove the white-space, because CSS lint is treating that as an error as well.

Hope it helps, Cheers!

[bak]

This reply has been marked as private.

[Rue Nel]

Hello There,

I would highly recommend that you please refine and arrange your custom css in a much orderly manner. The best practice is that you have to make your that all your other @media statement should at the bottom of all your custom css. Please consider this format:

.element-1 {
  // your stylling here
}

.element-2 {
  // your stylling here
}

@media(min-width:980px){
  .element-1 {
  // your stylling here
 }

  .element-2 {
  // your stylling here
 }
}

@media(max-width:979px){
  .element-1 {
  // your stylling here
 }

  .element-2 {
  // your stylling here
 }
}

@media(min-width:480px){
  .element-1 {
  // your stylling here
 }

  .element-2 {
  // your stylling here
 }
}

Please let us know how it goes.

[bak]

Hi

I re-arranged it.

1) Can you have a look if this is better?
2) What else can I do to clean up the code?
CSS Lint tells me I have one parsing error in line 180.
3) Can you check what the problem is?
4) How can I see which line it is as I do not see the code displayed with line numbers

[Author]

Posts