Skip to main content

Faculty: Add Colored Rules to Your Course Page - Knowledgebase / Moodle / Faculty - SOU IT and Service Center Help Desk

Faculty: Add Colored Rules to Your Course Page

Authors list

Looking to dress up your course page with a little color? Colored lines (called "rules") can set information or course items apart with style.

To create a solid line like this on your main course page:

  1. Click on the Add an activity or resource link and select Label.
  2. Click on the toggle icon in the upper left corner of the editing toolbar to display additional rows of icons.
  3. Click on the HTML icon in the lower right corner that features brackets (<>).
  4. Copy and paste this code into the HTML box: <hr style="border: 2px solid #bb0000;" />
  5. The code breaks down thus: hr = horizontal rule, the border style tells it what to look like, 2px = two pixels of thickness (10 pixels to the inch), the six digit code introduced with the number symbol represents the hexadecimal color code — #bb0000 is the red that appears as the highlight color in Moodle:


  6. Click on Update in the lower left corner of the HTML box to return to normal editing.

Good things to know:

  • You can also just use the name of a color in lieu of the #+color code: <hr style="border: 2px solid green;" /> will display a green rule. The "hex" codes give you a nearly infinite number of options, but you can use plain language if you're in a hurry.
  • You can insert a rule like this in any textbox—rules aren't limited to labels.
  • You can make a heavier line by increasing the pixel number—experiment to find the line weight that you like.
  • Here's a list of color names! HINT: Please, please don't use chartreuse!

Add a comment

Please log in to submit a comment.

Need a password reminder?