In this article:
- Access the Images folder in Atlas Assets
- Change the Atlas logo
- Logo Image Resolution
- Change the Navigation background image
- Navigation background image specification
Note: Although mentioned in this article, you can read further about the requirements for the logo and banner before changing them in this article: Atlas logo and banner images
Access the Images folder in Atlas Assets
To change either the logo or navigation background images you will first need to go to the Atlas Configuration workspace. You must have at least Member permissions on the workspace to make these changes.
- Navigate to the Atlas Configuration workspace. This workspace can be found by searching for "configuration" in Atlas ConneX, or by manually navigating to the site at /sites/atlasconfiguration in your M365 tenant.
- Click Atlas Assets in the left hand navigation, then open the Images folder.
Change the Atlas logo
- In the Images folder, right click on the file logo.png choose More and then Check out the file:
- Upload your new logo into the library with the same filename and overwrite the existing one.
- Right click logo.png again and choose More then Check in the file.
- Ensure you choose the Publish option in the popup box. You do not need to enter a comment, but you can if you wish. Finally click Check in:
- You're done! The old logo will be replaced for each user when their browser cache is next cleared. This can be done manually to get the new logo immediately. See here for how to clear the cache for a user: How to completely clear Atlas caches
Logo image resolution
The logo has to be 80px height but the width is flexible, although we don’t recommend it to be too wide because it pushes the navigation to the right leaving less space for it.
The minimum width is 80px.
The absolute maximum width is 320px, where it would take the entire header in a mobile device:
However we recommend a maximum width of 160px:
Change the Navigation background image (banner image)
For example images of the process please refer to the previous section - the process is identical apart from the specific image being replaced.
- In the Images folder, right click on the file banner.png choose More and then Check out the file.
- Upload your new banner into the library with the same filename and overwrite the existing one.
- Right click banner.png again and choose More then Check in the file.
- Ensure you choose the Publish option in the popup box. You do not need to enter a comment, but you can if you wish. Finally click Check in.
- You're done! The old logo will be replaced for each user when their browser cache is next cleared. This can be done manually to get the new logo immediately. See here for how to clear the cache for a user: How to completely clear Atlas caches
Navigation background image specification
The banner or navigation background image should be a block of colour, 80px tall by 1x pix wide (80x1) so the colour can expand to fill different screen sizes responsively, without losing detail. If the the image has more than one colour such as one with an illustration, logo or text on it then it has to be 4000px x 80px in order to support up to 4k screen resolutions.
You can now have the option to hide the banner. If hidden the main menu will appear plain white with black text.
To hide the banner, navigate to he Atlas Configuration workspace, go to Site contents, click on the "Site Pages" library and open the Tenant Properties page (tenant-properties.aspx). Edit the value to false for Atlas.Header.ShowBannerImage.
The text colour can also be amended, though you should take care to ensure it is accessible on a white background.
To change the text colour navigate to the Atlas Configuration workspace, go to Site contents, click on the "Site Pages" library and open the Tenant Properties page (tenant-properties.aspx). Edit the value for Atlas.Header.Navigation.FontColor.
SharePoint Administrator permissions will be required to amend anything in the Tenant Properties page. See here for more information on tenant properties.
Comments
0 comments
Please sign in to leave a comment.