Skip navigation
All Places > Blackboard Open LMS Community > Blog > 2017 > December

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{
     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">
  3. Replace yourdomain in line 1 with your moodle domain. ie.
  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


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


There has been some discussion in the Idea's section of the Moodlerooms Community about being able to set the resource box size for files in SNAP to be full-width. Though there isn't an option to choose the width, you can adjust the width of ALL or specific types of resources boxes using the following CSS code in the SNAP Custom CSS option box in the Theme settings. This setting will apply site wide, but it will make your resources boxes appear full width, similar to the other elements in the course.  Use the first CSS code to adjust all elements or choose from some of the element types listed below. If you'd like a specific resource type adjusted. Add a comment and I'll add it to the list!



body.snap-resource-card li.snap-resource.snap-resource {
  width: 100%;



Or to adjust a single resource type , use one of the following:



body.snap-resource-card li.snap-resource.modtype_url {
  width: 100%;


HTML Files

body.snap-resource-card li.snap-resource.snap-mime-html {
  width: 100%;


PDF Files

body.snap-resource-card li.snap-resource.snap-mime-pdf {
  width: 100%;



body.snap-resource-card li.snap-resource.modtype_scorm {
  width: 100%;



body.snap-resource-card li.snap-resource.snap-mime-document {
  width: 100%;


Powerpoint Files

body.snap-resource-card li.snap-resource.snap-mime-document {
  width: 100%;