Loyola Support Documentation

How do I customize the look and feel of pages in Lessons?

Updated on

If you have used cascading style sheets (CSS) in web design, you can create and upload a custom style sheet to adjust the layout, design, and formatting of your lesson pages.

Warning: Creating a custom style sheet for Lessons is recommended for advanced designers only.

Create a style sheet for your lesson pages.

On your computer, create a CSS file to use.  You can download and edit the one attached below to get started.

Tip: If you save the file with the name default.css, it will become the default for all the lesson pages in your site.

Go to Lessons.

Select Lessons

If you titled your page something other than Lessons, select the title of the page as it appears in your Tool Menu.

Select Settings.

Select Settings

Select Settings from the Actions Menu.

Choose the CSS file to upload.

Settings dialog box
  1. Under Custom CSS File, use the Choose File button to select and upload a CSS file from your computer.
  2. Select Save.

Apply additional styling. (Optional)

If your file contains custom formatting to apply to particular elements on the page, you can use the Custom CSS class option on each of those items. Below, we will demonstrate an example of how to change the style of buttons.

Edit the item.

Select edit

Select the pencil (Edit) icon for the item to edit, e.g., a link.

Add a custom CSS class.

Edit layout and Style
  1. Check the checkbox to Show as button rather than link (if the page is not already displayed as a link).
  2. In the Custom CSS class box, enter the style needed to modify the item.  In this example, we are entering portletBodyBlue which is one of the button styles in the sample style sheet attached above.
  3. Select Update Item.

View the edited item.

Updated button appearance after changing CSS class

You will be returned to your lesson page with the item formatted in the appropriate style.

Previous Article How do I duplicate a Lessons page?
Next Article How do I access and navigate my listserv in Mailman?