Examples
Example 1: Hiding the Back Button
To remove the back button from the navigation bar use the following CSS snippet:
#back_button { display: none; }
Example 2: Changing the Background Color of the Content Area
To change the background color of the content area (the area surrounding the actual module slide content) use the following CSS snippet:
#content { background-color: #FFFFFF; }
Example 3: Changing the Color of Chapter links in Table of Contents
To change the color of the Chapter links in the Table of Contents window use the following CSS snippet:
.toc_chapter { color: #FF0000; }
Example 4: Applying a style to an object in your module
To apply a style to an object that you’ve inserted into your module, first assign the object a specific CSS class under the CSS Class(es) option in the Selection Settings Window. In this example we’ll assume we assigned the class name “object1” to object on the slide, the CSS to add a black border to that would be:
.object1 { border: 2px dashed #000000; }
Example 5: Relocating the Slide Canvas
By default, the slide canvas automatically stretches as large as possible based on the size of the window. You may, however, want to apply a left and/or top margin to make room for the table of contents, or perhaps a banner image along the top.
While this can be done using the positionSlide() JavaScript function (described in this documentation), that function has the net result of turning off the auto-scaling function (whereas using this CSS solution does not turn off the scaling). This can be achieved by applying margin to the #slide_inner element as follows (this example adds a 180px margin to the left and 80px to the top):
#slide_inner {
margin-left:180px;
margin-top:80px;
}
Example 1: Hiding the Back Button
To remove the back button from the navigation bar use the following CSS snippet:
#back_button { display: none; }
Example 2: Changing the Background Color of the Content Area
To change the background color of the content area (the area surrounding the actual module slide content) use the following CSS snippet:
#content { background-color: #FFFFFF; }
Example 3: Changing the Color of Chapter links in Table of Contents
To change the color of the Chapter links in the Table of Contents window use the following CSS snippet:
.toc_chapter { color: #FF0000; }
Example 4: Applying a style to an object in your module
To apply a style to an object that you’ve inserted into your module, first assign the object a specific CSS class under the CSS Class(es) option in the Selection Settings Window. In this example we’ll assume we assigned the class name “object1” to object on the slide, the CSS to add a black border to that would be:
.object1 { border: 2px dashed #000000; }
Example 5: Relocating the Slide Canvas
By default, the slide canvas automatically stretches as large as possible based on the size of the window. You may, however, want to apply a left and/or top margin to make room for the table of contents, or perhaps a banner image along the top.
While this can be done using the positionSlide() JavaScript function (described in this documentation), that function has the net result of turning off the auto-scaling function (whereas using this CSS solution does not turn off the scaling). This can be achieved by applying margin to the #slide_inner element as follows (this example adds a 180px margin to the left and 80px to the top):
#slide_inner { margin-left:180px; margin-top:80px;}