Complex CSS Appendix

In this chapter, we will present CSS designs developed by our OER Team at Concordia University Library, showcasing how we have implemented them. Complex CSS Designs can be used to increase accessibility features, improve navigation between and within pages, or enhance the visual look of an open textbook. These designs are primarily intended for experienced CSS users, as they involve advanced techniques and concepts. To begin understanding these concepts, it is helpful to be familiar with the basics of CSS.

Menu Table for In-Page Navigation

To help keep a chapter organized when it contains lots of information, implement a menu table at the top of a page. The table allows for easy navigation to the different sections or headers. Below are three examples of what menu tables can look like:
 

By dragging the slider above, you will notice three menu table options that appear in our Guide to Pressbooks. The first contains three vertical sections, the second shows two panels, and the third is a grid of panels in three rows.  We are providing the code for the menu table with three vertical sections, allowing it to be recreated and adapted. The other menu table examples featured in the slider above can be inferred from the code of the first one.

The code below shows you how to implement three vertical panels named Section 1, Section 2, and Section 3.  Add the following HTML to the Text (HTML) tab of your Chapter/Part:

  HTML:

<div class="menu-table">
  <span class="menu-table-title"> Menu Table </span>
  <a href="#section-1" class="menu-table-panel"> Section 1 </a>
  <a href="#section-2" class="menu-table-panel"> Section 2 </a>
  <a href="#section-3" class="menu-table-panel"> Section 3 </a>
</div>

Notice the href attribute in each panel. This attribute links the element to a specific point on the page with an id attribute of the same name.

For example, the a element above (which is a panel) with href=“#section-1” will link to an h2 element on the same page that has the id=“section-1”, as shown below.

Note: The value of the href attribute begins with a #.

  HTML:

 <h2 id="section-1"> Section 1 </h2>

Then add the following CSS to the Web Styles in Custom Styles:

  CSS:

.menu-table {
  display: flex;
  flex-direction: column;
}

/* Styles the Title of Your Menu Table (The Beige Section). */
.menu-table-title {
  width: 100%;
  height: 2.5em;
  background: #e9e3d3;
  text-align: center;
  align-content: center;
  font-size: 1.1em;
  font-weight: 600;
}

/* Styles Each Section Box. */
.menu-table-panel {
  display: block;
  align-content: center;
  text-align: center;
  width: 100%; 
  height: 3.125em; 
  background: #912338;
  colour: white !important;
  text-decoration: none !important;
  font-size: 1.2em;
  font-weight: 600;
}

/* Styles Each Section box When Hovered (On Desktop). */
.menu-table-panel:hover {
  background: #004085;
  text-decoration: underline !important;
  text-decoration-thickness: 0.04em !important;
}

The CSS would produce a menu table that looks exactly like the menu table with three vertical sections above. However, you can add your own customization in CSS according to the needs of your open textbook, such as changing the panel colour with background, changing the text colour with colour, or the boldness of the text with font-weight.

HTML and CSS Exercise

Attempt to create the two other variations of menu tables (two panels versus multiple panels with a grid of three rows).

Hint: The HTML elements make use of the same classes; you can experiment with their arrangement and add panel elements as needed!

Enlarge the Navigation Bar

By default, the navigation bar at the bottom of each page is small. To enlarge the bar, add padding and increase the font-size. The image slider below shows the before and after of the navigation bar when the additional CSS is implemented.
 

To implement this change, add the following CSS to your Web Styles in Custom Styles:

  CSS:

/* Customizes the Next and Previous Navigation Buttons. */
.nav-reading__next a, .nav-reading__previous a {
  padding: 14px;
  font-size: 1.5em;
  background-color: blue;
}

/* Customizes the Buttons When Hovered. */
.nav-reading__next a:hover, .nav-reading__previous a:hover {
  background-color: red;
  color: white;
}

Custom CSS for H5P Elements

If H5P elements are implemented in your open textbook, it is possible to customize the H5P elements using our Custom Styles H5P Pressbooks Plugin. Student assistants on the Library’s OER Team, Asifur Rahman and Chhayhee Sok, developed our plugin. See an example of a customized H5P Accordion element below, using the slider:
 

To install this Plugin:

1. Visit the GitHub website and download the Custom H5P Plugin file by navigating to Code >> Download Zip.
2. On the left-hand menu bar of Pressbooks, navigate to Plugins >> Network Plugins >> Add New Plugins >> Upload Plugin, then upload the Custom H5P .zip file that you downloaded.
3. To activate the plugin in your open textbook, navigate to “Dashboard” of the specific textbook and click on “Plugins”.
4. Find your plugin name and notice an “Activate” button underneath. Activate the Plugin. Now, any custom CSS will only apply to that specific textbook.

To add your Custom CSS:

After installing the Custom H5P plugin, you can now customize the H5P content types with your own CSS (and, additionally, JavaScript). To add this customization:

1. Navigate back to “Plugins”. Select “Plugin File Editor” underneath the tab.
2. On the upper right corner, notice a dropdown menu. Select your plugin.
3. Notice the three Plugin files. Select “h5p-styles.css” and add your custom CSS in the editor. Some selectors have been added for you.

Note: Pressbooks Plugin only includes the selectors for the H5P Accordion element. However, any H5P element can be customized. To find their selectors, right-click on the H5P element on your page, then go to “Inspect” to find the class name selector.

For more information, consult the Custom styling (CSS) article on the H5P Help Center website.