How to Change the Crowd Logo to a Custom Logo
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Summary
Atlassian Support Offerings
The following approaches are considered Confluence customizations that are beyond the scope of Atlassian Support Offerings. Atlassian will not be held liable for any errors or other unexpected events resulting from the use of the customizations.
The following article is not applicable to Crowd versions 3.2.0 and above.
If this feature is required in later releases, please refer the following feature request and vote for: CWD-925 - Skinnable / Customisable User Console
Solution
To Change the Crowd Logo
Convert or encode your preferred (company) logo into base64 CSS code.
ℹ️ You may use the following online tools for image conversion:
Copy the encoded base64 CSS code to your clipboard.
Edit the
aui-overrides.cssfile from the <crowd-installation-directory>/crowd-webapp/console/style directory.Add the following parameter in the file:
1.aui-header .aui-header-logo-crowd .aui-header-logo-device{background-image:url(data:image/png;base64,<insert-your-logo-base64-CSS>);width:51px}ℹ️ Example:
1.aui-header .aui-header-logo-crowd .aui-header-logo-device{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAwCAYAAAAIP7SLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODIyQUE3REFCMDg4NEVCNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RjU0MzlFMEQwQUExMUUyOEM5RkNEMDM3MTkyMzEyMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RjU0MzlERkQwQUExMUUyOEM5RkNEMDM3MTkyMzEyMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzU1REM0M0VCNTI0NjgxMTgyMkE5NDlFRUJDNzNFNTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEE4MDExNzQwNzIwNjgxMTgyMkFBN0RBQjA4ODRFQjQiLz4gPC9yZGY6RGVzY3Jp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);width:51px}Save the file and refresh the page.
ℹ️ You may need to clear your browser cache if refreshing the page does not help. Alternatively, you may try Clearing the Crowd Plugin Caches.
All the documentation for the Atlassian User Interface is available online.
Was this helpful?