Creating and managing Sites themes
Last updated August 5, 2026
Objective
This guide provides an overview of the Recur Theme Builder, the tool used to manage the global visual identity of your website. Whether you want to use AI for a quick start, stay with a simple setup, or dive into advanced customization, the Theme Builder ensures your brand is consistent across every page.
Key Steps
Step 1: Access and Create a Theme
From the Website Builder, navigate to the Themes tab.
You can manage existing themes or click Create to start a new one.
Creation Options:
AI Generated: Provide your website link or a description, and the AI will build a matching theme automatically.
Manual (Standard): Build your theme from scratch to maintain full control.
Step 2: Use the Simple Theme Editor
Best for quick setups and basic websites:
Theme Name: Give your theme a clear name (e.g., "Main Brand Theme").
Color Scheme: Select your Primary, Secondary, and Accent colors.
Palette Style: Use the built-in styles to automatically adjust the tone of your chosen colors.
Typography: Choose a primary font for headings and a secondary font for body text.
Step 3: Explore Advanced Settings
For granular control, click the Advanced Settings button. This opens several deep-dive tabs:
Colors: Access a wider array of specific color options for different website elements.
Typography (Google Fonts): Recur integrates with the full Google Fonts library. You can select any font and customize exact sizes and weights.
Gradients: Create custom color transitions that match your primary brand colors to add depth to buttons and backgrounds.
Backgrounds: Set global background images, gradients, or solid colors for your page layouts.
Step 4: Configure Responsive Layouts
In the Responsive tab, you can dictate how your content fills the screen:
Content Layout: * Standard (Default): Keeps content centered in a column down the middle of the screen.
Wide / Full Width: Stretches content to fill more or all of the horizontal screen space.
Mobile Breakpoint: By default, this is set to 768px.
Note: It is recommended to leave this at 768 to ensure your site automatically switches to a mobile-optimized view correctly.
Step 5: Save and Apply
Once your adjustments are finished, save the theme.
You can switch between your created themes in the gallery to instantly see how different brand styles look on your live site.
Cautionary Notes
Breakpoint Safety: Avoid changing the 768px mobile breakpoint unless you have specific technical requirements, as this value is the industry standard for mobile responsiveness.
AI Accuracy: While the AI import is fast, always review the generated color hex codes in the "Advanced" tab to ensure they match your official brand style guide.
Tips for Efficiency
Start Simple: Begin with the Simple Editor to get your main colors in place, then switch to Advanced only if you need to tweak specific elements like gradients or font weights.
Google Fonts: Take advantage of the Google Fonts integration to find a professional font that specifically suits your association’s mission.
Consistency: Changes made in the Theme Builder are global—updating a color here will change it on every page of your site instantly, saving you from manual per-page edits.