Want to Brand your administration backend? This article shows you how to replace the logos and favicons in the administration panel.
Backend Logos
If you are familiar with replacing the logos on the frontend, then the backend is a charm as it is basically the same method.
- Backend > System > Administrator templates > Atum Details and Files > Create Child Template
- Next open the Administrator Template Styles screen. Select your new style and enter the logos you want displayed.
- Close the screen and check to see that your new style has been made the default style.
CSS Files
Rather than change the whole color scheme, I choose to change just the background color of the logo. I also use the same logo for all three sizes and use the following css instead.
Place the following lines into a user.css file and save in this directory: root/templates/administrator/atum/css
- .header .logo {background-color:#d3e5f4!important;}
- .header .logo img{width:272px;height:54px!important;}
Changing the favicons
Find the index.php in the /administrator/templates/atum/ and add the following lines to the file index.php at about line 104 just after the <head>
<!-- Added by Cayenne Design -->
<!-- ICO Favicon -->
<link rel="icon" type="image/x-icon" href="/../../../images/favicons/cayenne_ico_16.png">
<!-- PNG Favicon -->
<link rel="icon" type="image/png" sizes="286x286" href="/../../../images/favicons/cayenne_ico_286_transparent.png">
<link rel="icon" type="image/png" sizes="64x64" href="/../../../images/favicons/cayenne_ico_64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/../../../images/favicons/cayenne_ico_32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/../../../images/favicons/cayenne_ico_16.png">
<!-- SVG Favicon -->
<link rel="icon" type="image/svg+xml" href="/../../../images/favicons/cayenne_ico.svg">
<!-- WEBP Favicon (Note: Not all browsers support WEBP for favicons, ensure to have fallbacks) -->
<link rel="icon" type="image/webp" href="/../../../images/favicons/cayenne_ico.webp">
<!-- Apple Touch Icon (Optional for Apple devices) -->
<link rel="apple-touch-icon" sizes="286x286" href="/../../../images/favicons/apple-touch-icon.png">
<!-- Manifest for PWA (Optional) -->
<link rel="manifest" href="/../../../images/favicons/site.webmanifest">
ChatGPT Acknowledgment