How do I add a custom graphic to my Next Steps Launcher button?
Nucleus provides you with many great ready-made options for what to display on your Next Steps Launcher button. However, they don't currently let you upload your own graphic, like a logo. You can still accomplish this, but you'll need to get your hands a bit dirty. We're going to be covering up the existing button, then dropping your image on top, with some custom CSS!
First Step: Upload your graphic.
Ideally, your graphic should be a PNG with a transparent background. A JPG will work, but you're going to have mixed results. It can be any resolution, but because of poor browser scaling of PNGs, I recommend something as close to "actual size" as you can. So for a transparent PNG, something like 100px by 100px would be perfect. It doesn't have to be square in dimension, either.
Finally, your graphic needs to be in a location you can link to directly. There are so many ways to do this outside of Nucleus (like DropBox) that I won't go into those here. You'll just need a direct link to the image somewhere public online. If you don't have an option, you can do this inside of Nucleus with a bit of trickery. I do this, myself, for many files:
- Create a new empty page on your site - you don't need to add this page to your navigation, or use it on your site for anything - just keep it hidden and use it for stuff like this. 👍🏻
- Add a button to that page, and choose the option to link the button to a file.
- Choose your image as the file, then save the page.
- Visit your page ("view page" button at the top), then right-click the button and click "Copy link address."
- You have your link! This will likely continue to exist, even if you delete the page, but for best results, I'd keep the page active.
Now that you have your link, the rest is easy.
Second Step: The Code.
There's a lot of code coming, but don't worry, we've set it up so you only have to change a few easy values. You'll copy and paste this code into the Code Injection area of your Nucleus settings. If you already have CSS there, you can just copy what's between the <style></style> tags and add it to your own.
We're using CSS variables for this, so that you only have to modify the first four lines. Should be pretty self explanatory, but let's go through it!
- You're going to replace the sample image link in between the quotes with your own.
- The --launcher-color hex value is the color you want the button to be. You can replace this #hex color with RGB if you'd like as well, like so: rgb(255, 255, 255)
- The --launcher-hover-color hex value is the color you want the button to be when you hover over it. If you don't want the color to change, use the same value as the --launcher-color.
- Finally, the --launcher-hover-image-scale is optional. This simply scales your image a little bigger when you hover for some added flair. "1.1" would scale the image 10% larger. "1.9" would be 90% larger. My recommendation: keep it subtle - 1.1, or less. If you don't want this to happen, simply make the scale "1".
Let's get to it! Here's the code:
<style type="text/css">
:root {
--launcher-image: url("https://website.com/link-to-your-image.png");
--launcher-color: #2897F2;
--launcher-hover-color: #2488D9;
--launcher-hover-image-scale: scale(1.1);
}
div#nucleus-launcher-container div[shape="circle"] > div::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--launcher-color);
pointer-events: none;
transition: 0.2s ease all;
}
div#nucleus-launcher-container div[shape="circle"] > div:hover::before {
background-color: var(--launcher-hover-color);
}
div#nucleus-launcher-container div[shape="circle"] > div::after {
content: "";
position: absolute;
width: 25px;
height:100px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%) scale(1);
background: var(--launcher-image);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
transition: 0.2s ease all;
}
div#nucleus-launcher-container div[shape="circle"] > div:hover::after {
transform: translate(-50%,-50%) var(--launcher-hover-image-scale);
}
</style>
That's a wrap!
There you have it! As long as you've followed this article accurately, you should have a fancy new launcher button with your own custom graphic. Hopefully the Nucleus team will eventually give us the option to simply upload our own graphic and be done with it, but until then, hopefully this helps you out!
In closing, a couple minor notes/disclaimers:
- This is a much more complicated setup than much of the other customizations on this site. We're covering up what Nucleus has setup with a giant colored rectangle, then slapping a custom image down on top of it. I can't promise you this will always work, especially with the launcher still under very active development. If they change any part of the core HTML, it could break this. So I'd encourage you to still setup the button in your Launcher settings with the icon or text and colours they provide so there's always a failsafe if this does ever break.
- There's a reason why, I think, Nucleus hasn't given us the ability to do this yet. The button is a call to action, so the image you use should encourage people to click. An icon of footsteps, or literal words, do this well. A logo mark, potentially not so much. So just consider your decision to do this well beforehand to make sure it meshes with your goals for the website.
