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

1. From the Public Skin home page, click Create New Skin

2. Enter a name for your skin (e.g., "Main Brand Skin", "Athletics", "Annual Fund")

3. Select a template type (see Form Templates for options)

4. Configure the template settings

5. 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

1. Go to System > Public Skin > Fragments

2. Create fragments for common elements (logo, navigation, footer links)

3. 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

1. Navigate to Giving > Paths

2. Edit the desired path

3. In the Skin dropdown, select your Public Skin

4. 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:

1. Identify common elements across your existing skins

2. Create fragments for reusable components

3. Create Public Skins that incorporate these fragments

4. Test thoroughly before switching

5. 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.