\n\n'})}),"\n",(0,t.jsx)(n.h2,{id:"removing-brand-name-from-sidebar",children:"Removing brand name from sidebar"}),"\n",(0,t.jsx)(n.p,{children:"If you are using logo image which has branded title inside, you might\nwant completely remove default text brand name from sidebar:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"brandName: 'My App',\n//diff-add\nshowBrandNameInSidebar: false,\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"brandName"})," will still be used in the other places e.g. login form."]}),"\n",(0,t.jsx)(n.h2,{id:"theming",children:"Theming"}),"\n",(0,t.jsx)(n.p,{children:"AdminForth uses TailwindCSS for styling. You are able to customize the look of the application by changing the TailwindCSS configuration."}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.a,{href:"https://github.com/devforth/adminforth/blob/main/adminforth/modules/styles.ts",children:"styles.ts"})," file to see which variables are available for change."]}),"\n",(0,t.jsx)(n.p,{children:"Let's say your brand has a primary purple color and you wish to make side bar purple with white text."}),"\n",(0,t.jsxs)(n.p,{children:["In ",(0,t.jsx)(n.code,{children:"index.ts"})," file set the ",(0,t.jsx)(n.code,{children:"styles"})," property in the configuration:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"\nconst admin = new AdminForth({\n ...\n customization: {\n styles: {\n colors: {\n light: {\n//diff-add\n // color for links, icons etc.\n//diff-remove\n primary: '#1a56db',\n//diff-add\n primary: '#b400b8',\n//diff-add\n // color for sidebar and text\n//diff-remove\n sidebar: { main: '#f9fafb', text: '#213045' },\n//diff-add\n sidebar: {main:'#571e58', text:'white'},\n//diff-add\n },\n//diff-add\n }\n//diff-add\n } \n },\n ...\n});\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Here is how it looks:\n",(0,t.jsx)(n.img,{alt:"alt text",src:i(7281).A+"",width:"3670",height:"1925"})]}),"\n",(0,t.jsx)(n.h2,{id:"square-vs-rounded-buttons",children:"Square vs rounded buttons?"}),"\n",(0,t.jsx)(n.p,{children:"Not an issue, just change:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:'styles: {\n//diff-add\n borderRadius: {\n//diff-add\n "default": "0px"\n//diff-add\n }\n}\n'})}),"\n",(0,t.jsx)(n.h2,{id:"login-background",children:"Login background"}),"\n",(0,t.jsx)(n.p,{children:"To make login interface less boring background image matters."}),"\n",(0,t.jsxs)(n.p,{children:["For example you might want to get ",(0,t.jsx)(n.a,{href:"https://unsplash.com/s/photos/secure?license=free",children:"free sweet background"})," from Unsplash like\n",(0,t.jsx)(n.a,{href:"https://images.unsplash.com/photo-1516501312919-d0cb0b7b60b8?q=80&w=3404&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",children:"Nate Watson's apartments view"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Download it to ",(0,t.jsx)(n.code,{children:"custom"})," directory, and just set it in the configuration:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"const admin = new AdminForth({\n ...\n auth: {\n ...\n//diff-add\n loginBackgroundImage: '@@/photo-1516501312919-d0cb0b7b60b8.jpeg',\n },\n ...\n});\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Here is how it looks:\n",(0,t.jsx)(n.img,{alt:"alt text",src:i(6414).A+"",width:"3700",height:"1932"})]}),"\n",(0,t.jsx)(n.p,{children:"You can also set background position and size:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"\nauth: {\n ...\n loginBackgroundImage: '@@/photo-1516501312919-d0cb0b7b60b8.jpeg',\n//diff-add\n loginBackgroundPosition: 'over',\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"loginBackgroundPosition"})," accepts values:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"over"})," - image will be over the whole login page with cover mode"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"1/2"}),"(default), ",(0,t.jsx)(n.code,{children:"3/4"}),", ",(0,t.jsx)(n.code,{children:"2/5"}),", ",(0,t.jsx)(n.code,{children:"3/5"})," etc. - image will be in the left side of the login page with cover mode"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},6414:(e,n,i)=>{i.d(n,{A:()=>t});const t=i.p+"assets/images/demo.adminforth.dev_login-ed257e25052ee1467a966d8453252cb7.png"},7281:(e,n,i)=>{i.d(n,{A:()=>t});const t=i.p+"assets/images/image-10-738d96deab65708d14f1989c05c7f96e.png"},8453:(e,n,i)=>{i.d(n,{R:()=>a,x:()=>d});var t=i(6540);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkadminforth=self.webpackChunkadminforth||[]).push([[2262],{9333:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>l});var t=i(4848),o=i(8453);const s={},a="Branding and Theming",d={id:"tutorial/Customization/branding",title:"Branding and Theming",description:"The first things you would probably like to change are the logo, favicon and the name of the application.",source:"@site/docs/tutorial/03-Customization/01-branding.md",sourceDirName:"tutorial/03-Customization",slug:"/tutorial/Customization/branding",permalink:"/docs/tutorial/Customization/branding",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Glossary",permalink:"/docs/tutorial/glossary"},next:{title:"Custom record field rendering",permalink:"/docs/tutorial/Customization/customFieldRendering"}},r={},l=[{value:"Removing brand name from sidebar",id:"removing-brand-name-from-sidebar",level:2},{value:"Theming",id:"theming",level:2},{value:"Square vs rounded buttons?",id:"square-vs-rounded-buttons",level:2},{value:"Login background",id:"login-background",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"branding-and-theming",children:"Branding and Theming"}),"\n",(0,t.jsx)(n.p,{children:"The first things you would probably like to change are the logo, favicon and the name of the application."}),"\n",(0,t.jsxs)(n.p,{children:["First of all create directory named ",(0,t.jsx)(n.code,{children:"custom"})," at the same level with your TypeScript/JavaScript index file."]}),"\n",(0,t.jsxs)(n.p,{children:["We will use this directory for all custom components. If you want to call your dir with other name then ",(0,t.jsx)(n.code,{children:"custom"}),", just set ",(0,t.jsx)(n.a,{href:"/docs/api/types/Back/interfaces/AdminForthConfig#customcomponentsdir",children:"customComponentsDir option"})]}),"\n",(0,t.jsxs)(n.p,{children:["Place your logo file into the ",(0,t.jsx)(n.code,{children:"custom"})," directory e.g. (",(0,t.jsx)(n.code,{children:"logo.svg"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Also place your favicon into the ",(0,t.jsx)(n.code,{children:"custom"})," directory e.g. (",(0,t.jsx)(n.code,{children:"favicon.png"}),")"]}),"\n",(0,t.jsx)(n.p,{children:"Then you can change the branding of the application in the configuration:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"title='./index.ts'",children:"\nconst admin = new AdminForth({\n ...\n customization: {\n//diff-remove\n brandName: \"myadmin\",\n//diff-add\n brandName: 'My App', // used in login page and sidebar\n//diff-remove\n title: \"myadmin\",\n//diff-add\n title: 'My App Admin', // used to set HTML title tag\n//diff-remove\n brandLogo: '@@/assets/logo.svg',\n//diff-add\n brandLogo: '@@/logo.svg',\n//diff-remove\n favicon: '@@/assets/favicon.png',\n//diff-add\n favicon: '@@/favicon.png',\n//diff-add\n },\n ...\n});\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Please note that ",(0,t.jsx)(n.code,{children:"@@/"})," is a special prefix which tells AdminForth to look for the file in the ",(0,t.jsx)(n.code,{children:"custom"})," directory.\nYou can use ",(0,t.jsx)(n.code,{children:"@@/"})," prefix for all paths in the configuration and also import images like this in your custom components e.g.:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:'\n Themingstyles.ts file to see which variables are available for change.
Let's say your brand has a primary purple color and you wish to make side bar purple with white text.
In index.ts file set the styles property in the configuration:
./index.ts
const admin = new AdminForth({
...
customization: {
styles: {
colors: {
light: {
// color for links, icons etc.
primary: '#1a56db',
primary: '#b400b8',
// color for sidebar and text
sidebar: { main: '#f9fafb', text: '#213045' },
sidebar: {main:'#571e58', text:'white'},
},
}
}
},
...
});
./index.ts
const admin = new AdminForth({
...
customization: {
styles: {
colors: {
light: {
// color for links, icons etc.
primary: '#1a56db',
primary: '#b400b8',
// color for sidebar and text
sidebar: { main: '#f9fafb', text: '#213045' },
sidebar: {main:'#571e58', text:'white'},
},
}
}
},
...
});
Here is how it looks:
