Custom CSS Codes
In both your master settings panel and your individual card settings panels, you'll find a code injection section. Those injection boxes accept CSS codes to help customize your site just the way you like it.
Individual Code Card Injection
- Click the gear icon on the page.
- Scroll down to Settings. Toggle 'Use Custom CSS' to on.
CSS stands for Cascading Style Sheets, but that doesn't matter - the only thing that matters is that customization is now in your hands! 👏
There is infinite black hole of CSS capabilities, but for beginners, we've collected a list of helpful CSS codes that you can copy and paste directly from here to your settings!
Want to edit the header overlay? There's a code for that! Ready to change your footer color? There's a code for that! Need to pay off some student loans? Well, we don't have a code for that...
For just about everything else, here you go! 👇
NOTE: Codes that make global changes (ie. hero overlay, navigation changes, footer changes) should be pasted in your master settings code injection field here. For codes that make card specific changes (ie. hiding titles, adding shadows, making square images circular), you need to paste those in the code injection field that's found in the settings panel of that specific card.
Change Color of Navigation Bar (Light Theme)
<style type="text/css">
@media (min-width: 1185px) {
.light .nucleus-navigation {
background: #ea4e39 !important;
}
.light .nucleus-navigation .primary-level>li>a {
color: white;
}
}
</style>
Hide Header Image On A Page While Still Being Visible On A Card On Your Homepage
.hero-background-image .background-image {
visibility: hidden; }
Hide Navigation Menu From Desktop But Not From Mobile
<style>
@media (min-width: 1185px){.nucleus-navigation{display:none !important;}}
</style>
Decrease Header Space Where Navigation Menu Once Existed
<style>
.pages-landing .pages-hero .pages-intro {
text-align: center
;visibility: hidden;
}
.pages-landing .pages-hero {
height: 400px;
}
.sermon-engine-hero {
padding: 100px 0;
</style>
Change Homepage Background Color (Dark Theme)
<style>
.pages-landing.dark .pages-items {
background: #ffffff
}
</style>
Change Homepage Background Color (Light Theme)
<style>
.pages-landing.light .pages-items {
background: #ffffff
}
</style>
Change Footer Color
<style type="text/css">
/* Change Page Footer Background Color */
.pages-footer { background: #ffffff !important; }
</style>
Add Shadow To Card Title
<style>
.page-item-content h1,
.page-item-content h2,
.page-item-content h3 {
text-shadow: 0px 0px 10px #999;
}
</style>
Add Shadow To Headline and Byline
<style>
.dark .pages-intro {
text-shadow: 0px 0px 10px #000;
}
.light.pages-intro{
text-shadow: 0px 0px 10px #777;
}
</style>
Remove Vignette On Card Headers Without Color Overlay
.vignette { display: none; }
Remove Hero Overlay (Light Theme)
<style>
.hero.hero-homepage.use-color-overlay .color-overlay {
opacity: 0!important; }
</style>
Make Square Images Circular
.page-content .image img {
border-radius: 50%;
}
Change Headline And Byline Font Color (Light Theme)
.pages-landing.light .pages-intro h1, .pages-landing.light .pages-intro p {
color: #ffffff;
}
Change Headline And Byline Font Color (Dark Theme)
<style>
.pages-landing.dark .pages-intro h1, .pages-landing.dark .pages-intro p {
color: #ffffff;
}
</style>
Change Background Color (Mobile Only)
<style>
@media (max-width: 767px){.pages-landing .pages-items.mobile.loaded, .pages-landing .pages-hero.mynucleus-hero{background-color: #A9A9A9 !important;}}
</style>
Change Homepage Header Color (Tablet Only, Dark Theme)
<style>
@media (min-width: 768px) and (max-width: 992px){.dark .pages-hero.mynucleus-hero{background-color: #ffffff !important;}}
</style>
Change Homepage Header Color (Tablet Only, Light Theme)
<style>
@media (min-width: 768px) and (max-width: 992px){.pages-landing .pages-hero.mynucleus-hero{background-color: #A9A9A9 !important;}}
</style>
Increase Homepage Logo Size
<style>
@media (min-width: 768px){ .pages-landing .hero .pages-logo img { max-width: 500px; max-height: 500px; } }
/* STANDARD formerly 185pxW x 150pxH */
@media (max-width: 768px){ .pages-landing .hero .pages-logo img { max-width: 25px; max-height: 25px; } }
/* MOBILE formerly 150pxW x 50pxH */
</style>
Italicize Header Fonts on Homepage Cards
<style>
.pages-landing .pages-intro p, .page-item.page-item-horizontal .page-item-content h2, .page-item.page-item-vertical .page-item-content h2 {
font-style: italic; }
</style>
Italicize Homepage Headline & Byline (affects ALL headlines and bylines)
<style>
.pages-landing .pages-intro h1, .pages-landing .pages-intro p {
font-style: italic; }
</style>
Italicize Individual Card Headline & Byline
.pages-landing .pages-intro h1, .pages-landing .pages-intro p {
font-style: italic; }
Increase Card Title Font
<style>
/* -- Change FONT SIZE Cards Mobile -- */
@media (max-width: 767px) {.page-item.page-item-vertical .page-item-content h2 {
font-size: 40px!important; }}
</style>
Adjust the Height of an Individual Card's Header
/*Standard height is 538px*/
@media (min-width: 768px) and (max-width: 1185px){.hero.hero-page {
max-height: 350px}}
/*Standard height is 538px*/
/*Standard height is 150px*/
@media (min-width: 768px) and (max-width: 1185px){.pages-landing .hero .pages-logo img {
max-height: 50px}}
/*Standard height is 150px*/
/*Standard margin is 46px*/
@media (min-width: 768px) and (max-width: 1185px){.pages-landing .hero-page .pages-intro h1 {
margin-top: -10px}}
/*Standard margin is 46px*/
Change URL associated with your main logo
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll(".hero .pages-logo a").forEach(function(a) {a.href = "https://yourdomain.com";});
});
</script>
Add homepage link to footer logo
<script>
function linkLogoToHomepage() {
let t = document.getElementsByClassName('footer-logo')[0];
t.addEventListener('click', function() {
window.location = '/';
});
t.style.cursor = 'pointer';
}
document.addEventListener('DOMContentLoaded', linkLogoToHomepage, false);
linkLogoToHomepage();
</script>
Add anchor points to a card (technically not CSS coding)
Add the following code to an HTML code content block:
<div id="anchor"></div>
Add the following id marker to a button content block:
#anchor
Swap the word "anchor" for whatever you'd like in both codes to your liking.
Hide a specific title on a card on your homepage
Pay specific attention to the number in brackets - nth-of-type(1) - as that number correlates to a specific card on your homepage: 1 being the top left card, 2 being the top middle, 3 being the top right, 4 being the left most card on the second row, etc. Paste the code in your global code injection field.
<style>
.pages-container.after-hero-desktop .row .page-third:nth-of-type(1) h2 {
visibility: hidden; }
</style>
This list is ever-growing! If one of these codes isn't working, it could be because Nucleus has been updated since the last time they were tested. If you have a code that you think would be a valuable addition to this list, let us know!