mwilday

CSS Magic: Stylizing SNAP's Resource Boxes to be full-width

Blog Post created by mwilday on Dec 13, 2017

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!

 

ALL SNAP RESOURCES

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

 

 

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

 

URLs

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

 

SCORM Files

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

 

Documents

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

Outcomes