Page tree
Skip to end of metadata
Go to start of metadata

25Live provides two methods to customize the look of your embedded content to match the fonts and colors to your institution's website. You can add the plain text CSS code as you complete the config fields. And, some content types offer a form mode that will help generate CSS for you after you.

Adding Custom CSS Text

Custom CSS field
Image: You can target specific embedded content to style with CSS.

You can enter Custom CSS styles to apply to your embedded content as you complete the config fields. You need to know how to write CSS code and know the fonts, colors, and other style information that you would like to use. While this method is very technical, it offers the highest level of customization.

See Best Practices: Customizing Embedded 25Live Content Using CSS (Series25 Customer Resources login required) for common examples and some of the CSS style names you can use.

Using the Form Mode CSS Generator With Form Mode

Warning: Using Form Mode May Remove Typed CSS

Use of Form Mode may clear any CSS you've typed into the Custom CSS field. Please back up your code before using. 

CSS Form Mode for Event Listing
Image: Toggle to the Form Mode to use the CSS generator. This is an Event Details list example. 

A feature is available to help you create your CSS code more easily, Form Mode. This simplified interface allows you to enter simple values in a form that 25Live will turn into CSS syntax you can copy and paste into your page. Simply enter the colors, font families (using quoted names as you would when writing CSS code), and other values. Tab or click into fields to see helpful tips.

Toggle back to Code Mode to view your generated CSS. 

Be Careful: Form Mode can only be toggled back to Code Mode once for the same values. When you go back to Form Mode again, your current CSS code will be cleared.

CSS Form Mode for Event Form
Image: Example of Event Form CSS Form Mode.

Form Mode is available for:

  • Event Details List
  • Calendar (and Event Forms spawned from the calendar)
  • Event Form
  • Express Scheduling
  • Availability Views

CSS Form Mode for Calendar
Image: Example of Calendar CSS Form Mode with tab for an Event Form.

Importing Custom Fonts

You can use custom fonts with the CSS generator by clicking the Add Custom Font button in Form Mode. Paste the URL for your desired font into the Source URL text box.

Image: Adding a custom font.

Feedback and Examples

If you create a CSS theme you like, please share it with CollegeNET! We would love to expand the examples we have on the Best Practices: Customizing Embedded 25Live Content Using CSS page as well as add a gallery for other users to see.

Copyright © 2021 CollegeNET, Inc.  Note: This information is for CollegeNET Series25 customer use only.
Series25 Customer Resources • Terms of Use •  Privacy Policy • Learn About Series25 • Contact CollegeNET