Action button text labels
View: View source code in CONTENTdm Cookbook Demo Site.
This customization is inspired by one originally developed by Jennifer Howard of Frontier Nursing University.
CONTENTdm uses icon-based buttons for the expand, download, and print features on the item view pages. The icons used come from the Font Awesome icon set, which is widely used on modern websites, but the associated function is not immediately obvious to all users. This recipe demonstrates a way to insert text labels adjacent to the icons.
One consideration with this customization is that you will be inserting UI text via CSS rather than using CONTENTdm’s language localization features. This means it will only support a single language and the text will not change if users select a different language.
Because inserting the text labels greatly increases the width of each button, they will not fit on smaller screens (like mobile phones) without wrapping to a new line. For this reason, this customization is configured so that it shows the “Download” and “Print” labels only on larger screens. The “Expand” label is shown on all screen sizes.
Modifying this customization
The primary customization linked above positions the text labels to the right of the icon. It is very straightforward to alter the CSS to place the text to the left of the icon instead. The link below shows that alternate CSS.
View: View the source code.
This recipe separates the text insertion into distinct rules for each button. If you only want to use one or two of the text insertions, delete or comment out the ones you don’t want to appear.