Thursday , June 29 2017
Home / Website / CSS / Customize My Course Display in Moodle using CSS

Customize My Course Display in Moodle using CSS

This is my first time sharing code. I don’t usually put into details, previously my goal is just to provide simple tutorial of “how to” but now I am breaking my rules (insert smiley face). Let me first start with simple CSS code.

Steps on how to customize the My Course display in Moodle using CSS.

Step #1:

  1. Prepare your CSS code or Copy the code below
.block_course_overview .coursebox {
    border: 1px solid #333;
    display: inline-block;
    height: 43px;
    margin: 5px;
    padding: 4px;
    width: 50%;

Step #2:
  1. Access your moodle site and login as Administrator.
  2. Locate > Administration Block
  3. Click > Site Administration > Appearance
  4. Click > Themes > (current theme you are using)
  5. Locate > Custom CSS txt box
  6. Paste the code above and modify as needed.
    • .block_course_overview .coursebox  (my course list overview)
    • border: 1px solid #e8eaeb; (list of course name border )
    • display: inline-block; (inline-block lets you display the box in grid way to fills the browser width and wraps)
    • margin, padding and width : (adjust the numbers or percent base on your needs)


Check Also

Solve : Moodle webpage redirect loop or not redirecting properly to fresh installation

While creating a video tutorial of how to install Moodle in local computer I came …

One comment

  1. Quality articles or reviews is the main to be a focus for the viewers to pay a visit the web site, that’s what this web site is

Leave a Reply

Your email address will not be published. Required fields are marked *