[elise83Participant]

Hi,

I’m using WP 4.4.1.

1) I’m a beginner and would like the CSS short code for accordion to enter into the customizer.

”Alarm” : color: #231F20; Arial 16
Hover on ”Alarm” (not the container) : #1893C8
Container transparent, no border

Little cross: color: #BF3693

”text inside the box”: color: #DD261D; Arial 10

2) How do customize differently accordions in different sections?

Thanks for you help!

[FriechModerator]

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.

Cheers!

[elise83Participant]

This reply has been marked as private.

[ZeshanMember]

Hi Elise,

Thanks for updating the thread!

This requires custom development, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

To style accordions differently, you can add unique CSS classes to them, e.g., accordion-1 under Class field of its settings (see: http://prntscr.com/7qeolc).

For the “Alarm” accordion, after adding the class accordion-1 , add following CSS under Custom > CSS in the Customizer:

.accordion-1 .x-accordion-group {
    border: none;
}
.accordion-1 .x-accordion-heading .x-accordion-toggle {
    color: #231F20;
    font-family: Arial, Sans-serif;
    font-size: 16px;
    background-color: transparent;
}

.accordion-1 .x-accordion-heading .x-accordion-toggle:hover {
    background-color: transparent;
    color: #1893C8;
}

.accordion-1 .x-accordion-heading .x-accordion-toggle:before,
.accordion-1 .x-accordion-heading .x-accordion-toggle:hover:before {
    color: #BF3693;
}

.accordion-1 .x-accordion-inner {
    color: #DD261D;
    font-family: Arial, Sans-serif;
    font-size: 10px;
    border: none;
}

Thank you!

[elise83Participant]

Thanks guys, it works! You are great 😉

Another question : I would like to reduce the space between the icon and the accordion.
Can we add another Class to an element that has already a class?

In that case, what would be best?

Thanks

[elise83Participant]

Another thing, how do I reduce the space between the first and second line? Between ”dental” and ”applications”.

Thanks!

[RupokMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.accordion-1 .x-accordion-heading .x-accordion-toggle {
  line-height: 30px;
}

Hope this helps.

Cheers!

[elise83Participant]

Hi,

it doesn’t work.

Here is the entire CSS code into the customizer

.accordion-1 .x-accordion-group {
border: none;
}
.accordion-1 .x-accordion-heading .x-accordion-toggle {
color: #231F20;
font-family: Lato, Sans-serif;
font-size: 30px;
background-color: transparent;
}

.accordion-1 .x-accordion-heading .x-accordion-toggle:hover {
background-color: transparent;
color: #1893C8;
}

.accordion-1 .x-accordion-heading .x-accordion-toggle:before,
.accordion-1 .x-accordion-heading .x-accordion-toggle:hover:before {
color: #BF3693;
}

.accordion-1 .x-accordion-inner {
color: #231F20;
font-family: Lato, Sans-serif;
font-size: 18px;
border: none;

.accordion-1 .x-accordion-heading .x-accordion-toggle {
line-height: 30px;
}

Mbn class is applied to both the image and the accordion.

Thanks for your help!

[LelyModerator]

Hello There,

Please check this part of the CSS:

.accordion-1 .x-accordion-inner {
color: #231F20;
font-family: Lato, Sans-serif;
font-size: 18px;
border: none;

.accordion-1 .x-accordion-heading .x-accordion-toggle {
line-height: 30px;
}

There’s missing closing bracket after this line: border: none;

Update above CSS part to this:

.accordion-1 .x-accordion-inner {
color: #231F20;
font-family: Lato, Sans-serif;
font-size: 18px;
border: none;
}
.accordion-1 .x-accordion-heading .x-accordion-toggle {
line-height: 30px;
}

Add this to reduce Icon and accordion space:

.home .x-feature-box-graphic {
    margin-bottom: 0 !important;
}

Hope this helps.

[elise83Participant]

Perfect! Thanks a lot guys, you deserve to be considered as the BEST THEME EVER!

[Paul RModerator]

You’re welcome and thank you for your kind words! 🙂

[Author]

Posts