Formatting | UR Courses: Guides

These guides are here to help you work with the templates that need a bit of html editing to get them to act how you want them if you plan to use more than one or alter them. As well as a quick reference for formatting that the text editor might not do.

Current templates that require playing around with the html are:

Image: Carousel Slideshows
Dropdown Blocks: Dropdown
Dropdown Blocks: Accordion List

Details

Bootstrap has a number of css classes to make formatting easier.

What this means for you is that you can simply add a name into class="" section of your content to change how it will look on your page.

Here is a list of currently available classes and what they do:

Class Name	Example	Description
"text-center"	Example text	Centers your text inside the block it's in.
"text-left"	Example text	Aligns your text to the left of the block it's in. Also the default in most cases.
"text-right"	Example text	Aligns your text to the right of the block it's in
"small"	Normal text and example text	Halves the size of text compared to the text around it. Best used in `<p>` blocks or `<span>` blocks
"border"	Example	Creates a border around your content.
"border-top"	Example	Creates a border only on top of your content.
"border-bottom"	Example	Creates a border only underneath your content.
"border-left"	Example	Creates a border only to the left of your content.
"border-right"	Example	Creates a border only to the right of your content.
"border border-top-0"	Example	Creates a border without the top side.
"border border-bottom-0"	Example	Creates a border without the bottom side.
"border border-left-0"	Example	Creates a border without the left side.
"border border-right-0"	Example	Creates a border without the right side.
"border border info"	Example	Creates a blue info border around your content. It's also helping the above borders stand out from the table borders which are using a default colour.
"border border-success"	Example	Creates a green success border around your content.
"border border-warning"	Example	Creates an orange warning border around your content.
"border border-danger"	Example	Creates a red danger border around your content.
"border border-light"	Example	Creates a light grey coloured border around your content.
"border border-dark"	Example	Creates a dark grey border around your content.

Details

The Carousel Slideshow is an automated slideshow for pictures on your page, but will not automatically resize your pictures. You need to ensure that all pictures you intend to put in the slideshow have the same height, otherwise the carousel will grow and shrink to fit the height of your pictures. It can get distracting.

If you don't want to resize your pictures, the next best thing to do is set a max-height="..px" inside the img tag after you've set up your link. You must put px after your height number in order for it to work properly though.

Here's an example of setting the height:

<img src="path-to-your-pic.png" class="d-block img-thumbnail mx-auto" alt="..." style="max-height: 100px;">

To add images to the slideshow, make sure to copy this carousel item block:
```
<div class="carousel-item">
    <img src="path-to-your-img.jpg" class="d-block img-thumbnail mx-auto" alt="..." />
</div>
```
This block is a container for your image as well as the block to remove if you want to decrease the number of images in the slideshow.
Once you have your block, add in as many copies as you need and change the src="path-your-image" to show your pictures instead. Just make sure your blocks are inside the <div class="carousel-inner"> to ensure they'll be part of the slideshow.

Make sure the first image in the slideshow has a class: class="carousel-item active" to ensure the slideshow will start. Only this one should have active in its class though.
If you plan to have more than one carousel in your page, you will need to change this id: <div id="carouselWithControls"

This is to ensure each the page knows that each of your carousels is unique and doesn't try to act on them all in a way that only makes the first on in the page work.

<div class="mceTmpl">
    <div id="carouselWithControls" class="carousel slide" data-ride="carousel" data-interval="10000">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="http://localhost/moodle/theme/urcourses_default/pix/imaginarium.jpg" class="d-block img-thumbnail mx-auto"
                alt="..." />
            </div>
            <div class="carousel-item">
                <img src="http://localhost/moodle/theme/urcourses_default/pix/imaginarium.jpg" class="d-block img-thumbnail mx-auto"
                alt="..." />
            </div>
            <div class="carousel-item">
                <img src="http://localhost/moodle/theme/urcourses_default/pix/imaginarium.jpg" class="d-block img-thumbnail mx-auto"
                alt="..." />
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselWithControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
        <a class="carousel-control-next" href="#carouselWithControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
    </div>
</div>

Details

If you plan to have multiple of these you need to change the names of the matching pairs otherwise only the first one on your page will work.

These are the pairs you need to look for:

The inner div id and the button targeting it:
- <div id="collapse1" >
- <button data-target="#collapse1" >
The inner div data-parent and the outer div's id
- <div data-parent="#drop1" >
- <div id="drop1" >

How the code block will look like in the editor's html view:


<div class="mceTmpl">
    <div class="accordion" id="drop1">
        <div class="card">
            <div class="card-header"id="heading">
                <h2 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse"> Dropdown Title </button>
                </h2>
            </div>
            <div id="collapse1" class="collapse" aria-labelledby="heading" data-parent="#drop1">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                    non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
                    put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                    wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                    raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</div>

Details

For each dropdown in your block, you do need to change the matching pairs names in the quotes to be unique. Numbered names are just an easy way to keep track of them all. If you see a #, you need to keep it in front of the name in order for the accordion to work.

All accordion blocks need to be inside this div to be part of the accordion
```
<div class="accordion" id="accordionExample">
</div> 
```

An accordion block. This contains all the code you need to copy if you wish to add another block on, or all the code you need to delete to remove a block.

<div class="card">
  <div class="card-header" id="headingOne">
       <h2 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button>
      </h2>
  </div>
  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
     <div class="card-body">
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
           put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
           wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
    </div>
</div>

Only the first block will have "collapse show" inside the class quotes. the rest only should have "collapse"
- class="collapse show"
- class="collapse"
If you plan to have more than one accordion in your page, you need to change the name inside the quotes to be unique as well as all of the data-parent tags to match. You also need to keep the # in front of the id name in the data-parent tags

How the code will look in the editor:

The data pairs you need to be aware of are highlighted in the code.

<div class="mceTmpl">
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button>
                </h2>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                    non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
                    put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                    wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                    raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                    aria-controls="collapseTwo"> Collapsible Group Item #2 </button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                    non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
                    put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                    wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                    raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                    aria-controls="collapseThree"> Collapsible Group Item #3 </button>
                </h2>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                    non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
                    put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                    wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                    raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</div>

Formatting Tips

Details

Details

Details

Details