This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to modify panel header of accordion

Resolved 15 replies pluginplugin-siteorigin-cssquestion
Tushar Gangoly
3 years ago · Last reply by Andrew Misplon 3 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

15
  1. Andrew Misplon Staff 3 years, 10 months ago

    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. Tushar Gangoly 3 years, 10 months ago

    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. Andrew Misplon Staff 3 years, 10 months ago

    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. Tushar Gangoly 3 years, 10 months ago

    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. Andrew Misplon Staff 3 years, 10 months ago

    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. Tushar Gangoly 3 years, 10 months ago

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

  7. Andrew Misplon Staff 3 years, 10 months ago

    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. Tushar Gangoly 3 years, 10 months ago

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

  9. Andrew Misplon Staff 3 years, 10 months ago

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

  10. Tushar Gangoly 3 years, 10 months ago

    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. Andrew Misplon Staff 3 years, 10 months ago

    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. Tushar Gangoly 3 years, 10 months ago

    Noted – have deactivated the Hummingbird plugin now

  13. Andrew Misplon Staff 3 years, 10 months ago

    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. Tushar Gangoly 3 years, 10 months ago

    Thank you, Andrew – its looking all good now.

  15. Andrew Misplon Staff 3 years, 10 months ago

    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.

Have a different question or issue?

Start New Thread