Customising your public pages with CSS

Saturday, Jun 23, 2018

The Style Sheet (CSS) code CourseSales.com staff use by default for the public pages is below. You can just copy and paste this into your own, making modifications where necessary. In fact you might be able to download your copy by visiting https://{shortname}.coursesales.com/co/{shortname}/{shortname}.css

Note that the details below is not the FULL CSS - be sure to merge the two CSS files /css/csCom7000.css?v=6.93 and /css/defaultCourseList.css - and then add the CSS code below..

If this is the case then perhaps a file has been created for your already and it might have some customizations that you rely on! Don’t just overwrite it - be sure to take a backup.

/* custom content visit 
Style public pages with CSS and JavaScript for advice about what to put below this line */
/* Hide the button that takes the booker back to the list (when the public list is not being used) */

input[name="btnlist"]{
  display:none !important;
}

/* Hides the book another button */
input[name="btnanother"]{
  display:none !important;
}

/* Remove the back button */
input[name="btnback"]{
  display:none !important;
}

/* Show the logo again */
div#header.public {
  content:url(/co/awfa/awfa.png) !important;
  height: 90px !important;
  width: 180px !important;
}

/*Hides the save a draft button */
input[name="btnSave Draft"]{
  display:none !important;
}

/* Since we have removed the save draft button now let's move the save button to center it */
input[name="btnSave"]{
  left: 25% !important;
  margin-right: -75% !important;
}

/* The following makes the USI links look like links (blue with underlines)! */
span.JumpLink {
  cursor:pointer;
  color:blue;
  text-decoration:underline;
}
span.JumpLink:hover {
    text-decoration:none;
}

/* This makes the tour instructions look really nice*/
.instruction{
  background-color: yellow;
}

/* hide content eg terms etc, by default and display the reveal words as blue with underline */
.toggle-wrap { display:none; }
.toggle-trigger {
  cursor:pointer;
  color:blue;
  text-decoration:underline;
}
.toggle-trigger:hover {
  text-decoration:none;
}