# Custom layout **URL:** \ **Category:** ⚙️ Web integration\ **Tags:** custom-layout, guide\ **Created:** [August 28, 2019, 6:01pm UTC](https://forum.spinitron.com/t/custom-layout/51 "2019-08-28T18:01:04Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![tom](https://forum.spinitron.com/user_avatar/forum.spinitron.com/tom/32/343_2.png) [@tom](https://forum.spinitron.com/u/tom)\ **Post date:** [August 28, 2019, 6:01pm UTC](https://forum.spinitron.com/t/custom-layout/51/1 "2019-08-28T18:01:04Z")
A custom page layout in Spinitron allows **seamless navigation between your station’s web site and public pages served by [spinitron.com](http://spinitron.com)**. For example, check out [https://www.ohmradio963.org/](https://www.ohmradio963.org/). If you now navigate to Programming: Schedule you’ll get to a page served by Spinitron. Click around in the page body and you’re navigating among Spinitron’s public pages for OHM Radio. If you now click a different link in the top menu you’ll get back to OHM Radio’s web site. With your custom layout saved in Spinitron, we serve any request for a public page with a `layout=1` query parameter using your layout instead of the Spinitron’s default (white label) layout. In this way, we can serve calendar, playlists and the DJ, show, and on-air pages that look and behave like yours including the same header, footer, navigation and other furniture as your web site’s pages. Here’s our [demo site for the pseudo-station TEST](https://www.testradio.org/) that we host at [www.testradio.org](http://www.testradio.org). ![image](https://forum.spinitron.com/uploads/default/original/1X/74821fef2307edb513ee42c5023668854bc92177.png) The green arrows are links to pages that are handled by our web server, as are the links in the drawer opened by the hamburger menu (pink arrow). All other links are for [www.testradio.org](http://www.testradio.org). The custom layout saved in Spinitron for the station TEST is the same as this page except - it has one card in the main content area instead of three, and - the card is empty except for the special marker `{{SPINITRON_CONTENT}}` that indicates where Spinitron puts page content. Take a look at `index.html` and `custom-layout.html` in the [source code for this demo](https://github.com/spinitron/TEST) and compare them side-by-side. ### Workflow Here’s a possible workflow for making a custom layout in Spinitron. 1. Choose a page on your site to use as a basis to make the custom layout. 2. Open the page in a browser, view source, select all, copy, and paste into your text/code editor. 3. Carve out a chunk of content on that page and replace it with 4. Delete the parts of the page that you don’t want on the pages with Spinitron content. 5. Save your work, select all, copy, and paste into the Custom Layout input in Spinitron’s Web Customization admin page. 6. View your work at `http://spinitron.com/ ____ /?layout=1` replacing the underscores with your station’s ID, e.g. `http://spinitron.com/TEST/?layout=1` is our demo site. Any changes you make to your site’s layout, e.g. adding links to Spinitron, you need to synchronize in the custom layout. I recommend you work on a copy of the custom layout in an editor and saved on your computer and copy-paste-all into Spinitron every time you want to check the results. It’s not practical to make edits in the textarea in the Spinitron web customization form. See also the [CNAME and HTTPS topic](https://forum.spinitron.com/t/cnames-and-https-certificates/72). ---
**Author:** ![tom](https://forum.spinitron.com/user_avatar/forum.spinitron.com/tom/32/343_2.png) [@tom](https://forum.spinitron.com/u/tom)\ **Post date:** [September 23, 2019, 6:26pm UTC](https://forum.spinitron.com/t/custom-layout/51/2 "2019-09-23T18:26:17Z")
## You can use the `` tag Spinitron uses absolute URLs for all links to other Spinitron pages when it renders a page using a custom layout. This allows you to use [the HTML `` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) to set the base URL for all relative URLs in your layout. For example, let’s say your site `www.example.com` has a style-sheet tag on every page: ``` ``` If you simply copy that into a Spinitron custom layout, it wont work. The browser will try to load `https://spinitron.com/static/styles/main.css` instead of `https://www.example.com/static/styles/main.css` You could modify the tag’s `href` make it absolute ``` ``` That will work. But if you have a lot links like this it might be easier to instead use ``` ``` Which will have the same effect _and_ apply to all the other relative URLs in the layout. #### Domain vs page-relative URLs If you have page-relative URLs, for example ``` ``` Then you may need to add a bit more to the base ``` ``` But if this ends up getting complicated, you’re always free to convert your relative URLs to absolute when you produce your Spinitron custom layout. #### Use the `` tag early and only once [As MDN says](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base), the `` tag must come before any other elements with attributes whose values are URLs, which also means it can be used only once. ---
**Author:** ![tom](https://forum.spinitron.com/user_avatar/forum.spinitron.com/tom/32/343_2.png) [@tom](https://forum.spinitron.com/u/tom)\ **Post date:** [January 7, 2020, 12:57am UTC](https://forum.spinitron.com/t/custom-layout/51/3 "2020-01-07T00:57:19Z")
See the related topic on [using a CNAME and HTTPS certificates](https://forum.spinitron.com/t/cnames-and-https-certificates/72) with your custom layout.