Paint Cosmos in your brand colors
When it comes to building a strong corporate identity, nothing beats the power of brand and colors. Incorporating these elements will create a sense of consistency throughout your intranet.
| Info |
|---|
Brand and Colors can only be changed by the admin of the Confluence instance. |
...
Navigate to the settings icon in the sidebar and select.
Navigate to Theming → Brand and Colors, and select.
Click the Edit logo button to upload and adjust your logo image.
Upload an image file (PNG, GIF, JPEG, or ICO). The maximum file size is 2MB. The image should be square and at least 48 x 48 pixels for best results. Maximum image size is 150kb.
Adjust the image and zoom in and out if needed.
Click Apply.
Select your desired primary, secondary, and sidebar colors.
Primary Color
Changes the color of active sidebar buttons, links, and action buttons.
Secondary Color
Changes the color of inactive sidebar buttons.
Sidebar Color
Changes the color of the sidebar throughout Cosmos.
Your logo and colors will now be visible throughout the Cosmos app.
Your headers, your intranet
...
From your Confluence navigation bar, access Cosmos by selecting it from the Apps dropdown.
Within Cosmos, proceed to the Settings area.
In the Settings menu, locate and click on General Settings.
Within General Settings, click on the Brand and Colors tab.
This page is structured into different sections, including sidebar customization, page headers, colors, and rounding options. Each section will be explained in detail, guiding through the process of personalizing the Confluence environment to match organizational branding and style preferences.
Sidebar customization
Customizing the sidebar in your Confluence environment allows for a more branded and cohesive user experience. This section focuses on how to personalize the sidebar to reflect your organization's identity more accurately:
Update the company logo displayed in the portal to ensure consistent branding across your digital assets.
Define the appearance of icons in the sidebar.
...
Page Headers
The header images on Cosmos pages present an excellent opportunity for reinforcing company branding and creating a visually appealing intranet environment. This customization allows organizations to add their unique identity into every page, making the user experience more engaging and aligned with the company's aesthetic.
Within the settings page, admins can define the layout of these header images. The choices include setting the images to full width for a bold, expansive look or opting for a grid width layout, which offers a structured, segmented appearance.
...
It's important to note that changes to the background image and the content within page headers are made directly on the page itself.
| Info |
|---|
We’ll walk you through Newsroom’s example, but this can be done for People Network and Space Station as well. |
...
...
Steps to customize page headers
Locate and click on the Newsroom's icon in the sidebar and select.
Navigate to Click the edit button located in the bottom right corner, and select.
Navigate to Header Design, and select.
Change the Title and Subtitle. This option is only visible to admins.
Select "Header Design" from the drawer.
Modify the title and subtitle as needed to match your content or branding requirements.
Navigate to the "Header background" and select click "Edit header.Choose a source "
Select from the following options for your new header image:
Unsplash
→ Access a library of stock photos for high-quality imagery.
Link
→ Use a direct link to an image
.
Attachments
→ Select from available attachments or choose a Confluence page
to upload your
new header image.
Color
→ Opt for a solid color or create a gradient
for a simple background.
Adjust the image and zoom in and out if needed.
Save changes.
Your logo and colors will now be visible throughout the Cosmos app Confirm your customizations by saving the changes.
Colors
When it comes to personalizing your intranet with Cosmos, color plays an important role in creating a visually cohesive and brand-aligned environment. Two main options are available for customizing colors throughout your intranet, each affecting different elements:
The primary color enhances the intranet by coloring links, action buttons, and active sidebar icons to indicate the current page.
Admins have the option to customize spaces and label colors within News and Pages widgets of Cosmos, enhancing customization and visual clarity for these important components.
...
Corner radius
The radius feature in Cosmos allows customization of corner roundness on elements like people cards, news cards, and panels, affecting the intranet's look and feel. Adjusting corner radius is important for branding as it helps match the intranet's design with the organization's identity. Softer, rounded corners can make the interface feel more welcoming, while sharper corners give a sleek, professional appearance.
| Info |
|---|
Cosmos allows for setting the corner radius up to 20px, providing flexibility in customising the visual impact of your intranet elements. |