Learn how to skin Nova to match the style and spirit of your game
A skin is the HTML, CSS, and JavaScript behind every Nova page. It provides the site with its basic structure and style. Skins can be found in the application/views directory.
The Nova Add-ons Exchange features a wide variety of skins, both those created by the Anodyne team, as well as many created and shared by individuals from the larger simming community.
Community contributed skins found on the Nova Add-ons Exchange are not officially supported by the Anodyne team and may not function optimally on your Nova site. Any questions or support for these skins should be directed to the creator(s) of the skin.
We’ve compiled a handful of pages that go into more depth about different aspects of Nova skins that should provide a good primer for someone getting into building / modifying Nova skins.
Another helpful asset when learning how to skin Nova is looking at how other skin authors have built their own skins. Feel free to use the #addons channel in the Discord server to get help or find good examples to use for learning.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Nova","colors":{"primary":"#AD46FF","light":"#C27AFF","dark":"#AD46FF"},"logo":{"light":"https://mintcdn.com/anodyne/dpvgOv__9Plr2AK-/logo/light.svg?fit=max\u0026auto=format\u0026n=dpvgOv__9Plr2AK-\u0026q=85\u0026s=dcfc9e951bc0bd05fd9378eeec44fd3b","dark":"https://mintcdn.com/anodyne/dpvgOv__9Plr2AK-/logo/dark.svg?fit=max\u0026auto=format\u0026n=dpvgOv__9Plr2AK-\u0026q=85\u0026s=73e4dab6dfd64a8dac5405f8eaa6bec2"},"favicon":"/favicon.svg","navbar":{"links":[{"label":"Docs","href":"https://docs.anodyne-productions.com"},{"label":"Add-ons","href":"https://anodyne-productions.com/addons"},{"label":"Get help","href":"https://discord.gg/7WmKUks"}]},"footer":{"socials":{"twitter":"https://x.com/anodyneprod","bluesky":"https://bsky.app/profile/anodyne-productions.com","github":"https://github.com/anodyne"}},"navigation":{"global":{"anchors":[{"anchor":"Community","icon":"discord","href":"https://discord.gg/7WmKUks"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"anodyne","hasAudioNarration":false,"actualSubdomain":"anodyne","customDomains":["docs.anodyne-productions.com"],"gitSource":{"type":"github","owner":"anodyne","repo":"nova-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a21e6c103d4026a3ef77390","collectionId":"ae7d4ca0-3981-4f22-a224-7f6a253e75fc","schemaVersion":"v2"},"entitlements":{},"buildId":"6a21e6c103d4026a3ef77390:success","clientVersion":"0.0.4045","searchFilterCounts":[{"language":"default","tag":"Guides","count":57},{"language":"default","tag":"Knowledge base","count":16},{"language":"default","tag":"Features","count":10},{"language":"default","tag":"Getting Started","count":7},{"language":"default","tag":"Core concepts","count":7},{"language":"default","tag":"Skins","count":7},{"language":"default","tag":"Add-ons","count":6},{"language":"default","tag":"Get Started","count":6},{"language":"default","tag":"Troubleshooting","count":6},{"language":"default","tag":"MODs","count":5}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"guides/v2/skins/overview","slug":"/guides/v2/skins/overview","pageMetadata":{"title":"Overview","description":"Learn how to skin Nova to match the style and spirit of your game","href":"/guides/v2/skins/overview"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Learn how to skin Nova to match the style and spirit of your game\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,li:`li`,p:`p`,ul:`ul`,..._provideComponents(),...props.components},{Heading,Tip,Warning}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`A skin is the HTML, CSS, and JavaScript behind every Nova page. It provides the site with its basic structure and style. Skins can be found in the `,_jsx(_components.code,{children:`application/views`}),` directory.`]}),`\n`,_jsx(Heading,{level:`2`,id:`where-can-i-find-skins`,children:`Where can I find skins?`}),`\n`,_jsxs(_components.p,{children:[`The `,_jsx(_components.a,{href:`https://anodyne-productions.com/addons`,children:`Nova Add-ons Exchange`}),` features a wide variety of skins, both those created by the Anodyne team, as well as many created and shared by individuals from the larger simming community.`]}),`\n`,_jsx(Warning,{children:`Community contributed skins found on the Nova Add-ons Exchange are not officially supported by the Anodyne team and may not function optimally on your Nova site. Any questions or support for these skins should be directed to the creator(s) of the skin.`}),`\n`,_jsx(Heading,{level:`2`,id:`the-skinning-guide`,children:`The skinning guide`}),`\n`,_jsx(_components.p,{children:`We’ve compiled a handful of pages that go into more depth about different aspects of Nova skins that should provide a good primer for someone getting into building / modifying Nova skins.`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/guides/v2/skins/anatomy`,children:`Anatomy of a Nova Skin`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/guides/v2/skins/css`,children:`CSS Files`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/guides/v2/skins/templates`,children:`Template Files`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/guides/v2/skins/installation`,children:`Uploading \u0026 Installing`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/guides/v2/skins/tips`,children:`Tips \u0026 Tricks`})}),`\n`]}),`\n`,_jsxs(Tip,{children:[`Another helpful asset when learning how to skin Nova is looking at how other skin authors have built their own skins. Feel free to use the `,_jsx(_components.code,{children:`#addons`}),` channel in the `,_jsx(_components.a,{href:`https://discord.gg/7WmKUks`,children:`Discord server`}),` to get help or find good examples to use for learning.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Overview","description":"Learn how to skin Nova to match the style and spirit of your game","href":"/guides/v2/skins/overview"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Where can I find skins?","slug":"where-can-i-find-skins","depth":2,"children":[]},{"title":"The skinning guide","slug":"the-skinning-guide","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"anodyne","siteName":"Nova","title":"Overview - Nova","navMaps":{"firstHrefInVersion":{"2.7":{"href":"/guides/v2/skins/overview","matchLevel":0},"3.0":{"href":"/guides/v3/introduction","matchLevel":3}},"firstHrefInLanguage":{}},"lastModified":"2026-01-07T07:46:53.476Z","originalFileLocation":"guides/v2/skins/overview.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Learn how to skin Nova to match the style and spirit of your game\">\u003cmeta data-mint-head name=\"application-name\" content=\"Nova\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Overview - Nova\">\u003cmeta data-mint-head property=\"og:description\" content=\"Learn how to skin Nova to match the style and spirit of your game\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Nova\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.anodyne-productions.com/guides/v2/skins/overview\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://anodyne.mintlify.app/_mintlify/api/og/v2?division=Skins\u0026amp;title=Overview\u0026amp;description=Learn+how+to+skin+Nova+to+match+the+style+and+spirit+of+your+game\u0026amp;theme=0e99ed1f48ede0e381d3cdce\u0026amp;signature=e376783248382fa3c7ed5fe7fbd2e65cc623d9f345b48092dcb7f3dcb0d8646a\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Overview - Nova\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Learn how to skin Nova to match the style and spirit of your game\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://anodyne.mintlify.app/_mintlify/api/og/v2?division=Skins\u0026amp;title=Overview\u0026amp;description=Learn+how+to+skin+Nova+to+match+the+style+and+spirit+of+your+game\u0026amp;theme=0e99ed1f48ede0e381d3cdce\u0026amp;signature=e376783248382fa3c7ed5fe7fbd2e65cc623d9f345b48092dcb7f3dcb0d8646a\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/anodyne/ggkGvagPb0bGNTGJ/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Nova\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#AD46FF\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.anodyne-productions.com/guides/v2/skins/overview\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/guides/v2/skins/overview.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.anodyne-productions.com/#organization\",\"name\":\"Nova\",\"url\":\"https://docs.anodyne-productions.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/anodyne/dpvgOv__9Plr2AK-/logo/light.svg?fit=max\u0026auto=format\u0026n=dpvgOv__9Plr2AK-\u0026q=85\u0026s=dcfc9e951bc0bd05fd9378eeec44fd3b\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.anodyne-productions.com#website\",\"name\":\"Nova\",\"url\":\"https://docs.anodyne-productions.com\",\"publisher\":{\"@id\":\"https://docs.anodyne-productions.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview#webpage\",\"url\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview\",\"name\":\"Overview\",\"description\":\"Learn how to skin Nova to match the style and spirit of your game\",\"dateModified\":\"2026-01-07T07:46:53.476Z\",\"isPartOf\":{\"@id\":\"https://docs.anodyne-productions.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Nova\",\"item\":\"https://docs.anodyne-productions.com\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Overview\",\"item\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview#article\",\"headline\":\"Overview\",\"name\":\"Overview\",\"description\":\"Learn how to skin Nova to match the style and spirit of your game\",\"url\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview\",\"mainEntityOfPage\":{\"@id\":\"https://docs.anodyne-productions.com/guides/v2/skins/overview#webpage\"},\"dateModified\":\"2026-01-07T07:46:53.476Z\",\"publisher\":{\"@id\":\"https://docs.anodyne-productions.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.anodyne-productions.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Nova\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Nova","nav":{"global":{"anchors":[{"anchor":"Community","icon":"discord","href":"https://discord.gg/7WmKUks"}]},"tabs":[{"tab":"Guides","versions":[{"version":"2.7","groups":[{"group":"Getting Started","pages":[{"title":"Meet Nova","href":"/guides/v2/introduction"},{"title":"Before getting started","href":"/guides/v2/before-getting-started"},{"title":"Requirements","href":"/guides/v2/requirements"},{"title":"Installation","href":"/guides/v2/installation"},{"title":"Configuration","href":"/guides/v2/configuration"},{"title":"Update guide","href":"/guides/v2/update-guide"},{"title":"Upgrading to Nova 2.7 from 2.6","href":"/guides/v2/upgrade-guide"}]},{"group":"Features","pages":[{"title":"Characters","href":"/guides/v2/features/characters"},{"title":"User dashboard","href":"/guides/v2/features/dashboard"},{"title":"Forms","href":"/guides/v2/features/forms"},{"title":"Manifests","href":"/guides/v2/features/manifests"},{"title":"Menus","href":"/guides/v2/features/menus"},{"title":"Permissions","href":"/guides/v2/features/permissions"},{"title":"Posting","href":"/guides/v2/features/posts"},{"title":"Ranks","href":"/guides/v2/features/ranks"},{"title":"Site settings","href":"/guides/v2/features/site-settings"},{"title":"Wiki","href":"/guides/v2/features/wiki"}]},{"group":"Core concepts","pages":[{"title":"Directory structure","href":"/guides/v2/directory-structure"},{"title":"Seamless substitution","href":"/guides/v2/seamless-substitution"},{"title":"Controllers","href":"/guides/v2/controllers"},{"title":"Models","href":"/guides/v2/models"},{"title":"Libraries","href":"/guides/v2/libraries"},{"title":"Email","href":"/guides/v2/email/overview"},{"title":"Genres","description":"Learn more about genres, the foundational element of Nova's character management system","href":"/guides/v2/genres"}]},{"group":"Skins","pages":[{"title":"Overview","href":"/guides/v2/skins/overview"},{"title":"Uploading \u0026 installing","description":"Learn how to upload and install Nova skins","href":"/guides/v2/skins/installation"},{"title":"Anatomy of a Nova skin","href":"/guides/v2/skins/anatomy"},{"title":"Templates","href":"/guides/v2/skins/templates"},{"title":"CSS","href":"/guides/v2/skins/css"},{"title":"Tips \u0026 tricks","href":"/guides/v2/skins/tips"},{"title":"Customizing","href":"/guides/v2/skins/customization"}]},{"group":"MODs","pages":[{"title":"Creating a page","href":"/guides/v2/mods/creating-pages"},{"title":"Changing language items","href":"/guides/v2/mods/changing-language-items"},{"title":"Extensions","href":"/guides/v2/mods/extensions"},{"title":"Events","href":"/guides/v2/mods/events"},{"title":"Pretty URLs","href":"/guides/v2/mods/pretty-urls"}]}]},{"version":"3.0","pages":[{"title":"3.0","href":"/guides/v3/introduction"}]}]},{"tab":"Knowledge base","versions":[{"version":"2.7","groups":[{"group":"Getting started","pages":[{"title":"Introduction","href":"/knowledge-base/v2/getting-started/introduction"},{"title":"Helpful links","href":"/knowledge-base/v2/getting-started/helpful-links"},{"title":"Nova license agreement","href":"/knowledge-base/v2/getting-started/license-agreement"},{"title":"Contributors","href":"/knowledge-base/v2/getting-started/contributors"}]},{"group":"Guides","pages":[{"title":"Backing up Nova","href":"/knowledge-base/v2/guides/backing-up-nova"},{"title":"Moving your site","href":"/knowledge-base/v2/guides/moving-site"},{"title":"Version numbers","href":"/knowledge-base/v2/guides/version-numbers"},{"title":"Telemetry","href":"/knowledge-base/v2/guides/telemetry"}]},{"group":"Troubleshooting","pages":[{"title":"Using the Pulsar skin","href":"/knowledge-base/v2/troubleshooting/using-pulsar-skin"},{"title":"Browser dev tools","href":"/knowledge-base/v2/troubleshooting/browser-dev-tools"},{"title":"Check the error logs","href":"/knowledge-base/v2/troubleshooting/error-logs"},{"title":"Development environment","href":"/knowledge-base/v2/troubleshooting/using-development-environment"},{"title":"Re-upload Nova core","href":"/knowledge-base/v2/troubleshooting/reupload-nova-core"}]}]},{"version":"3.0","pages":[{"title":"3.0","href":"/knowledge-base/v3/getting-started/introduction"}]}]}]},"basePath":"","title":"Overview - Nova","buildId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","deploymentId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","dynamics":[],"chunks":[]}