dependent-tan•4mo ago

How To Remove and Customize Refine Default Logo on Admin Panel.

Having trouble to remove and replace the default refine Logo/icon on the left top of admin panel with mine. How can i achieve that?

11 Replies

kapa.ai•4mo ago

Hi @Drick. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To remove the default title and logo from the Refine admin panel, you can use the renderContent property or set the title property to false. Here are two examples: 1. Using renderContent property:

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 renderContent={(  
 content: React.ReactNode,  
 title: React.ReactNode, // not return  
 ) => {  
 return content;  
 }}  
 />  
 );  
};

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 renderContent={(  
 content: React.ReactNode,  
 title: React.ReactNode, // not return  
 ) => {  
 return content;  
 }}  
 />  
 );  
};

2. Setting title property to false:

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={false}  
 />  
 );  
};

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={false}  
 />  
 );  
};

In both examples, the default title and logo are removed from the login page. You can replace the removed logo with your own by adding your logo component in the renderContent function. For more details, you can check the official documentation (https://refine.dev/docs/ui-integrations/ant-design/components/auth-page#how-can-i-remove-the-default-title-and-logo-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1062024816858779688> kapa.ai is still learning and improving, please let us know how it did by reacting below

dependent-tan•4mo ago

@kapa.ai here below is the sample code i used to change the title, so can you help me from here to change logo/icon too? import { ThemedLayoutV2, ThemedTitleV2 } from '@refinedev/antd'; import React from 'react'; import Header from './header'; const Layout = ({ children }: React.PropsWithChildren<{}>) => { return ( <ThemedLayoutV2 Header={Header}
Title={(titleProps) => <ThemedTitleV2 {...titleProps} text="Paki Admin" />} > {children} </ThemedLayoutV2> ); }; export default Layout;

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can change the logo by passing your own logo component to the icon prop of the ThemedTitleV2 component. Here's how you can do it:

import { ThemedLayoutV2, ThemedTitleV2 } from '@refinedev/antd';
import React from 'react';
import Header from './header';
import MyLogo from './MyLogo'; // import your logo component

const Layout = ({ children }: React.PropsWithChildren<{}>) => {
  return (
    <ThemedLayoutV2
      Header={Header}
      Title={(titleProps) => <ThemedTitleV2 {...titleProps} text="Paki Admin" icon={<MyLogo />} />}
    >
      {children}
    </ThemedLayoutV2>
  );
};

export default Layout;

import { ThemedLayoutV2, ThemedTitleV2 } from '@refinedev/antd';
import React from 'react';
import Header from './header';
import MyLogo from './MyLogo'; // import your logo component

const Layout = ({ children }: React.PropsWithChildren<{}>) => {
  return (
    <ThemedLayoutV2
      Header={Header}
      Title={(titleProps) => <ThemedTitleV2 {...titleProps} text="Paki Admin" icon={<MyLogo />} />}
    >
      {children}
    </ThemedLayoutV2>
  );
};

export default Layout;

In this example, MyLogo is your own logo component. You need to replace MyLogo with your actual logo component. For more details, you can check the official documentation (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout#title). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1062024816858779688> kapa.ai is still learning and improving, please let us know how it did by reacting below

dependent-tan•4mo ago

@kapa.ai thank you issue solved

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're welcome! I'm glad to hear that your issue is solved. If you have any other questions or run into any other issues, feel free to ask. Happy coding with Refine! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1062024816858779688> kapa.ai is still learning and improving, please let us know how it did by reacting below

dependent-tan•4mo ago

@kapa.ai i need to change the color of the title

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To change the color of the title, you can wrap the title text in a span or div and apply a style to it. Here's how you can do it:

import { ThemedLayoutV2, ThemedTitleV2 } from '@refinedev/antd';
import React from 'react';
import Header from './header';
import MyLogo from './MyLogo'; // import your logo component

const Layout = ({ children }: React.PropsWithChildren<{}>) => {
  return (
    <ThemedLayoutV2
      Header={Header}
      Title={(titleProps) => <ThemedTitleV2 {...titleProps} text={<span style={{ color: 'red' }}>Paki Admin</span>} icon={<MyLogo />} />}
    >
      {children}
    </ThemedLayoutV2>
  );
};

export default Layout;

import { ThemedLayoutV2, ThemedTitleV2 } from '@refinedev/antd';
import React from 'react';
import Header from './header';
import MyLogo from './MyLogo'; // import your logo component

const Layout = ({ children }: React.PropsWithChildren<{}>) => {
  return (
    <ThemedLayoutV2
      Header={Header}
      Title={(titleProps) => <ThemedTitleV2 {...titleProps} text={<span style={{ color: 'red' }}>Paki Admin</span>} icon={<MyLogo />} />}
    >
      {children}
    </ThemedLayoutV2>
  );
};

export default Layout;

In this example, I've wrapped the "Paki Admin" text in a span and applied a style to change the color to red. You can replace 'red' with any color you want. For more details, you can check the official documentation (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout#title). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1062024816858779688> kapa.ai is still learning and improving, please let us know how it did by reacting below