\n\n'})}),"\n",(0,i.jsx)(e.h2,{id:"theming",children:"Theming"}),"\n",(0,i.jsx)(e.p,{children:"AdminForth uses TailwindCSS for styling. By default both black and light thems the same as for Tailwind, but you able to customize the look of the application by changing the TailwindCSS configuration."}),"\n",(0,i.jsxs)(e.p,{children:["Use ",(0,i.jsx)(e.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,i.jsx)(e.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,i.jsxs)(e.p,{children:["In ",(0,i.jsx)(e.code,{children:"index.ts"})," file set the ",(0,i.jsx)(e.code,{children:"styles"})," property in the configuration:"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",metastring:"title='./index.ts'",children:"\nconst admin = new AdminForth({\n ...\n//diff-add\n customization:{\n//diff-add\n styles:{\n//diff-add\n colors: {\n//diff-add\n light: {\n//diff-add\n sidebar: {main:'#571e58', text:'white'},\n//diff-add\n },\n//diff-add\n }\n//diff-add\n } \n//diff-add\n },\n ...\n});\n"})}),"\n",(0,i.jsx)(e.h2,{id:"square-vs-rounded-buttons",children:"Square vs rounded buttons?"}),"\n",(0,i.jsx)(e.p,{children:"Not an issue, just change:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.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,i.jsx)(e.h2,{id:"login-background",children:"Login background"}),"\n",(0,i.jsx)(e.p,{children:"Some why login background image matters."}),"\n",(0,i.jsxs)(e.p,{children:["For example you might want to get ",(0,i.jsx)(e.a,{href:"https://unsplash.com/s/photos/secure?license=free",children:"free sweet background"})," from Unsplash like\n",(0,i.jsx)(e.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 appartments view"}),"."]}),"\n",(0,i.jsxs)(e.p,{children:["Download it to ",(0,i.jsx)(e.code,{children:"custom"})," directory, and just set it in the configuration:"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.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,i.jsxs)(e.p,{children:["Here is how it looks:\n",(0,i.jsx)(e.img,{alt:"alt text",src:t(5991).A+"",width:"3670",height:"2044"})]})]})}function h(n={}){const{wrapper:e}={...(0,o.R)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},5991:(n,e,t)=>{t.d(e,{A:()=>i});const i=t.p+"assets/images/localhost_3500_resource_aparts (1)-f762e185da8184d6347501bc7be2b3b4.png"},8453:(n,e,t)=>{t.d(e,{R:()=>a,x:()=>d});var i=t(6540);const o={},s=i.createContext(o);function a(n){const e=i.useContext(s);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function d(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(s.Provider,{value:e},n.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkadminforth=self.webpackChunkadminforth||[]).push([[2262],{9333:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>r,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>l});var i=t(4848),o=t(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:"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(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.R)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"branding-and-theming",children:"Branding and Theming"}),"\n",(0,i.jsx)(e.p,{children:"The first things you would probably like to change are the logo, favicon and the name of the application."}),"\n",(0,i.jsxs)(e.p,{children:["First of all create directory named ",(0,i.jsx)(e.code,{children:"custom"})," at the same level with your TypeScript/JavaScript index file."]}),"\n",(0,i.jsxs)(e.p,{children:["We will use this directory for all custom components. If you want to use other name then ",(0,i.jsx)(e.code,{children:"custom"}),", use ",(0,i.jsx)(e.a,{href:"https://adminforth.dev/docs/api/types/AdminForthConfig/type-aliases/AdminForthConfig#customizationcustomcomponentsdir",children:"customComponentsDir"})]}),"\n",(0,i.jsxs)(e.p,{children:["Place your logo file into the ",(0,i.jsx)(e.code,{children:"custom"})," directory e.g. (",(0,i.jsx)(e.code,{children:"logo.svg"}),")"]}),"\n",(0,i.jsxs)(e.p,{children:["Also place your favicon into the ",(0,i.jsx)(e.code,{children:"custom"})," directory e.g. (",(0,i.jsx)(e.code,{children:"favicon.png"}),")"]}),"\n",(0,i.jsx)(e.p,{children:"Then you can change the branding of the application in the configuration:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",metastring:"title='./index.ts'",children:"\nconst admin = new AdminForth({\n ...\n//diff-add\n customization: {\n//diff-add\n brandName: 'My App', // used in header\n//diff-add\n title: 'My App Admin', // used to set the title (HTML title tag in your pages)\n//diff-add\n brandLogo: '@@/logo.svg',\n//diff-add\n favicon: '@@/favicon.png',\n//diff-add\n },\n ...\n});\n"})}),"\n",(0,i.jsxs)(e.p,{children:["Please note that ",(0,i.jsx)(e.code,{children:"@@/"})," is a special prefix which tells AdminForth to look for the file in the ",(0,i.jsx)(e.code,{children:"custom"})," directory.\nYou can use ",(0,i.jsx)(e.code,{children:"@@/"})," prefix for all paths in the configuration and also import images like this in your custom components e.g.:"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:'\n \n\n'})}),"\n",(0,i.jsx)(e.h2,{id:"theming",children:"Theming"}),"\n",(0,i.jsx)(e.p,{children:"AdminForth uses TailwindCSS for styling. By default both black and light thems the same as for Tailwind, but you able to customize the look of the application by changing the TailwindCSS configuration."}),"\n",(0,i.jsxs)(e.p,{children:["Use ",(0,i.jsx)(e.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,i.jsx)(e.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,i.jsxs)(e.p,{children:["In ",(0,i.jsx)(e.code,{children:"index.ts"})," file set the ",(0,i.jsx)(e.code,{children:"styles"})," property in the configuration:"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",metastring:"title='./index.ts'",children:"\nconst admin = new AdminForth({\n ...\n//diff-add\n customization:{\n//diff-add\n styles:{\n//diff-add\n colors: {\n//diff-add\n light: {\n//diff-add\n sidebar: {main:'#571e58', text:'white'},\n//diff-add\n },\n//diff-add\n }\n//diff-add\n } \n//diff-add\n },\n ...\n});\n"})}),"\n",(0,i.jsx)(e.h2,{id:"square-vs-rounded-buttons",children:"Square vs rounded buttons?"}),"\n",(0,i.jsx)(e.p,{children:"Not an issue, just change:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.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,i.jsx)(e.h2,{id:"login-background",children:"Login background"}),"\n",(0,i.jsx)(e.p,{children:"Some why login background image matters."}),"\n",(0,i.jsxs)(e.p,{children:["For example you might want to get ",(0,i.jsx)(e.a,{href:"https://unsplash.com/s/photos/secure?license=free",children:"free sweet background"})," from Unsplash like\n",(0,i.jsx)(e.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 appartments view"}),"."]}),"\n",(0,i.jsxs)(e.p,{children:["Download it to ",(0,i.jsx)(e.code,{children:"custom"})," directory, and just set it in the configuration:"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.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,i.jsxs)(e.p,{children:["Here is how it looks:\n",(0,i.jsx)(e.img,{alt:"alt text",src:t(2050).A+"",width:"3670",height:"1925"})]})]})}function h(n={}){const{wrapper:e}={...(0,o.R)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},2050:(n,e,t)=>{t.d(e,{A:()=>i});const i=t.p+"assets/images/image-4-9ee3b7567732ddbfee0c1c6236aff16e.png"},8453:(n,e,t)=>{t.d(e,{R:()=>a,x:()=>d});var i=t(6540);const o={},s=i.createContext(o);function a(n){const e=i.useContext(s);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function d(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(s.Provider,{value:e},n.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/runtime~main.e727a9ed.js b/assets/js/runtime~main.973528e3.js
similarity index 74%
rename from assets/js/runtime~main.e727a9ed.js
rename to assets/js/runtime~main.973528e3.js
index 9eeab6438..9d2c27632 100644
--- a/assets/js/runtime~main.e727a9ed.js
+++ b/assets/js/runtime~main.973528e3.js
@@ -1 +1 @@
-(()=>{"use strict";var e,a,f,d,c,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={exports:{}};return b[e].call(f.exports,f,f.exports,r),f.exports}r.m=b,e=[],r.O=(a,f,d,c)=>{if(!f){var b=1/0;for(i=0;iDownload it to custom directory, and just set it in the configuration:
const admin = new AdminForth({
...
auth: {
...
loginBackgroundImage: '@@/photo-1516501312919-d0cb0b7b60b8.jpeg',
},
...
});
Here is how it looks:
--f762e185da8184d6347501bc7be2b3b4.png)
