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

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s