A properly formatted logo provides users a good user experience by allowing them to quickly identify who and what organization they are purchasing from. Proper formatting also ensures that your logo looks good across the wide range of devices users will be browsing your site with.
Requirements:
- Logo file in .png format
- Dark version of your logo named logo.png
- Light version of your logo named logo-light.png
Including a Dark and Light version of your logo in transparent .png format is important because as the navigation progresses down the screen, the background adjust to white.
Want the same logo for dark / light?
Duplicate your preferred logo file, name the image files appropriately & follow the instructions below.
Uploading Your Logo
To upload your logo, navigate to your Juniper Web admin portal.
- Using the menu on the left-hand side click "Library".
- Under "Directories" choose "logo" or if the directory does not exhist, please create a "logo" directory. ⚠️ The directory is case sensitive....ensure it's logo not Logo or LOGO
- Delete the current "logo.png" and or "logo-light.png" file
- Upload your logo files
- Clear your browser cache or navigate to www.YourWebsiteDomainName.com/clear replacing YourWebsiteDomainName with your actual domain name
Setting Your Logos Height + Max Width
It's important to declare your logos height and max width.
To achieve this, navigate to your Juniper Web admin portal
- Using the menu on the left-hand side click "Settings"
- Under Site Configuration, on the right-hand side you will notice "Logo Settings"
- Adjust the max-width and height accordingly.
- Clear your browser cache or navigate to www.YourWebsiteDomainName.com/clear replacing YourWebsiteDomainName with your actual domain name
Advance Logo Adjustments using CSS
Do you know CSS or have a web manager that does? CSS can be used to make further style changes to the logo.
To achieve this, navigate to your Juniper Web admin portal
- Using the menu on the left-hand side click "Settings"
- Under Site Configuration, on the right-hand side you will notice "Appearance"
- Notice the CSS icon...click the Edit button then add your CSS there.
- Clear your browser cache or navigate to www.YourWebsiteDomainName.com/clear replacing YourWebsiteDomainName with your actual domain name
Learn more about CSS here: https://www.w3schools.com/css