CollectionBuilder
Customize entire site's background color #143
evanwill
started this conversation in
Show and tell
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Based on some recent questions I have received:
After building a CollectionBuilder site, folks are often interested in customizing details of the bootstrap-based theme. Designing a beautiful and accessible color pallet is pretty big skill and art, and there are a lot of little details across the site to check--but to get started experimenting is pretty easy and is a good demonstration of the power of CSS to transform look and feel on the web.
Start by looking at the "_layouts/default.html" file, which is used by every single page in a CB site.
element, like:To add a background color to the entire page (banner and main area), you would add a class to the element, which (using one of the garish built in bootstrap colors as an example) would look like:
<body class="d-flex flex-column h-100 bg-success">For just the main content area (and not include the banner), you could add the class to the
<main id="maincontent" role="main" class="flex-shrink-0 bg-warning">Rather than one of the built in bootstrap bg colors, you would want to set up your own background class to use in "_sass/_custom.scss", whiich would look like:
That will give you a new background color to replace the bootstrap default--but now we get to the more complicated details. If you start clicking around your site, you will probably see some areas where the new color doesn't work well.
First, many features use bootstrap "cards" which have their own background color, pure white, so those might end up standing out too much. You could override the card background in "_custom.scss" using something like:
Next, depending on your color, some of the text might not have enough contrast, so you will have to override the base text color as well. You can do that in "_data/theme.yml", using the
text-coloroption, for exampletext-color: #fff. You will probably want to do thelink-coloroption as well.Then you will want to carefully navigate around and ensure there isn't anywhere that the color combos aren't working well that will need manual fixing. For example, there are places where text styles are applied directly in the template that won't be overridden by your custom styles.
And keep in mind that the text and link colors need to have enough contrast to meet accessibility guidelines! Make sure your beautiful colors are actually usable! Use "Lighthouse" in Chrome dev tools (right click, inspect) to do accessibility checking.
Good luck!
Beta Was this translation helpful? Give feedback.
All reactions