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 a text editor 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.

Custom Style Sheet for Individual Widgets

Use the default style sheet to identify selectors for which you plan to assign a new value. Use a text editor to list these selectors, along with declaring their new values, and save a new .css file.