Post your favorite CSS here!
Post the CSS, a description of what it does, and a screenshot of examples!
2 Likes
Now that’s a topic for discussion. I use CSS regularly to hide things, like the course summary on a parent, or single components of the course summary for a particular course. I also removed the next/back buttons on courses (make them use the course progress bar) but I had to do site wide instead of course specific. I would love to hear how others are using.
Sorry I had to miss today’s discussion!
Sharing some of my favorites, using a course page object to show how it looks. Here’s a course page with no additional CSS code:
Remove Navigation Bar
<style type="text/css">
#region-course-bottom {display:none;} /* Hides Course Navigation*/
</style>
What it looks like:
Where I’ve used this:
-
In the “course instructions” field (coupled with hiding the Course Progress menu) to create a custom course navigation where the user does not need to travel in a linear way.
-
Within a course page to create a hard stop for the learner (where they cannot advance)
-
In a WarpWire video element (but you must provide a link/button for the user to be able to go somewhere after this)
Remove Course Progress Menu
<style type="text/css">
.region-course-sidebar {display:none;}
#main-content, #content {width: 100%!important;} /*Removes Course Outline*/
</style>
It’s important to use both of the lines of code above so the main container that houses the rest of the content adjusts in width to fill in the space after the side menu is removed. What it looks like:
Where I’ve used this:
- In the “course instructions” field and within course pages along with the code to remove the navigation bar to create custom non-linear navigation for the course
You can also add the existing code on the CSS tricks page to create a blank page that hides the page title, the course page container title, and the course title:
<style type="text/css">
#title-container {display:none;} /*Hides page title*/
.course-flow-body-title {display:none;} /* Hides Course Content Title*/
.region-course-sidebar {display:none;}
#main-content, #content {width: 100%!important;}/*Remove Course Outline*/
#region-course-bottom {display:none;} /* Hides Course Navigation*/
</style>
One last one, as we talked about the URL link using nodes. This is what I use for my RSS series to create a button that is placed at the top of the page that allows users to access the course faster.
The URL using tokens is:
[site:url]/node/[node:nid]/takecourse
By using tokens you can add this link to the template and you do not have to edit it for every iteration when you repeat the session. To format the link you can then use the WYSIWYG editor to add “course-take-course-link” in the “Stylesheet Classes” field on the links Advanced settings tab. This will format the link using your site’s default styling for the Take Course button:
The code I just posted shows what code to add to remove the navigation bar ON the page. I have only done this on course pages, video objects, within the course instructions, and on webforms (and on a webform I believe you would also have to add it to the confirmation message if needed)
Hi everyone! EthosCE Web Designer Remy here 
Please feel free to put suggestions or requests here for some general CSS tricks and tips that you would be interested in learning. I heard that my presence was requested at the next meeting—looking forward to seeing you all!
2 Likes
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.