Start Here!

Hello! 👋🏻 We're so glad you stopped by.

So glad you've decided to visit. Hopefully, you can find exactly what you're looking for and you'll find the instruction here to be a blessing. But first, please read this carefully, as we'll go over a few things you'll need to know when going through these articles. If you're new to HTML/CSS, please take a minute to read this.

1. We're not Nucleus. 👍🏻

While we've received the blessing of the Nucleus team to create and run this website, we're not Nucleus. We're just a couple guys from the Nucleus Insiders Facebook group that love the platform and already help out with a lot of custom stuff there. We thought it'd be great to have a nice public resource for the adventurous to use, and Nucleus agreed. Don't send support requests to Nucleus if you can't get something here to work, they don't support custom code. Instead, join us on the Nucleus Insiders Facebook group and start a discussion there. Chances are, we'll see it.

2. Use at your own risk. 😲

While Nucleus has given us a couple spots to add custom code, nothing here is officially supported. We test everything we post, and it's very unlikely that anything here will break your website, but we do not have any control over Nucleus's foundational code.


If you already have custom code of your own, we can't promise all of these articles will play well with what you've already got setup. A customization that works now may not work down the road. We do our best to update these articles if Nucleus changes their foundational code, but we won't always catch everything. All that to say this; be careful and be aware of the risks when implementing anything we've shared here.

3. Remember the spots for code that we'll reference frequently. 🤯

Throughout the website, our articles will have you placing code, typically, in one of three spots. Rather than telling you in every single article where these spots are, we'll do that here.


Code Injection block for the website:

If we tell you to add the code to your Code Injection block for the website, this is what we mean. Any code added to this area of your Nucleus is loaded on every page of your website. If you're following an article that uses Javascript, uses third-party scripts or libraries like JQuery, or requires you to add site-wide CSS, this is where that'll go. Any CSS we have you place here will be surrounded by style tags:

<style type="text/css">
    body { 
        background: purple;
    }
</style>

If you already have CSS in your Code Injection block, from your own customizations or ours, then you can simply add the new CSS on a new line between the style tags from your existing CSS.

Custom CSS for your page:

If we tell you to add the code to Custom CSS for your page, this is what we mean. Any code added to this area of your page details will only be loaded for that page. Note that unlike in the Code Injection block, this Custom CSS block only supports CSS, so you do not need to include <style> tags - Nucleus will add them for you. Simply paste the CSS we provide into the box without the surrounding style tags and you'll be all set.

The HTML Block:

Some of our articles may ask you to paste the code we provide into an HTML Block on your page. We are referencing the HTML Block that Nucleus provides. Just drag the HTML Block to your page like you would an image, cards block, or paragraph, then simply paste the code we provide into the box that appears.

4. We love Nucleus as-is. 💜

There's a reason why many of us chose Nucleus over anything else: simplicity. They're laser-focused on what works for the church and they've crafted a tool that's easy to teach, easier to learn, and provides a ton of room for mistakes. It's actually quite difficult to create a website that looks bad when using Nucleus, which is a claim that other website builders cannot often make. That said, while creating our own Nucleus sites, we decided to make several surgical "upgrades" to accomplish things that were in line with our overall visions for our websites; things that would not have been possible without getting our hands dirty.


With that in mind, please don't use the customizations on this site unless you understand that you may be compromising your Nucleus's ease of use. By circumventing Nucleus's awesome tools and customizing your site with Javascript, HTML, and CSS, you may make website maintenance more difficult to teach and to learn. We simply ask that you make sure your reasoning for using these customizations is solid - don't just implement something here because you think it looks cool; make sure it jives with your ultimate goal for your Nucleus.


If you'd like to learn a bit about the basics of HTML and CSS before diving in, we highly recommend checking out the Basic HTML and Basic CSS courses at Free Code Camp.

Happy coding! 💻