home

MinistryPlatform

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

What would you like to know more about?

Show Contents

Show Page Sections

thumbnailMinistryPlatform

System Administration

Customize Platform Branding

There are several ways to customize the branding for your MinistryPlatform instance.

When you customize the Platform to match the branding of your church or diocese, congregants feel confident that they're in the right place. This is important when they enter personal information and need reassurance that it will be safe and secure.

Note: Customizations apply based on the Domain record. If your parishes are in the same database under one diocesan domain, then the same branding applies to all parishes.

Update CSS for Authentication Screens

Add your own color scheme and background to your Log In, Reset Password, and Sign Up screens.

Note: Professional Services does not offer this customization as a paid solution. However, you can use our sample file to see all the available customization options.
  1. Go to System Setup > Domains/Accounts.
  2. Open your organization's record.
  3. Expand the Files section.
  4. If you already have a file called "stylesheet.css" attached to your Domain record, you can either download and edit it directly, or you can start with the sample file and overwrite your existing file.
  5. Download the sample file: sample_stylesheet.css.
    This contains all the custom variables you can use to build your CSS branding. Use as few or as many as you want.
  6. Edit either your existing file or the sample file as needed. Check out CSS Variables for more information.
  7. If you started with the sample, rename the file "stylesheet.css" (removing "sample_" from the beginning).
  8. On your Domain record, in the Files section, click the delete icon trash can beside the existing "stylesheet.css" file, if you had one.
  9. Click Attach File.
  10. Drag and drop the CSS file, or click inside the dotted line box to browse for the file.
  11. Click Attach.

Refresh your browser, refresh the application cache, or clear your browser's cache to see the change right away.

CSS Variables

Descriptions and default values of all available CSS variables for branding.

Login window with numbers showing different areas of the screen

Header
  • (1) Adjust header height: --header-height. Default is 60px.
  • (1) Background color for the header: --header-background-color. Default is #ffffff.
  • (2) Background color for the logo: --logo-background-color. Default is transparent.
  • (3) Background color for language selector: --language-selector-background-color. Default is transparent.
Global
  • Font family for text: --font-family. Default is "Lato", sans-serif.
  • (4) Default text color: --text-color. Default is #222222.
  • (5) Lighter text color for contrast: --text-color-light. Default is #2e2e2e.
  • (6) Color for hyperlinks: --link-color. Default is #267490.
  • (7) Background color for screens: --background-color. Default is #ffffff.
  • (7) Background image: --background-image. Default is none.
Text and Font
  • Font size for titles: --title-font-size. Default is 40px.
  • Font size for longer titles: --title-longer-font-size. Default is 26px.
  • Font weight for titles: --title-font-weight. Default is 900.
  • Font size for descriptions: --description-font-size. Default is 15px.
  • Font weight for descriptions: --description-font-weight. Default is 500.
  • Line height for descriptions: --description-line-height. Default is 24px.
  • Font size for labels: --label-font-size. Default is 13px.
  • Font weight for labels: --label-font-weight. Default is 600.
  • Font size for check boxes: --checkbox-font-size. Default is 15px.
  • Font weight for check boxes: --checkbox-font-weight. Default is 500.
Borders and Colors
  • (8) Background color for primary elements: --primary-background-color.
  • (8) Border color for primary elements: --primary-border-color. Default is none.
  • (8) Text color for primary elements: --primary-color. Default is #ffffff.
  • (9) Background color for secondary elements: --secondary-background-color.
  • (9) Border color for secondary elements: --secondary-border-color. Default is #c6c6c6.
  • (9) Text color for secondary elements: --secondary-color. Default is #2e2e2e.
  • (10) Default border color: --border-color. Default is #c6c6c6.
  • Text color for input fields: --input-color. Default is #222222.
  • Color for error messages: --error-color. Default is #ff0000.
Footer
  • (11) Background color for the footer: --footer-background-color. Default is #ffffff.
  • (11) Height of the footer: --footer-height. Default is 60px.
  • (12) Background color for footer content: --footer-content-background-color. Default is #ffffff.

Add an Image on Your Login Screen

The login screen image displays at 100px tall, and the width scales to size.

Note: We recommend you use a white or white outlined logo with a transparent background for the best appearance.
  1. Go to System Setup > Domains/Accounts.
  2. Open your organization's record.
  3. Expand the Files section on the right.
  4. Click Attach File.
  5. Drag and drop the image, or click inside the dotted line box to browse for the image.
  6. Click Attach.
  7. If needed, click the star icon beside the file to set it as the default image.

Refresh your browser, refresh the application cache, or clear your browser's cache to see the change right away.

Edit Your Application Title

Once Users log in, your organization's name displays in the Platform in the upper-left corner. If needed, you can change what they see there.

  1. Go to System Setup > Domains/Accounts.
  2. Open your organization's record.
  3. Click Edit Record.
  4. Change the Application Title.
  5. Click Save.

Refresh your browser, refresh the application cache, or clear your browser's cache to see the change right away.

portal
MinistryPlatform

Last updated: October 29, 2024