Page Style & Branding for Connection Card Pro Websites

Set colors, logos, and styles for your Connection Card Pro website pages so everything feels unified with your Personal Hub, forms, events, and giving.

1) Page Style vs. Site Style

• Page Style (dropdown) — chooses which style this page uses.
• Site Style / Colors & Logos — edits the selected style.

A style is a reusable theme (colors, logos, typography). Each page points to one style. If you change a style, every page using that style updates.

2) Choose a Style for a Page

• Use Site Default Style — recommended for most pages to keep a consistent look.
• Create New Style for this page — makes a new style (based on the current one) for special pages (VBS, Christmas, etc.).
• Other Styles (This Site / Other Sites) — reuse an existing style you’ve already created for this or another Connection Card Pro website.

3) Set Your Colors

• Primary Color — your main brand color (menu background color, key highlights).
• Contrasting Accent Color — a bold accent for CTAs buttons (e.g., "Email Us" "Call Us" “Give”).
• Dark Accent Color — darker shade for headers/footers/buttons.
• Light Accent / Secondary Background — for panels or section backgrounds.
• Primary Text (Dark) — text on light backgrounds (usually near-black).
• Secondary Text (Light) — text on dark backgrounds (usually white).

Color best practices

• Pick 1–2 brand colors and keep the rest neutrals.
• Ensure strong contrast for readability.
• Use the Contrasting Accent sparingly to make CTAs stand out.

4) Upload Logos & Icons

• Logo – Square (PNG, ~400×400+) — compact version for tight spaces (used with “Include Square Logo”).
• Logo – Full (wide PNG, ~800×300+) — full wordmark for headers/hero sections.
• Logo – Icon (favicon) (square PNG, 256–512 px) — the small browser/tab icon.

5) Share Styles Across Multiple Sites

1. Finalize brand colors/logos on one site.
2. On another site, open any page’s Style tab.
3. Pick that style under Other Sites in the dropdown.

Now both sites share the same style—updates to that style’s colors/logos update all pages using it.

Note: Only styles from Connection Card Pro websites you’ve created appear here—external platforms aren’t included.

6) Keep Website Style Aligned with Hub & App Branding

1. Set org-wide colors under Web & App > Hub & App Settings > Branding (applies to Personal Hub, App and public facing pages such as forms/events/giving).
2. In your website’s Style tab, match (or closely echo) those colors and use the same logo where appropriate.

This keeps the experience consistent as people move from your site to registrations or giving.

7) Practical Examples

Example A — Main Church Website

1. On the Home page > Style, choose Use Site Default Style.
2. Set:
   • Primary Color: main brand (e.g., deep blue)
   • Contrasting Accent: bright accent (e.g., coral) for “Give”
   • Primary Text: black/charcoal
   • Secondary Text: white
3. Upload Square Logo, Full Logo, and Favicon.
4. Use Use Site Default Style for About/Ministries/Contact to keep a unified look.

Example B — Special Event Microsite (Christmas Outreach)

1. Create a dedicated event site.
2. On its main page > Style:
   • Create New Style for this page to tweak to greens/golds, or
   • Reuse the main site style, then adjust only accent colors.
3. Keep logos consistent so visitors still recognize your church.

8) Quick Checklist

• I’m using Use Site Default Style on most pages.
• Colors are simple, readable, and match our church branding.
• Uploaded Square Logo, Full Logo, and Favicon.
• Website colors closely match Hub & App Settings > Branding.
• For multiple sites, I’m reusing a shared style where possible.