Skip to main content

Appearance

The Appearance page lets you customize the overall look and feel of your church website. From colors and fonts to spacing and custom CSS, you can control every visual aspect of your site from one place.

Accessing Appearance Settings​

  1. In the B1 Admin, click Website in the left menu.
  2. Click the Appearance tab at the top of the Website Pages view.
  3. The Site Styles page loads with a live preview of your website on the left and Style Settings options on the right.

Color Palette​

  1. Click Color Palette in the Style Settings panel.
  2. You will see Base Colors (light, accent, and dark shades) and Semantic Colors (Primary, Secondary, Success, Warning, and Error).
  3. Click any color swatch to open the color picker. Drag the selector or enter a hex value to choose your color.
  4. The Color Combinations Preview shows how your selected colors work together.
  5. Use Suggested Palettes to quickly apply a pre-designed color scheme.
  6. Click Save when you are satisfied.

Typography​

  1. Click Typography Settings in the Style Settings panel.
  2. Click Select a Font to open the font browser. You can search by name or browse categories like Serif, Sans Serif, Display, Handwriting, and Monospace.
  3. Set fonts for both headings and body text.
  4. Click Typography Scale to adjust the size hierarchy for Heading 1 through Heading 4. Use the scale multiplier and base size fields to fine-tune.
  5. Click Save to apply your font choices.

Spacing​

  1. Click Spacing Scale in the Style Settings panel.
  2. Adjust spacing values for Extra Small through Extra Large. Practical examples show how each value affects layout.
  3. Click Save Spacing to apply the values across your entire site.

Logo and Branding​

  1. Click Logo in the Style Settings panel.
  2. Upload your Light Background Logo and Dark Background Logo. Use images with a transparent background and a 4:1 aspect ratio for best results.
  3. Upload a Social Media Image for link previews and a Favicon for the browser tab icon.

Custom CSS and JavaScript​

  1. Click CSS and Javascript in the Style Settings panel.
  2. Add Custom CSS to override default styles for advanced customization.
  3. Add Custom HTML for tracking codes or other scripts.
  4. Use the Common Javascript Examples section for snippets like Google Analytics integration.
tip

Custom CSS is powerful but optional. Most churches can achieve the look they want using the built-in color, font, and spacing controls.

Style Themes​

If you want a quick starting point, the Suggested Palettes in the Color Palette section offer pre-built themes that set coordinated colors in one click. You can always fine-tune individual settings after applying a theme.

Next Steps​

  • Managing Pages -- Build and organize your website pages
  • Files -- Upload media assets for your site