home

MinistryPlatform

RealmRealm AccountingMinistryPlatformeGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite
RealmRealm AccountingMinistryPlatformeGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite

What would you like to know more about?

Show Contents

thumbnailMinistryPlatform

Customizing Widgets

Widgets Customization Walkthrough

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.

  1. Use the default style sheet to identify the class selector controlling button color. In this example class selector ".mppw-btn" and property "background" have been identified.
  2. Decide on a new color and use this new color's hex code.
  3. Launch the preferred application and compose a new CSS file with the following markup:
    .mppw-btn {
    background: #004c4c;
}
  4. Save and host this file in a referable location.
  5. Edit the My Subscriptions Widget with the new attribute customcss. The attribute's value should be a fully qualified URL pointing to the hosted file location.
    <mpp-subscriptions customcss="https://examplechurch.com/files/sample.css"></mpp-subscriptions>
  6. My Subscriptions now sources its button color from the custom attribute. All other elements are still sourced from the default style sheet:

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.

Tip:

Need an easy button? Copy this CSS file, already organized with all available elements, to quickly make your changes!

And check out the Next Level Widgets webinar on the MinistrySmart Academy.

Webinar
MinistryPlatform

Last updated: July 12, 2024