Follow

Responsive design theme

The theme is ScaffoldLMS is built upon the Bootstrap framework (currently version 3.3.4) with the added Font Awesome icon set. This means that you can embed HTML code from these libraries anywhere you access the text editor.

Responsive design means the site will work on mobile, tablet, laptop and desktop devices without needing alternative versions.

There are also some configuration options to allow you to keep your theme fresh and promote learning opportunities.

Banners

If you are using banners to advertise new or trending courses then you'll want to update the banner images periodically. It is important to make sure all your images have the same size otherwise the carousel will resize the page with each change. We recommend 1280x275px.

You can access the form to upload banners via Site Administration -> Appearance -> Themes -> Responsive Design -> Banner

2. Using Bootstrap elements

If you want to embed Bootstrap elements in your content such as a grid layour or panel then you'll need to use the HTML edit mode in the editor - the ATTO editor is better for this as it will preview your changes.

If you're not familiar with Bootstrap grids you can read more here and try Shoelace.io but make sure you exclude the container wrapper if copying from the latter.

This would work in any editor but I'm using the HTML block as an example. Switch your editor to code view using the <> button.

 

Paste or type in your HTML grid template or layout - for example the code below will create a 4 column thumbnail strip.

<h4>Modules</h4>
<div class="row">
<div class="col-md-3">
<div class="bw pic">Image placeholder</div>
<div class="module_caption">
<p class="text-center">Module 1</p>
</div>
</div>
<div class="col-md-3">
<div class="bw pic">Image placeholder</div>
<div class="module_caption">
<p class="text-center">Module 1</p>
</div>
</div>
<div class="col-md-3">
<div class="bw pic">Image placeholder</div>
<div class="module_caption">
<p class="text-center">Module 1</p>
</div>
</div>
<div class="col-md-3">
<div class="bw pic">Image placeholder</div>
<div class="module_caption">
<p class="text-center">Module 1</p>
</div>
</div>
</div>

Switch back to the normal editor view and start adding your content such as images and links normally.

 

With good images and some basic HTML you can create engaging navigation or content areas.

Have more questions? Submit a request

Comments

Powered by Zendesk