Skip to main content

Customize the Design Settings on Your RedPodium Page

Customize the font, color, and text on your registration page as well as customize the background image and additional design settings

Maddy avatar
Written by Maddy
Updated over 2 weeks ago

As one of RedPodium's signature features - our page builder gives you the opportunity to showcase your organization's unique identity through customized design and branding elements. This article will guide you through the process of personalizing your RedPodium page by adjusting fonts, colors, and backgrounds, ensuring that your registration page visually align with your brand.

Jump To...

Edit the Style of RedPodium Fields

RedPodium provides a wide range of customization options, allowing you to edit headings, paragraph text, text links, buttons, and fields, as well as apply custom CSS. To explore these features, navigate to the Design Settings page. This article outlines how to customize each available style field in RedPodium.

Getting Started

  • From the Pages screen, click the pencil icon on the page you want to edit

  • Click Design Settings in the top right corner to display the design options

  • Select Styles at the top of the field

Headings

This field can be used to customize the formatting of all headings on your registration page.

  • Select the Headings dropdown

  • Edit the headings as desired

    • Font: Select the heading font

    • Font Size: Select the font size for the headings

    • Heading Color: Customize the heading color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like. If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider

    • Bold/Italics: Select if you would like the headings to be bolded or italicized

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Paragraph Text

This field can be used to customize all paragraph text (non-heading text) on your registration page.

  • Select the Paragraph Text dropdown

  • Edit the paragraph text as desired

    • Font: Select the paragraph text font

    • Font Size: Select the font size for the paragraph text

    • Heading Color: Customize the paragraph text color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like. If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider

    • Bold/Italics: Select if you would like the paragraph text to be bolded or italicized

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Text Links

This field can be used to customize the color of all text links on your registration page.

  • Select the Text Links dropdown

  • Customize the text link color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like

  • If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Buttons

This field can be used to customize the color of the buttons on your registration page.

  • Select the Buttons dropdown

  • Customize the button color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like

  • If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Fields

This field can be used to customize how the labels are centered, the style of all input boxes, and the width between fields on the page.

  • Select the Fields dropdown

  • Edit the fields as desired

    • Label Position: Select how you would like to center all labels on your registration page

    • Input Box Style: Select whether you would like all input boxes (fields where registrants enter information) to have square or rounded edges

    • Field Width: Select the width you would like to have between all fields on the page

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Custom CSS

This field can be used to add custom CSS to the page.

Warning: Custom CSS can break a RedPodium page if formatted incorrectly. Also, when RedPodium pushes code updates, those updates also have potential to break any custom CSS. We only recommend using custom CSS on a RedPodium page if the user understands how CSS works and proceed with caution.

  • Select the Custom CSS dropdown

  • Enter the CSS into the dropdown

  • Click Done

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page


Edit the Background

RegFox offers flexible design options, allowing you to customize the page foreground color, background color, and background image to align with your branding. These settings enable you to create a visually cohesive and engaging registration page. To explore these customization options, navigate to the Design Settings page. This article provides step-by-step guidance on adjusting each of these style elements.

Getting Started

  • From the Pages screen, click the pencil icon on the page you want to edit

  • Click Design Settings in the top right corner to display the design options

  • Select Background at the top of the field

Foreground Color

This field is used to edit the foreground color on your registration page.

  • Select the Foreground Color dropdown

  • Customize the foreground color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like.

  • If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Background Color

This field is used to edit the background color on your registration page.

  • Select the Background Color dropdown

  • Customize the background color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like

  • If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Background Image

This field can be used to add a background image to your registration page.

  • Select the Background Image dropdown

  • Click Choose an Image

  • Select one of the background image options

    • Upload Your Own: Select Choose File to upload a new image, or choose from one of the images that has already been uploaded

    • Use One of Our Photos: Search by keyword to find a photo, and select the image

    • Browse Patterns and Textures: Select Abstract Backgrounds or Polygon & Geometric Backgrounds, and select the desired background

  • Color Overlay: Add an overlay over the image with a color you select. If turned on, customize the overlay color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like. If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider

  • Position: Select where you would like the crop to begin if your image crops out a portion of the photo

  • Repeat: Select if you would like your image to repeat

  • Scroll: Select how you would like to image to interact when registrants scroll

  • Scale: Select how you would like the background image to scale on the page

  • Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page


FAQs

Why doesn't my Banner field text change when I update the heading and paragraph text styling?

The Banner field has its own styling settings, so changes made to heading and paragraph text styling on the Design Settings field won’t affect it. To learn how to customize the font styling for the Banner field, click here.

Did this answer your question?