Replace the logo

Overview

You can use three methods to replace the default logo with a custom one.

Watch a video to learn how to apply common customization scenarios.

Replace the image file 

You can replace the original logo with a custom logo image without writing new code. 

1. In the template project, place the logo image in this location:
   /src/addons/settings/Shared Resources/Themes/Cora/Flowtime/Images/portal-logo.png

Apply changes to the default CSS  

You can edit the .sq-logo class with a new image, image size, and image position.

1. In the template project, go to the folder /src/appStyles.css, and make the required changes to the .sq-logo class. 

/* Logo */
.sq-logo {
    background-image: url('https://seeklogo.com/images/A/abstract-logo-644964A155-seeklogo.com.png');
    background-size: contain;
    background-position: center;
}

/* Logo */
.sq-logo {
    background-image: url('../src/addons/assets/logo-example.jpg');
    background-size: contain;
    background-position: center;
}

Edit the Custom Logo component

For more complex requirements, you can replace the default logo with a custom component. 

1. In the template project, make the required changes at /src/components/logo/index.tsx

Basic example

const Logo = props => {
 return (
<>
   <img src="http://host.com/image.jpg" />
  </>
); 
};

export default Logo;

Advanced example (reuse the default logo component with custom text next to it)

import { GetInjectedContext } from '../../../inject-context';

const Logo = props => {
   const MainComp = GetInjectedContext('Components.Logo');

   return (
<>
<h1>Slogan next to logo</h1>
     <MainComp props={props}></MainComp>
</>
   ); 
};

export default Logo;