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
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.
Use of Form Mode may clear any CSS you've typed into the Custom CSS field. Please back up your code before using.
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.
Image: Example of Event Form CSS Form Mode.
Form Mode is available for:
Event Details List
Calendar (and Event Forms spawned from the 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.