Differences

This shows you the differences between two versions of the page.

--- library:css [2020/03/03 13:41] – roganh
+++ library:css [2024/08/28 22:59] (current) – button colors sleary
@@ Line 1: / Line 1: @@
-===== Evergreen 3.5 =====
+===== Evergreen 3.5+ =====
-As of Evergreen 3.5 it supports an org unit setting for adding CSS directly to the OPAC. This page will act as a repository for community members to share CSS code.
+As of Evergreen 3.5 it supports an org unit setting for adding CSS directly to the OPAC. This page will act as a repository for community members to share CSS code for customizing the OPAC.
 ==== Background Elements ====
@@ Line 14: / Line 13: @@
 }
 </code>
-Turns the color of the background above the header bar in this case a dark yellow.
+Turns the color of the background above the link bar a dark yellow.
+=== Links Bar Background ===
+<code>
+#gold-links-holder {
+    background-color: #ced42c;
+}
+</code>
+Turns the color of the background of the links bar a dark yellow.
+=== Footer Background ===
+<code>
+body {
+    background-color: #ced42c;
+}
+#footer-wrap {
+    background-color: #ced42c;
+    background-image: none;
+}
+</code>
+Turns the background of the footer and the page that continues past it a dark yellow.
+==== Font and Text Changes ====
+=== Bottom Links on Front Page ===
+<code>
+#footer a {
+    color: #ced42c;
+    text-shadow: none;
+}
+</code>
+Changes links on the bottom of the front page to a dark yellow.
+=== Footer Text on Front Page ===
+<code>
+#copyright_text, #footer_logo {
+    color: #ced42c;
+}
+</code>
+==== Button changes ====
+Button classes beginning with ''.btn-'' are [[https://getbootstrap.com/docs/4.1/components/buttons/|Bootstrap's built-in button colors]].
+{{ :library:bootstrap4-buttons.png?direct |}}
+To override them in your custom styles, specify their normal, hover/focus, and disabled states:
+<code>
+.btn-success {
+    background: #007a54;
+    color: white;
+}
+.btn-success:focus,
+.btn-success:hover {
+    background: #00593d;
+    color: white;
+}
+.btn-success:disabled {
+    background: #52635E;
+    color: white;
+}
+</code>