Add a bar along the top of your website to countdown to your next service with Livebar.church!
We've found Livebar.church to be an awesome little addition to Nucleus. It allows you to easily create a bar (similar to Nucleus's own Announcement Bar) that appears along the top of your website, showing a countdown to your next event or service, and allowing you to link that countdown to a website. Simply visit https://livebar.church to create your bar, then click the "Copy Code" button:
Once you've copied the code, you can add it to your site in a few different ways.
Show the Live bar site-wide:
Simply paste the code they've given you into the Code Injection block in your Nucleus settings.
Show the live bar on a specific secondary page:
Drag an HTML block to your page and paste the code there. It doesn't matter where you put the HTML block, the bar will appear at the top of your site.
Only show the live bar on your home page:
If you just want the live bar on your home page and no where else, it's a bit more involved. You'll need to paste the code into the Code Injection block in your Nucleus settings, then add the following code after it:
<style type="text/css">
body:not(.pages-homepage) .livebar_container {
display: none !important;
}
</style>And finally, you can Customize the live bar text to match your Nucleus:
By default, the live bar sets its own font, so your Nucleus Typography settings don't apply to it. You can customize the live bar with a bit of CSS in your Code Injection block in your Nucleus settings to make it match:
<style type="text/css">
.livebar-text,
.livebar-button {
font-family: "Montserrat" !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
</style>Just update the font-family from "Montserrat" to the name of the Google Font you have selected in your Typography settings for your Headings or Body text. If you don't want to bold the text, or make the text all uppercase, you can remove those optional lines.
