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.

Global Code Injection

Individual Card Code Injection

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 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 type="text/css">
/* Remove Pages Hero Light Overlay */
.light .pages-hero .light-overlay { display: none !important;}
</style>

Make Square Images Circular

.card-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>
/*Resize header logo*/
@media (min-width: 640px){ .pages-landing .pages-hero.mynucleus-hero .pages-logo img { max-width: 250px; max-height: 375px; } } /* formerly 200pxW x 300pxH */
@media (min-width: 640px){ .pages-landing .pages-hero .pages-logo img { max-width: 150px; max-height: 225px; } } /* formerly 200pxW x 300pxH */
@media (max-width: 767px){ .pages-landing .pages-hero .pages-logo img { max-width: 200px; max-height: 75px; } } /* mobile */
/*End resize header code*/
</style>

__________________________________________________________________

This list is evergrowing! 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!

Did this answer your question?