Some colors in the Bootstrap OPAC stylesheet are not defined by colors predefined in the colors.tt2

[Eva Cerninakova]

When styling the OPAC of a few libraries of our Evergreen common catalog SPOK, I found that although the templates for Bootstrap OPAC contain a template with general color definitions according to the type of their use in the OPAC interface (Open-ILS/src/templates-bootstrap/opac/parts/css/colors.tt2), some colors used in the OPAC interface are missing in the colors.tt2 template. Those colors are defined directly in the bootstrap stylesheet (Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2) using the hexadecimal or RGB color value or HTML color name, not those general color groups defined in the template colors.tt2.

In my experience, the library catalog is most often customized just by adding a logo, modifying navigation links, and changing colors to match the library's branding. This means that it would basically be enough to change the color values in the colors.tt2 file. However, due to colors being defined directly in the stylesheet by their hex value, it is unfortunately necessary to modify the stylesheet file in addition to the file colors.tt2. This, by the way, involves finding out what style is actually used, which, I think, is a waste of time (and it might be quite frustrating too). Having all colors defined in the file colors.tt2 would be very helpful.

I have identified some colors defined by the HEX or RGB value or by the HTML color name for the IDs or classes in the stylesheet style.css.tt2 (see the attachment).

In addition, I found that some styles containing color definitions are even not defined in the Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2. They are included in the file Open-ILS/src/eg2/src/styles.css, which is impossible to include in the overriding templates according to the definition for the virtual host for single libraries in the consortium. This means that if the library would like to change the color, a new class must be created and added directly to the HTML code in the particular Bootstrap OPAC template.

This issue includes, e.g.,

 class "btn-success" used in the templates:
Open-ILS/src/templates-bootstrap/opac/myopac/list/update.tt2:33
Open-ILS/src/templates-bootstrap/opac/myopac/list/update.tt2:33
Open-ILS/src/templates-bootstrap/opac/myopac/lists.tt2: 161
Open-ILS/src/templates-bootstrap/opac/parts/anon_list.tt2:13

id "place_hold" used in the templates:
Open-ILS/src/templates-bootstrap/opac/myopac/lists.tt2:292
Open-ILS/src/templates-bootstrap/opac/parts/anon_list.tt2:13

And one more note:
I would appreciate a more detailed comment on how and where the colors are used in the OPAC interface. It would be very helpful and time-saving for stylig library OPAC.

[Terran McCanna (tmccanna)]

Adding a link to the plan for creating an editorial/design style guide here: https://wiki.evergreen-ils.org/doku.php?id=community:ui_ig:roadmap