Different colors on different accordion

Hi,

First i am telling you that big spaces is generate only between two accordion groups.

You have display three accordion shortcode on that page [WPSM_AC id=1552] ,[WPSM_AC id=1543] and last is [WPSM_AC id=1551].

So do you want reduce the space between first two accordion group.

just add this css in your first accordion custom css field –

#wpsm_accordion_1552{
   margin-bottom: 5px;
}

Now let’s talk about – background color option on different Accordions in the same shortcode.

Actually now there are no option is available for it. I will try to change colors with custom css option, If it will be work then i let you know the solution.

Thanks

Thanks alot for your answer!

But how do I make it work on the other accordion groups?
I tried this
#wpsm_accordion_1543{
margin-bottom: 5px;
}

I want the same space (5px) between all groups.
https://www.wednesdayrelations.org/digitalanalyticsconference/

Thanks!!

Please let me know if you solve it with the bg colors. =)

If you want to apply on all accordion group then use this css –

.wpsm_panel-group{
  margin-bottom: 5px !important;
}

Thanks

Hi,

I have also found the solution for your different accordion bg color.

Add this css on your that accordion custom css field which bg color do you want to change.

#wpsm_accordion_1543:nth-child(1) .wpsm_panel-heading{
    background-color: #31a3dd !important;
}

#wpsm_accordion_1543:nth-child(2) .wpsm_panel-heading{
    background-color: #1ABC9C !important;
}

#wpsm_accordion_1543:nth-child(3) .wpsm_panel-heading{
    background-color: #F8504B !important;
}

try this css and then let me know.

You can change the color as you want for your accordion, if your accordion group has more than 3 accordion then just add more css code with change the number like this –

#wpsm_accordion_1543:nth-child(4) .wpsm_panel-heading{
background-color: #00525e !important;
}

here 1543 is your accordion shortcode id.
Thanks

I dont make it work with spaces.
It’s only working on the first group.

Se exampel:
https://www.ladda-upp.se/bilder/zfzetbaqxibhva/

Thanks for helping me

Hi,

space problem is not comes from accordion, actually there a blank h3 tag is append before accordion group html.

Check this screenshot.

Go to page editor and check it in text mode , remove that blank h3 tag. Your problem will be resolved after remove this.

Thanks

Hi again,

When I add your css-code for the background color it set the
color to #1ABC9C on all accordions.

Pleas see my printscreen to understand what I try to do.

https://www.ladda-upp.se/upload.php

Sorry, my bad. I did it to fast.
Now it should be fixed, but still to much space.

Thanks!!

Hi, thanks for the great plugin. I’m trying to change the colour for each section, I followed the instructions I found in this topic but it’s not working. Also, the custom css field looks weird: https://s33.postimg.org/b5ysam9y7/Schermata_2016_05_25_alle_17_51_32.png

Can you please help? Thanks!

Hi,

Actually custom css field js is manage on page load, if you will going to re-size your browser or zoom in out your browser then it’s going to be weird.

So change your browser zoom option to 100% and then load your accordion setting page, you will found that custom css field looks again nice.

Now let’s talk about color option,

Can you please share me your accordion page url ?

Thanks

Thank you! As the website cannot be published yet, how can I send you the login details privately? Thanks!

Contact me at wpshopmart[at]gmail[dot]com