Custom Topics cont.

Turns out I needed to do a little more work on the Topics headers. The course format has been set to the Topics format with the layout set to one section per page.


We wanted to add a visual cue for the students to click on each topic header. We did this by adding a little css and using an arrow from the previous post. You can see the results below.


Just remember that if you are going to add in an arrow, you need to use the Unicode version and replace the &#x with a \   –   ➤ = \27a4;.

The easiest way to test this it open your browser developer tools, and drop in some css.


Here is the code I used to add in the “View >” after the topic name.

h3.section-title a:after {
content:        "View \27a4";
background-color: #FFF;
color:          #1B5697;
font-size:      60%;
margin-left:    30px;
border-radius:  5px;
padding:        0 5px;
font-weight:    normal;

Leave a Reply

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