Custom CSS For Title or use Image

First, you might want to work with div rather than the default span. You can do this by changing the default tag value in the plugin’s option page, or set it manually like the example below. Also, you will want to remove the arrows, using the noarrow class. All tother it looks a little something like this:

[expand title="Daily Reads" trigclass="noarrow purplefont" tag="div"]links[/expand]

Next you need to set your purplefont class. Ad this to the custom css area of the plugin’s option page:

.purplefont {
    color: #B038BD;
    text-size: 20px:
    font-family: "oswald";
    width: 230px;
    text-align: center
}

Finally you will need to add some background/change font color to the colomat-hover class:

.colomat-hover {
	text-decoration: none !important;
        color: #FFF;
        background-color: #B038BD;
}

Please let us know if this gets you pointed in the right direction.

Hi! This has me half way there. I would like the “Daily Read”s blue bar to stay there even with out the hover.

My font is still the same and did not get any bigger. Nor does it seem to be the text oswald….

Well I have made some changes. But I believe i need to add the google font somewhere in the code for it to work
<link href=’https://fonts.googleapis.com/css?family=Oswald:400,300&#8242; rel=’stylesheet’ type=’text/css’>

I already have this in my blogs header. but not sure if its pulling into the widget.

This is basic CSS. If you would like us to set it up for you, we have a very reasonable support pack for just this purpose.

I did your code exact and it didn’t work. I made my own adjustments and it did not work. I do know CSS. today when I upgraded the plugin It stopped working complexity. So now I have it deactivated.

So no I would rather not pay for it.

Lots of stuff going on here.
First, when you updated the plugin, what stopped working, exactly? Where there any JavaScript errors?
Second, as for the CSS / Google Font issue. It’s good that you know CSS… do you also know how to inspect elements and find out if the CSS definitions are being applied… or applied and then overwritten?

Nothing happened. Everything that was in my widget for coding showed up as text.
so on myside bar was [expand code] linkes [/expand]

So I deactivated it.

Yes, version 1.5.3a fixes this: https://plugins.twinpictures.de/plugins/collapse-o-matic/

Okay, new plugin loaded. The Font family and size is being overided by my CSS. with this code
body { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1em; }
I added the custom CSS to my themes CSS override and the above code still one out.
Then I tried an inline style which still did not work
[expand title="Daily Reads" trigclass="noarrow bluefont" tag="div" style="font-family:oswald; font-size:20px;"]

I believe the problem is being caused by this error. If you inspect the element in chrome this is the error.
There is also an error
Resource interpreted as Image but transferred with MIME type text/html: “https://www.pntra.com/b/4-81229-73861-83196?website=157930&#8221;. https://www.bluemountainbelle.com:337
JQMIGRATE: Logging is active jquery-migrate.js:1
JQMIGRATE: Logging is active s2.wp.com:9620
JQMIGRATE: jQuery is not compatible with Quirks Mode s2.wp.com:9639
console.trace() s2.wp.com:9641
migrateWarn s2.wp.com:9641
(anonymous function) s2.wp.com:9677
(anonymous function)

Can I not just add an image for the title. Like you have a background image of an arrow? I can use an image instead? I tried adding an image as the background image and everything is overridden by my css

oh wow just fixed it. Ha-ha

Thanks for your help

Couple of thingers:
Thing 1: there is no style attribute, ie style="font-family:oswald; font-size:20px;" no worky.
Thing 2: if your theme’s css is overriding your bluefont def., then you might try to add the !important trigger like’a so:

. bluefont {
    font-family: "oswald" !important;
}

I know it was only a couple… but you get a bonus thing… exciting, right?
Bonus Thing: if you want to insert an image as the trigger, you could do as follows:

[expand title="<img src='https://url_to_image/image.png' />" alt="" trigclass="noarrow" tag="div"]Content[/expand]

please note that if you are using double quotes to define the title attribute, you will need to use single quotes to define the image’s src. Got it?

Well actually another issue. The collaps is now underneath my other text widgets. The ones above and bellow are in separate text widgets.

You can see that I have the daily reads underneath my purple boxes. but if I put the same code underneath my instragram widget everything works fine.

There are no collapse elements on: https://www.bluemountainbelle.com