Skip to main content

Branding your website: styles, colors & fonts

Brand your church website using one-click Website Styles or a Custom Color Theme, understand where fonts come from, and set your site logo.

Your church website should feel like your church. In Gracely, you can set the whole look and feel of your public site in one place, without touching code. This guide walks you through the two ways to brand your site, where fonts come from, and how to set your logo.

Everything here lives in Portal Studio. Open it, go to Theme & Styles, and click Customize Theme. If you're new to Portal Studio, start with Customizing Your Church Portal (Church Portal Studio).

Two ways to style your site

There are two tools for branding, and they do different things:

  • Website Styles — one-click looks that set colors, fonts, and button/spacing all at once, and build a complete site for you.

  • Custom Color Theme — a single palette you create yourself that changes colors only.

Most churches pick a Website Style first, then (optionally) fine-tune the colors with a Custom Color Theme.

Website Styles

A Website Style is a complete, ready-made look. Each one sets a full palette, a matching set of fonts, and a button and spacing style, then generates a full 7-page site in that look. There are nine to choose from:

  • Canvas — the default for new churches

  • Heritage

  • Ember

  • Haven

  • Vesper

  • Bloom

  • Timber

  • Slate

  • Iris

To explore a style, hover over it and click Preview to see how it looks. When you find one you like, apply it to switch your site over. The style you're currently using shows an Active badge.

Important: applying a style rebuilds your pages

When you apply a Website Style, Gracely rebuilds your pages — it regenerates the standard pages in that style. That's great when you're starting out, but it means any custom page editing you've already done will be replaced.

So pick your style early, before you've done a lot of custom editing. If you've already invested time laying out your pages, switching styles will lose those edits. When you're ready to customize individual pages, see Designing Your Public Church Portal: Portal Pages Guide.

Custom Color Theme

Want a style's layout but your own brand colors? Create a Custom Color Theme. You can have one custom palette, and it changes colors only — it does not rebuild your pages, so your page content stays exactly as it is.

There are two steps:

  1. Choose a base style — this is where your fonts come from, since the custom theme only handles colors.

  2. Set your five colors:

    • Lightest colour — your background

    • Secondary colour

    • Primary colour — your main brand color

    • Link colour

    • Darkest colour

Give your theme a name and apply it. Your site keeps its pages and picks up your new palette.

Where do fonts come from?

Fonts always come from the style you've chosen — each Website Style includes its own matching set of fonts. There's no separate font picker, so if you want a different typeface, try previewing another Website Style to find the fonts you like.

Setting your logo

Your site logo is your church profile image. To change it, go to Church Settings → Church Profile and update the image there — not in Portal Studio. Once it's set, it appears on your public site automatically. (There's no separate favicon setting.)

Still need help? Start a chat with us.

Did this answer your question?