Widgets have a clean, minimal style intended to complement any church website. And customizing certain elements such as fonts and colors can further promote a seamless Widget experience.
Widgets source their appearance from the mppw-widgetstyles.css style sheet. This resource can be viewed in a variety of locations depending on access and comfort level.
Use the default style sheet to identify selectors for which you plan to assign a new value. Use your preferred application to list these selectors, along with declaring their new values, and save a new .css file under widgets\_DomainData\<host_name>\css\. Multiple style sheets are supported and will be loaded in alphabetical order. These style sheets will be applied to all of your Widgets and can be overridden by a custom style sheet for an individual Widget.
The built-in default style sheet is loaded first, then universal style sheets, then any custom style sheet specified in the Widget. Pro tip: After creating and saving your universal style sheets, refresh your app pool to see the changes applied to your Widgets.
Use the default style sheet to identify selectors for which you plan to assign a new value. Use your preferred application to list these selectors, along with declaring their new values, and save a new .css file.
This file must be secure and hosted in an accessible location. Note that custom files should only go in _DomainData\<host_name> so they will not be automatically removed during deployments. It will be referenced in Widget Configuration for the individual Widget(s) you want it to apply to.
Every Widget accepts the Custom CSS attribute. As with all attributes, it must be included before the opening Widget tag is closed.
In the following example, custom CSS has been applied to the My Subscriptions Widget:
<mpp-subscriptions customcss="https://{your platform domain}/files/sample.css"></mpp-subscriptions>
Once you have updated a Widget with your custom style sheet, you can continue to edit the style sheet. If you make a change, refresh the page the Widget is on, to see how changes have taken effect.
In the following example, a church has decided to update the button color in My Subscriptions:
They plan to recolor buttons from the default blue to their preferred green.
.mppw-btn { background: #004c4c; }
<mpp-subscriptions customcss="https://ministryplatform.com/files/sample.css"></mpp-subscriptions>
If this church wanted to recolor buttons for their other Widgets, they could extend each Widget with the customcss attribute and point them to the same hosted .css file.
But wait, there's more! How about an easy button?!?! Copy this CSS file—already organized with all available elements—to quickly make your desired changes!