Based on the Catholic Liturgical / Lectionary Calendar, this plugin presents with a colored background associated with that day, plus the day’s title, via a combination of the USCCB Liturgical Calendar, and CatholicCulture.org’s Liturgical Calendar. Two configurable option (time zone offset (saveable), and “Alternate Dioceses) and a simple short-code is all that’s needed.
LIVE demo:
[sotd]
[sotd]
The SotD plugin is a “sister” plugin (can stand on its own, though) to the Liturgical Day of the Week (LDotW) plugin. There’s a separate toggle within the LDotW WP Admin interface to also show the Saint of the Day within the LDotW plugin output.
Supported Liturgical Colors
Known Issues / Troubleshooting
There is a known issue with how background opacity/transparency is handled. This is a CSS limitation, and not a limitation of the SotD plugin. When you use the CSS option for “opacity”, that overrides every single child element contained within… even nested child elements. You need to remove the “opacity” CSS item and use the “background: rgba()” item, instead. See the examples below.
filter: alpha(opacity=30);
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
background: rgba(221,221,221,.85);
As you can see, the light green box on the right comes through a bit more clearly. Remove any “opacity” toggles and use the “background: rgba()” toggle, and the plugin’s colors will come through perfectly!
“showcolors” – Within the SotD plugin (not LDotW), you can remove the Liturgical color for that day by setting this toggle to “no” via the WP Admin interface.
Styling the output
The only styling this plugin does is the background color and the text color. This puts the power of you controlling the look and feel completely within your own hands, using the “sotdDiv” CSS class. For the example above, I’m using the same styling as on the WP Admin demo. The below listed code was added into the “Additional CSS” section under WordPress’ built in “Customizer” interface:
.sotdDiv { width: 70%; margin: 10px auto; padding: 5px; text-align: center; font-weight: bold; font-size: 1.13em; border: 1px solid black; }
IMPORTANT: Do not define any background or text colors, please. Those are handled by the plugin, directly and automatically.