Customizing Your Moodle

We’ve moved away from different custom themes because we’ve been burned too many times on developers abandoning them. The default theme is now Bootstrap and we have a lot of control over it’s customization through CSS. This thread is meant to show users how to tweak their content for visual appeal while remaining accessible.

In addition, there are other things that users can do to their own sections if they are interested. At an Innovation Coach meeting this year @jmzimbric showed me a theme that had tabs on the top with different content. I didn’t get to look into it to see exactly how it was working and the theme that I thought his course was using wasn’t it, so I came up with this:

Go into the settings for your topic (or create a label), toggle to HTML and enter this:

<!-- Nav tabs -------------- -->
<ul style="list-style: outside none none;" class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-expanded="true">Lesson 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-expanded="false">Lesson 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-expanded="false">Lesson 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab4" role="tab" aria-expanded="false">Lesson 4</a>
  </li>
</ul>

<!-- Tab panes -------------- -->
    <div class="tab-content">
  <div class="tab-pane active" id="tab1" role="tabpanel" aria-expanded="true">
  <br>Interesting Stuff...
  </div>
  <div class="tab-pane" id="tab2" role="tabpanel" aria-expanded="false">
  <br> More  Interesting Stuff...
  </div>
  <div class="tab-pane" id="tab3" role="tabpanel" aria-expanded="false">
   <br> Even More Interesting Stuff...
  </div>
  <div class="tab-pane" id="tab4" role="tabpanel" aria-expanded="false">
  <br>  End of  Interesting Stuff...
  </div>
</div>

Tabbed%20Content
This will allow you to set your own tabs, to customize, just replace the language in the HTML with what you want to appear. If you want multiple sections like this in your course you will need to change the names from tab1, tab2, etc. to something else).

This looks great! Exactly what I was looking for. Is the CSS only available to edit at a site-wide level or can I make my own modifications in individual courses?

Thanks for following up on this and I look forward to future design tweaks in this thread!

In the HTML of your pages you can add your own CSS. The only thing you can’t do much to affect is the course landing page. Keep letting me know what kinds of things you might want to try or even throw some mock-ups in here and I’ll see what I can come up with. (I can think of ways to upload a style guide to a course that you can refer to if you want to get that deep into it.)

I recently tweaked the site-level CSS to force a space after ordered and numbered lists. I also formatted the HTML for using blockquote so it changes the style on the page.

Kind of like it does here
I'm focusing most of my effort now on accessibility so if we can get there via HTML, HTML5 and CSS then we're better off in the long run.