Change the Color of Your FOLIO Banner

Thanks to Jen Bolmarcich for these instructions and CSS code.

1. First, copy the 9 lines of CSS code from this snippet to your clipboard.

2. After you install the extension, go to https://fivecolleges-test.folio.ebsco.com and login.

3. When you select the extension icon (either in your browser toolbar or via the extension menu button (it looks like a puzzle piece)), there will be an option that says "Write style for: fivecolleges.folio.... Click that option.

4. The page that opens will say "Add Style" with the FOLIO test URL. In the main panel (where the text says     /* Insert code here... */), select all the text that is present (lines 9-11) and delete it. Then paste in the code you copied.

5. Click save. (left menu, just underneath the Add Style header and url text box). There is a checkbox just below the URL labelled "Enabled". If that is unchecked, then check it.

6. Click over to your FOLIO Test tab, and refresh the page. Your header should now be a lovely mauve.

7. If you want a different color, you can change it in your style by selecting the tiny colored box that appears next to the rgba numbers. A color picker modal will open and you can choose whatever color you like (of the 16 million+ avail in RGB).

CSS code