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.

topic_5

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.

topic_3

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.

topic_4

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;
}

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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