Widgets have a clean, minimal style intended to complement any church website. You can customize certain elements such as fonts and colors to further promote a seamless widget experience!

• Widget customization assumes basic knowledge of CSS, so you don't need an advanced skill set. Copy this CSS file, which is organized with all available elements, to quickly make your changes.
• You can customize all of your widgets using a single, universal CSS file. Or, 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. However, it is not necessary (or recommended) to customize every element.
• Style sheets are loaded in this order: the default style sheet, then custom universal sheets (in alphabetical order), then any custom CSS specified for an individual widget.
• 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://example-church.minstryplatform.net/mp, the base CSS would be found at https://example-church.minstryplatform.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>/css. 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.