Learn how to customize the visual appearance of your info page with colors, backgrounds, and styling options.
Who is this for?
Users who want to create a branded, visually appealing info page for their customers.
Prerequisites
A tool with the Info Page module enabled
Access to the tool detail page
What you can customize
Theme type (Default or Custom)
Background (Color, Image, Video, or Gradient)
Button colors and text colors
Island color (content area background)
Button border radius
Step-by-Step Instructions
1. Navigate to Page Settings
Go to the Tools page and click on your tool
Find the Page section
Click Edit in the Page section
Click Settings to open page settings
IMAGE HERE (Screenshot of the Page section with Edit and Settings buttons)
2. Choose Theme Type
Uses your location's default colors
Quick and consistent across tools
Full control over all visual elements
Create unique branding for this specific tool
Select Default or Custom from the theme selector
IMAGE HERE (Screenshot showing the theme type selector with Default and Custom options)
3. Customize Background (Custom Theme Only)
If you selected Custom theme, choose your background type:
#### Option 1: Color Background
Select Color as the background type
Click on the color swatch
Choose a color using:
The background will update in real-time
IMAGE HERE (Screenshot showing the background type dropdown with Color selected and the color picker interface open)
#### Option 2: Image Background
Select Image as the background type
Click Upload to upload an image
Select your image file
Maximum file size: 5MB
Accepted formats: NEEDS CONFIRMATION: Specific image formats
IMAGE HERE (Screenshot showing the background type dropdown with Image selected and the upload button with "5MB max" label)
#### Option 3: Video Background
Select Video as the background type
Click Upload to upload a video
Select your video file
Maximum file size: 25MB
Accepted formats: NEEDS CONFIRMATION: Specific video formats
IMAGE HERE (Screenshot showing the background type dropdown with Video selected and the upload button with "25MB max" label)
#### Option 4: Gradient Background
Select Gradient as the background type
Use the gradient selector to customize:
Adjust using the visual controls
IMAGE HERE (Screenshot showing the background type dropdown with Gradient selected and the gradient customization interface with color stops and direction controls)
4. Customize Button Colors (Custom Theme Only)
Click on the button color swatch
Choose your desired button background color
Click on the button text color swatch
Choose a color that contrasts well with the button color for readability
IMAGE HERE (Screenshot showing the button color and button text color pickers side by side)
5. Customize Island Color (Custom Theme Only)
The island color is the background color of the content area where links and information appear.
Click on the island color swatch
Choose a color that works well with your background
Ensure good contrast for readability
IMAGE HERE (Screenshot showing the island color picker and a preview of how it affects the content area)
6. Choose Button Radius (Custom Theme Only)
Select the corner style for buttons:
Full: Completely rounded (pill-shaped)
Medium: Moderately rounded corners
Small: Slightly rounded corners
None: Sharp, square corners
Select your preferred button radius from the options
IMAGE HERE (Screenshot showing the four button radius options with visual examples of each style)
7. Save Your Changes
After customizing all theme elements, click Save Changes
Wait for the confirmation message
IMAGE HERE (Screenshot highlighting the Save Changes button at the bottom of the theme settings)
8. Preview Your Theme
Click Preview to see how your page looks to customers
Test on different devices if possible
Make adjustments as needed
IMAGE HERE (Screenshot showing the Preview button to test the customized theme)
Expected Result
Your page will display with the selected theme
All colors, backgrounds, and styling will be applied
Customers will see the customized design when accessing the tool
Changes are live immediately after saving
Common Mistakes
Poor contrast: Ensure text is readable against backgrounds. Test with different lighting conditions.
File size too large: Compress images and videos before uploading to stay within limits (5MB for images, 25MB for videos).
Clashing colors: Choose colors that complement each other and align with your brand.
Forgetting to save: Always click "Save Changes" after making theme adjustments.
Not testing on mobile: Always preview on mobile devices since most customers will use phones.
Troubleshooting
Background not uploading: Check file size limits (5MB for images, 25MB for videos) and try compressing your file.
Colors not changing: Ensure you're in Custom theme mode, not Default.
Video not playing: NEEDS CONFIRMATION: Video format requirements and browser compatibility.
Gradient not appearing: Try adjusting the gradient angle or color stops for better visibility.
Changes not saving: Verify all required fields are filled and try again.
Best Practices
Color Selection
Brand consistency: Use colors from your brand guidelines.
Accessibility: Ensure sufficient contrast between text and backgrounds (WCAG AA standard recommends 4.5:1 ratio).
Emotion: Choose colors that evoke the right feeling for your brand (blue for trust, green for calm, red for urgency).
Background Selection
Image backgrounds: Use high-quality images that don't distract from content.
Video backgrounds: Keep videos short, looping, and subtle. Avoid distracting motion.
Gradients: Use subtle gradients for a modern, professional look.
Color backgrounds: Solid colors are safe and ensure content is always readable.
Button Styling
Consistency: Use the same button radius across all your tools for brand consistency.
Visibility: Ensure buttons stand out from the background.
Touch-friendly: Remember that customers will tap buttons on mobile devices.
Next Steps