Support » Plugin: Collapse-O-Matic » Changing the color of text in Collapse-o-matic

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi Nicole
    I was just looking through the forum and saw your post… you’ve probably resolved this by now but if not, you can add the trigclass=”heading” tag to the “expand” short code parameters on your page, and then add the following css
    .heading {
    color: #ffff;
    into the “Custom Style” box on the plugin options page (Settings/Collapse-O-Matic/)
    Hope this helps

    I’ve tried all sorts of codes but none of them seem to be working. I can change the size and font-weight of the title text, but not the color. No matter how I set up the CSS code with the expand codes, the color never changes.

    Here’s what I currently have listed in the Settings:

    Style: Light
    Tag Attribute: h6
    Collapse/Expand Duration: fast
    Animation Effect: Slide & Fade
    Custom Style: I did not list any. I put the specific CSS code within my theme’s h6 style.

    Within my Page:

    [expand title=”My Title Here” tag=”h6″]Content goes here. Blah blah blah… [/expand]

    Within my theme’s CSS file:

    h6 {
    font-size: 15px;
    font-weight: bold;
    color: #645240;

    I also tried putting the h6 CSS style within the Collapse-O-Matic’s Custom style box instead of within my own CSS file. Neither will change the color. If I adjust the font-size in that above CSS code, I see that change on my Page. If I adjust the font-weight, I see that change as well. But no matter what color I put, be it color: red; or color: #FFF; or color: #CCCCCC; or whatever setting, the color stays black.

    However, the expanded content that you read when you click on the arrow and read the content within, THAT content matches the color I have assigned for the text throughout the rest of the page. So I’m not sure why this particular part of the code won’t allow any overriding.

    Any suggestions? What am I missing?

    Thanks for the help!

    P.S. I cannot include a link to the site, because the site is not live yet. My client is still deciding on hosting companies and I’m still working to finish the final details of the site.

    Plugin Author Baden


    what browser are you using? Each browser has what is called an Element Inspector. This allows you to click on an element (the collapse-o-matic trigger text, in this case) and see where exactly it is getting the style from… and what style definitions are being overwritten, etc.

    If you want to use an H6 tag, this is would you would need to do:
    1. assign both the tag and trigclass attributes in the shortcode:

    [expand title="My Title Here" tag="h6" trigclass="bazinga"]Content goes here. Blah blah blah... [/expand]

    2. define the css for an h6.bazinga:

    h6.bazinga {
        font-size: 15px;
        font-weight: bold;
        color: #645240;

    if the color is still not being applied, then make it the !important like’a so:

    h6.bazinga {
        font-size: 15px;
        font-weight: bold;
        color: #645240 !important;

    That should do it. If not, you need to google the element inspector for the browser you are using (I recommend using chrome or firefox for development)

    Thank you for your help, Baden!

    The first option did not work, but adding !important overrode whatever was controlling the font.

    P.S. I love your choice of class name. Bazinga! 😉

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing the color of text in Collapse-o-matic’ is closed to new replies.