Public Skins
Public Skins are reusable visual templates for public-facing forms across AlumnIQ. They provide consistent branding for giving forms, event registration, and other constituent experiences. Unlike legacy systems where each form required custom HTML/CSS, Public Skins can be created once and shared across multiple contexts.
Where Public Skins Are Used
- Online Giving - Single-page giving forms and paths
- Future Migrations - Other existing modules will use this system eventually as they get their overhaul and modernization.
Accessing Public Skins
Navigate to System > Public Skin to manage your skins.
Creating a New Skin
- From the Public Skin home page, click Create New Skin
- Enter a name for your skin (e.g., “Main Brand Skin”, “Athletics”, “Annual Fund”)
- Select a template type (see Form Templates for options)
- Configure the template settings
- Save the skin
Skin Configuration
Each skin consists of several configurable elements:
Template Selection
Choose from four template types:
- Hero - Full-width hero image with the form overlaid or below
- FiftyFifty - Split layout with content on one side and form on the other
- Floating - Form floating over a background
- Vanilla - Simple form without hero imagery
See Form Templates for detailed configuration options for each template.
Hero Image Settings
For templates that support hero images (Hero, Floating):
| Setting | Description |
|---|---|
| Hero Image URL | Full URL to your hero image. Use Image Library for hosting. |
| Hero Image Alt Text | Accessibility description of the image |
| Hero Image Position | Where to anchor the image (top, center, bottom, etc.) |
| Hero Image Shade | Add a dark overlay to improve text readability |
Image Recommendations:
- Minimum 1920px wide for full-width display
- Use optimized/compressed images for faster loading
- Consider how the image crops on mobile devices
Header Configuration
| Setting | Description |
|---|---|
| Include Header | Show/hide the header section |
| Header HTML | Custom HTML content for the header |
| Fixed Header | Make header sticky when scrolling |
The header appears at the top of the page and typically contains your logo and navigation.
Footer Configuration
| Setting | Description |
|---|---|
| Include Footer | Show/hide the footer section |
| Footer HTML | Custom HTML content for the footer |
The footer appears below the form and typically contains links, copyright, and contact information.
Form Width
Control how wide the form appears on larger screens:
- 1/3 width - Narrow form, more prominent imagery
- 1/2 width - Balanced layout
- 2/3 width - Wider form, less imagery
- 3/4 width - Form-focused layout
On mobile devices, the form always fills the available width.
Color Customization
Form colors are configured globally at System > Public Skin > Colors. These colors apply to all skins and are used for buttons, links, and accent elements throughout the form.
The forms use Tailwind CSS for styling. You can use Tailwind utility classes in your header and footer HTML to control layout, spacing, colors, and typography.
For detailed guidance on writing custom HTML, see the Styling Guide, which covers:
- Tailwind CSS basics for non-developers
- Responsive design and breakpoints
- Available theme colors and how to use them
- Golden ratio spacing classes for harmonious layouts
- Ready-to-use header and footer examples
HTML Fragments
Fragments are reusable HTML snippets that can be included in headers, footers, or body content. They help maintain consistency across multiple skins.
Managing Fragments
- Go to System > Public Skin > Fragments
- Create fragments for common elements (logo, navigation, footer links)
- Reference fragments in your skin configuration
Use Cases for Fragments
- Logo block - Consistent logo placement across skins
- Navigation menu - Shared navigation links
- Footer content - Copyright, contact info, social links
- Disclosure text - Legal or compliance messaging
Assigning Skins
How you assign a skin depends on the module:
For Online Giving
- Navigate to Giving > Paths
- Edit the desired path
- In the Skin dropdown, select your Public Skin
- Save the path
Best Practices
Start Simple
Begin with one well-configured skin and refine it before creating variations.
Test on Multiple Devices
Preview your skin on desktop, tablet, and mobile to ensure it looks good everywhere.
Use High-Quality Images
Hero images are prominent - use professional, high-resolution imagery.
Keep Headers/Footers Lean
Avoid complex JavaScript or heavy styling in header/footer HTML.
Consider Accessibility
- Ensure sufficient color contrast
- Provide meaningful alt text for images
- Test with keyboard navigation
Migrating from Legacy Skins
If you have custom HTML/CSS on legacy forms:
- Identify common elements across your existing skins
- Create fragments for reusable components
- Create Public Skins that incorporate these fragments
- Test thoroughly before switching
- Update your forms to use the new Public Skins
Your legacy skin code can serve as reference, but the new system uses different markup structures. Plan to recreate rather than copy-paste.