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.

• Widget customization assumes basic knowledge of CSS. Advanced skill set not required! Copy this CSS file, which is already organized with all available elements, to quickly make your changes.
• You can customize all of your Widgets using a single, universal CSS file for all of your Widgets. And you can customize on a Widget-by-Widget basis.
• Elements can be individually customized. All other elements will fall back to the default style sheet. It is not necessary (or recommended) to customize every element.
• MinistryPlatform server access is not required, but custom CSS files must be hosted in a referable location on a publicly accessible web server that supports SSL (https://).

Default Style Sheet

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.

• Inspect/Inspect Element (Recommend): The style sheet can be found by inspecting a page containing a Widget (steps vary by browser). Use your preferred browser's inspect tools to locate relevant classes and ids for css customization.
• Library: All Widgets source their content from the Widgets Library. You can get a copy of the un-minified CSS style sheet by appending /widgets/content/mppw-widgetstyles.css to your base MP URL. For example, if your MinistryPlatform URL is https://my.churchname.net/ministryplatform, the base CSS would be found at https://my.churchname.net/widgets/content/mppw-widgetstyles.css.
• Server: From your MinistryPlatform server, the style sheet can be found by launching File Explorer, navigating to your MinistryPlatform Root (usually under W:\Sites\[Site_Name]), and finding the Widgets folder. The style sheet will be located under Widgets\wwwroot\Content\mppw-widgetstyles.css.

Universal Style Sheets for All 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 under wwwroot/_DomainData/<host_name>/. This style sheet will be applied to all of your Widgets unless it is overridden by a custom style sheet for an individual Widget.

This file must be secure and hosted in an accessible location.

Custom Style Sheet for Individual 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. It will be referenced in Widget Configuration for the individual Widget(s) you want it to apply to.