Guide Control How Proclaim Looks

Control How Proclaim Looks

Description

Everything that decides how Proclaim appears to visitors: templates, the visual Layout Editor, and your own CSS.

How It Fits Together

flowchart TD
  T[Template] --> L[Layout Editor: what shows, and where]
  T --> O[Template settings: dates, players, filters]
  T --> C[Custom CSS: colours, spacing, fonts]
  M[Menu item] --> T

Loading

A template is a bundle of display decisions. A menu item points at one, so different parts of your site can look different.

Start simple

If you just want something reasonable without fiddling:

1. Go to Proclaim's Options.
2. Turn on Simple Mode.

That gives a sensible display with no template work at all. Come back when you want more control.

Arrange what appears with the Layout Editor

The Layout Editor is a drag-and-drop grid. You place elements — title, teacher, date, scripture, media buttons — into rows and columns.

1. Components → Proclaim → Templates, open your template.
2. Open the Layout Editor tab.
3. Choose the context you want to change:

Context	What it controls
Message list	The list of sermons
Message details	One sermon's page
Teacher list / Teacher details	Teacher pages
Series list / Series details	Series pages
Landing page	Which sections show, and in what order

4. Drag elements where you want them. Use the gear on an element for its own settings — heading level, CSS class, whether it links.
5. Save & Close.

Full detail: Help-template · Template-Customization-Guide

Change colours, spacing and fonts with Custom CSS

Custom CSS is the supported way to restyle Proclaim. It is stored in Proclaim's settings, so an update never overwrites it and a backup includes it.

Level	Where you edit it	Applies to
Site-wide	Administration → Custom CSS	Every Proclaim page
Per template	Template form → Template Overrides	Pages using that template
Per landing section	Layout Editor → section gear	That one section

Important

Do not edit the stylesheets in media/com_proclaim/css/. Those are replaced every time Proclaim updates, and your changes go with them.

Full detail: Template-Customization-Guide

When you need more than settings

Template Codes let you write a real PHP template file for pixel-level control. This is the advanced route, and it needs someone comfortable with PHP and HTML.

Reach for it only when the Layout Editor and Custom CSS genuinely cannot do what you need — a template code file is yours to maintain from then on.

Full detail: Help-templatecode

Advanced: several looks on one site

Because a menu item points at a specific template, you can:

• give each campus its own template — see Multi-Campus-Admin-Guide
• show a compact list in one place and a rich grid in another
• restyle one series without touching the rest of the site

Create a second template, adjust it, and point a menu item at it.

Quick Tips

• Duplicate a working template before experimenting, so you always have a way back.
• Template settings include filters. A template that shows nothing is often one filtering everything out.
• Custom CSS loads after Proclaim's own styles, so a rule of the same specificity wins without !important.

If Something Goes Wrong

What you see	What to check
A page shows no messages	The template's Filters may be excluding them
Layout Editor changes did nothing	Confirm the menu item points at the template you edited
Custom CSS has no effect	Match the specificity of the rule you are overriding
Landing page sections missing	Turn them on in the Layout Editor's landing page context

Related Information

• Help-template · Help-templates — the template screens
• Template-Customization-Guide — the full customisation reference
• Help-templatecode — writing template code files
• Guide-Show-Proclaim-on-Your-Site — pointing menu items at templates