Home>Support>How to modify panel header of accordion

How to modify panel header of accordion

By Tushar Gangoly, 3 years ago. Last reply by Andrew Misplon, 3 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

I would like to modify the colour of a few panel headers of the accordion and not all for a particular widget on this webpage:
https://indofrenchhub.com/learnfrenchonline

I tried using SiteOrigin Custom CSS to modify the colours, however, it did not change them, although I see the code in the window… Please advise

#accordion-label-dalf-c1-crash-course-sara-azevedo-rodriguez-35h-next-batch-starts-02-may-2022.sow-accordion-panel-header {
background-color: #0095ff;
}

#accordion-label-dalf-c1-preparatory-eco-course-vincent-bouen-10h-next-batch-starts-05-may-2022.sow-accordion-panel-header {
background-color: #0095ff;
}

#accordion-label-delf-b2-crash-course-sara-azevedo-rodriguez-35h-next-batch-starts-02-may-2022.sow-accordion-panel-header {
background-color: #0095ff;
}

#accordion-label-delf-b2-preparatory-eco-course-vincent-bouen-10h-next-batch-starts-04-may-2022.sow-accordion-panel-header {
background-color: #0095ff;
}

#accordion-label-delf-b1-preparatory-eco-course-vincent-bouen-10h-next-batch-starts-03-may-2022.sow-accordion-panel-header {
background-color: #0095ff;
}

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Tushar

    Thanks for reaching out.

    We, unfortunately, aren’t able to assist with Custom CSS adjustments within our free support scope. We do our best with the resources we have.

    The Custom CSS you’ve posted above uses blue for all header backgrounds, the same blue already in use on the page. When adjusting the background color in SiteOrigin CSS, did you select a background color other than blue?

  2. 3 years, 2 months ago Tushar Gangoly

    Hi Andrew,

    Yes, it was earlier set to the default grey colour when I posted the message, and subsequently changed it to blue (#0095ff ).

    However, my query is how to change the colour of just a few panels and not the entire set.

    I would really appreciate your help in this – thanks…

    #accordion-label-dalf-c1-crash-course-sara-azevedo-rodriguez-35h-next-batch-starts-02-may-2022.sow-accordion-panel-header {
    background-color: #e2007e; !important;
    }

    #accordion-label-dalf-c1-preparatory-eco-course-vincent-bouen-10h-next-batch-starts-05-may-2022.sow-accordion-panel-header {
    background-color: #e2007e; !important
    }

    #accordion-label-delf-b2-crash-course-sara-azevedo-rodriguez-35h-next-batch-starts-02-may-2022.sow-accordion-panel-header {
    background-color: #e2007e; !important
    }

    #accordion-label-delf-b2-preparatory-eco-course-vincent-bouen-10h-next-batch-starts-04-may-2022.sow-accordion-panel-header {
    background-color: #e2007e; !important
    }

    #accordion-label-delf-b1-preparatory-eco-course-vincent-bouen-10h-next-batch-starts-03-may-2022.sow-accordion-panel-header {
    background-color: #e2007e; !important
    }

  3. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the update.

    Each of the above rules targets a specific heading. If you change the color value of one of the rules, the heading of the rule it targets will change.

  4. 3 years, 2 months ago Tushar Gangoly

    Yes Andrew, Thats what I am trying to achieve, but it is not getting displayed with the colour set on the CSS … see the webpage, they all appear blue
    https://indofrenchhub.com/learnfrenchonline

  5. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Tushar

    Thanks for your reply.

    Please, disable CSS aggregation so I can take a look. If you’re using a caching plugin, please, clear it.

    Kind regards

    Andrew

  6. 3 years, 2 months ago Tushar Gangoly

    Hi Andrew
    Sorry – not sure how to disable CSS aggregation, please guide…

  7. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Tushar

    All of your CSS produced by your theme and plugins is combined into a single file. A performance/caching plugin is most likely doing that.

  8. 3 years, 2 months ago Tushar Gangoly

    Hi Andrew,
    Hummingbird plugin by the hosting service provider is installed for the website’s optimisation. Have cleared the cache on that.

  9. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the update. One of the Accordion headings is now a different color.

  10. 3 years, 2 months ago Tushar Gangoly

    Hi Andrew, yes, I noticed that :-)

    Had pasted the same code in CSS for the other 4 panels, but their colour hasn’t changed.
    Is it still a caching issue, you think?

    Also, if you could help me with the code to set a colour when the mouse hovers over it?

    Appreciating all your support

  11. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Unfortunately, we’re unable to offer direct Custom CSS assistance within our free support scope. We do our best with limited resources.

    Had pasted the same code in CSS for the other 4 panels, but their colour hasn’t changed.

    I can take a look at why this happening. Please, deactivate CSS aggregation/combination.

  12. 3 years, 2 months ago Tushar Gangoly

    Noted – have deactivated the Hummingbird plugin now

  13. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    The individual setting for CSS combination are probably found in the following section: https://wpmudev.com/docs/wpmu-dev-plugins/hummingbird/#asset-optimization.

    There are other headings with a different background color now visible.

  14. 3 years, 2 months ago Tushar Gangoly

    Thank you, Andrew – its looking all good now.

  15. 3 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you’re making progress. All the best with your site.

    Kind regards

    Andrew

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More