mwilday

CSS Magic: Stylizing Collapsed Topics View to Look More like Folder Format

Blog Post created by mwilday on Dec 13, 2017

We recently tested the new collapsed Topic format which is an alternative to the soon-to-be retired Folder Format. It works pretty much the same, but instead of the yellow-folders that folder-format users were used the community developer went with an interesting blue folder. If you would rather see the fashionable yellow folder that your used to seeing in Format view, I have provided some great CSS adjustments to make the Collapsible Topic view look more like Folder Format.  Check out the screenshot below to see what it looks like in a basic Boost theme with no altercations.

 

To make the changes, you will need to host the 4 images that I have attached to this blog article in your own domain location.

  1. Download the four images attached to this blog article
  2. Upload them into your own domain
  3. Replace  yourdomain in lines 5, 11, and 18 with the link to the images on your own domain.
  4. Apply the following CSS with the edits from line 3 to your custom CSS

 

body.jsenabled .course-content ul.ctopics li.section .content .toggle-folder span.toggle_closed, 
#toggle-all .content .toggle-folder h4 span.on, 
body#page-admin-setting-formatsettingtopcoll select#id_s_format_topcoll_defaulttoggleiconset option[value="folder"], 
body#page-course-edit select#id_toggleiconset option[value="folder"] {
    background-image: url(http://yourdomain/yellowfolder.png);
}
.course-content ul.ctopics li.section .content .toggle-folder span.toggle_closed, 
.course-content ul.ctopics li.section .content .toggle-folder span.toggle_open, 
body.jsenabled .course-content ul.ctopics li.section .content .toggle-folder span.toggle_open, 
#toggle-all .content .toggle-folder h4 span.off{
     background-image: url(http://yourdomain/yellowfolder_open.png);
}
.course-content ul.ctopics li.section .right .cps_centre img.icon {
     display: none;
}
.course-content ul.ctopics li.section .right .cps_centre, 
.dir-rtl .course-content ul.ctopics li.section .left .cps_centre:before {
     content: url("http://yourdomain/onetopic.png");
}
div.sectionbody.sectionopen .summary a.collapsefoldericon {
     display: none
}
.sectionbody.toggle-folder {
  float: right;
}




 

If you'd like to add a close button (unexpand, return to all topics on one page button)

  1. Navigate into each topic using the expand (single topic) icon and Choose Edit > Edit section.
  2. Switch to the HTML view of the WYSIWYG and paste the following HTML at the top of your page.
    <a class="topicclose" href="http://yourdomain/course/view.php?id=courseidnumber">
    <img src="http://YOURDOMAIN/onetopic_close.png" alt="close single topic">
    </a>
  3. Replace yourdomain in line 1 with your moodle domain. ie. http://course.uc.apu.edu/course/view.php...
  4. Replace courseidnumber in line 1 with the id number of the course you are in. HINT: You can identify your course's id number by looking at the link displaying in the address bar, or by hovering over the course title in the breadcrumb and notating the id= number that appears.
  5. replace YOURDOMAIN in line 2 with the domain where you hosted the onetopic_close.png image.
  6. Add the following CSS to your CUSTOM CSS of whichever theme your course exists in.
.topicclose {
position: absolute;
right: 30px;
margin-top: -30px;
}

 

Screenshot of Collapsed Topic view in Boost Theme with no Altercations

2017-12-13_17-27-45.jpg

Screenshot of a single topic with the close button code and icon implemented.

2017-12-13_17-39-55.jpg

Outcomes