Difference between revisions of "Add a custom stylesheet to Lessons"

From EdTech Help
(Created page with "==Open the Lessons tool== frame|centre ==Click the gear icon== Click upon the gear icon. The icon will read ''Edit page title, release, or sty...")
 
 
(24 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
__TOC__
 +
A optional Cascading Stylesheet (CSS) is available to improve the cosmetic appearance of your Lessons modules and can be downloaded as added as desired.
 +
The following is a preview:
 +
[[File:Styled Headings.png|frame|center]]
 +
 +
==Download the CSS to your computer==
 +
[https://raw.githubusercontent.com/mclare/edtech_styles/main/sakaiCustomCSSLessons.css Download the CSS here]. '''You may need to make use your internet browser's settings to Save the the page as a .css file.''' As an example, using '''CONTROL + S''' on a PC will do so or right click and Save As.
 +
 
==Open the Lessons tool==
 
==Open the Lessons tool==
 
[[File:Lesson tool select.png|frame|centre]]
 
[[File:Lesson tool select.png|frame|centre]]
Line 11: Line 19:
 
==Upload a custom stylesheet from your computer==
 
==Upload a custom stylesheet from your computer==
 
[[File:Upload CSS.png|frame|center]]
 
[[File:Upload CSS.png|frame|center]]
Note that these steps might vary based on your computer's operating system.
+
Note that these steps might vary depending on your device's operating system.
  
 
#Locate and click upon your custom stylesheet or CSS
 
#Locate and click upon your custom stylesheet or CSS
 
#Click '''Open'''
 
#Click '''Open'''
 +
 +
==Click the '''Save''' button==
 +
[[File:Save imported Lessons CSS.png|frame|center]]
 +
 +
==Add styling to additional pages in the same Sakai site==
 +
Custom styles will not apply automatically to new Lessons pages, though manually setting them are generally a quick measure:
 +
 +
===Open the Lessons page that you've just created===
 +
[[File:Lessons Subpage button.png|frame|center]]
 +
 +
===Click the '''Edit''' option===
 +
[[File:Click the Edit icon.png|frame|center]]
 +
 +
===Select a custom CSS===
 +
[[File:Select the custom CSS.png|frame|center]]
 +
 +
#Click the '''Custom CSS File''' dropdown
 +
#Select a CSS file that was used in previous Lessons pages in your Sakai site
 +
#Click '''Save'''
 +
 +
 +
{{Template:Lessons}}
 +
[[Category:Lessons]]
 +
[[Category:Instructor]]
 +
[[Category:Sakai 20]]
 +
{{Template:Sakai Community Documentation}}

Latest revision as of 17:06, 15 March 2022

A optional Cascading Stylesheet (CSS) is available to improve the cosmetic appearance of your Lessons modules and can be downloaded as added as desired. The following is a preview:

Styled Headings.png

Download the CSS to your computer

Download the CSS here. You may need to make use your internet browser's settings to Save the the page as a .css file. As an example, using CONTROL + S on a PC will do so or right click and Save As.

Open the Lessons tool

Lesson tool select.png

Click the gear icon

Click upon the gear icon. The icon will read Edit page title, release, or style when hovered over with your curser.

Edit page title, release, or style.png

Click Choose File

Click Choose File to import Lessons CSS.png

Upload a custom stylesheet from your computer

Upload CSS.png

Note that these steps might vary depending on your device's operating system.

  1. Locate and click upon your custom stylesheet or CSS
  2. Click Open

Click the Save button

Save imported Lessons CSS.png

Add styling to additional pages in the same Sakai site

Custom styles will not apply automatically to new Lessons pages, though manually setting them are generally a quick measure:

Open the Lessons page that you've just created

Lessons Subpage button.png

Click the Edit option

Click the Edit icon.png

Select a custom CSS

Select the custom CSS.png
  1. Click the Custom CSS File dropdown
  2. Select a CSS file that was used in previous Lessons pages in your Sakai site
  3. Click Save


More questions about the Lessons tool?


SAKAI logo2021.png

This page is adapted from an equivalent Sakai Community help article.

The original Sakai Community help article, unedited, is available at https://sakai.screenstepslive.com/s/sakai_help