How do I customize the branding (name and logo) that users see in Atomic Search?

Learn how to use custom CSS to change the name and logo shown to your Atomic Search users.

If you would like to change the default application name and logo shown to your users on the Atomic Search page, you can do so by adding account-level custom CSS. A root-level LMS admin (or sub-account level LMS admin, depending on where you have installed Atomic Search) will need to complete the following steps:

1. Browse to the root account (or sub-account) and click on Search in the left-hand Canvas navigation menu.
2. Select the three-dot menu in the upper-right and select Admin settings (see Figure 1).
3. Beneath Custom CSS and styling (see Figure 2):
   1. Leave the Show Atomic Search branding option turned on.
   2. In the Custom CSS input box, add the following CSS and select Save.

.aj-search-start .aj-title div,
.aj-search-start .aj-logo {
  display: none;
}
.aj-search-start::before {
  content: "";
  background-image: url("https://placehold.it/48x48"); /*replace with link to your image*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 48px;
  width: 48px; /*width and height can be adjusted for larger logos. We recommend you maintain a 1:1 ratio.*/
  margin-bottom: 8px;
}
.aj-search-start .aj-title::before {
  content: "Place your title here";
}