For the schedule tab we set up, you'll need some HTML for the tab itself, and then you place that into a module (above) on every page Grove generates.
For us, that looks like:
- HTML:
- <div id="schedules-tab">
<a href="/schedule">SCHEDULES</a>
</div>
<style>
/* hide on mobile */
@media (max-width: 767px) {
#schedules-tab {
display: none;
}
}
/* Style the schedules-tab */
#schedules-tab {
overflow: hidden;
background-color: var(--donateBGColor);
width: 3em;
position: fixed;
top: 106;
}
/* schedules-tab links */
#schedules-tab a {
float: left;
display: block;
color: #004C42;
text-align: center;
padding: 14px;
text-decoration: none;
writing-mode:vertical-rl;
font-weight: bold;
}
</style>
- Grove:
- You'll want to change the URLs to match your site's schedule page, and adjust 'background-color' and 'color' too.
- Production: Sites & Settings > Page Defaults > Module placement > Above > [this is probably where you'll see the 'Jazz E-News Signup' promo module] Click "add" and choose an HTML Embed module from the dropdown there, and paste in your HTML code.
- Testing: I'd suggest trying this first on a blank page (new page > overrides tab > module placement > above) so that you can see what this looks like in a contained place before it is displayed on allllll pages on WBGO.org.
Hope this helps, and please let me know if I can expand at all on any of this! I'm out the rest of the week, but could hop on a call to talk this through sometime after Giving Tuesday (11/29) if you'd like.
Thanks for reaching out! Big fan of WBGO!!!