Customizing Embedded Content Styles

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 Code Mode viewImage: Target specific embedded content with CSS styling.

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 Details ListImage: Toggle the Form Mode to use the CSS generator. (Event Details List content type 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.

Form Mode is available for:

  • Event Details List
  • Calendar (and Event Forms spawned from the calendar)
  • Event Form
  • Express Scheduling
  • Availability Views
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.

Custom font source URLImage: 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.