CSS for CiviEvent Widget

[osarusan]

I am using the CiviEvent widget plugin in WordPress, which adds a new widget to be used in sidebars. However, the Weaver CSS doesn’t get applied to this widget for some reason. The colors CSS works, but the rounded corners do not work, and the font sizes are all very different.

The plugin does have its own css file so I can do some manual customization, but is there any way I can get this widget to work with the Weaver CSS?

[scrambler]

We would need to see a link to the page to be sure, But it is likely that the widget is not using the proper classes to inherit the theme style.

There is a plugin that can add classes to a widget ( https://wordpress.org/plugins/widget-css-classes/ ) once we see a link to your page with specifics about what widget to look at, we can tell you which classes would need to be added to it so it can automatically inherit the theme styling 

[osarusan]

The page is http://japanphilly.org/

You can see the two widgets on the home page. The top widget is the one that is not styled properly, while the bottom one is.

[scrambler]

The 2 classes that I see missing on the Plugin widget and are messing the rounded corners and font size are:

xs-font-size rounded-all

So if you would install that Widget Class plugin and add these classes to the widget it would inherit the style properly.

INSTEAD, you could also simply add the rules below in Main Options > Fonts & Custom > Custom CSS Rule box

.civievent-widget {font-size:0.75em;line-height:1.6;-moz-border-radius:8px!important;-webkit-border-radius:8px!important;border-radius:8px!important;}

@weaver, can you tell us if the fact that the Plugin widget does not inherit the weaver styling classes is a WordPress limitation, a theme issue,  or is it because the plugin developer did something wrong, in which case it would be good to know so the OP could report it to them 🙂

[osarusan]

I have a feeling there is more to it. I tried using the Widget Class plugin and it still doesn’t work.

The past couple days I have been messing around with the stylesheet and the php file for the CiviEvent Widget plugin, and as you probably saw in the page’s css I managed to get the xs-font-size rounded-all classes to apply to the text within the widget (before they were absolutely enormous font sizes) but I was never able to get it to apply to the main parts of the widget, so the title h3 is stuck at a larger font, and the widget itself doesn’t have rounded corners. The Widget Class plugin also seems unable to add these classes to the widget.

So maybe you are right in saying the plugin developer may have done something wrong? I was beginning to suspect that myself… but I’m not so great with PHP so I don’t know if there is something else I am missing.

[Weaver]

I think the CiviEvent plugin is breaking the “rules” somehow. It would be difficult to create a test case of my own, but I tried some other plugins that create specialized widgets, and there was no issue with rounded corners or other widget attributes. I looked at the HTML output from this widget, and it is not generating the expected HTML for the title and other wrapping parts of a widget.

[scrambler]

Let the plugin developer know something is wrong with his plugin, and in the mean time, simply add the rules below in Main Options > Fonts & Custom > Custom CSS Rule box (note I added a few things to make sure it takes)

.civievent-widget.widget {font-size:0.75em !important;line-height:1.6 !important;-moz-border-radius:8px!important;-webkit-border-radius:8px!important;border-radius:8px!important;}

If that rule does not do it, post back with the rule in place

[osarusan]

I posted a comment on the plugin’s forum to let the developer know about the strange behavior.

The css you gave me worked fine and the plugin looks alright now. Thanks very much!

[Author]

Posts