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.
- Prepare your CSS code or Copy the code below
- Access your moodle site and login as Administrator.
- Locate > Administration Block
- Click > Site Administration > Appearance
- Click > Themes > (current theme you are using)
- Locate > Custom CSS txt box
- 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)