---json
{
    "aliases": [
        { "path": ":docs:layout:page:page" },
        { "path": ":docs:theme:slot:page" }
    ],
    "canonical": ":template",
    "description": "This article talks about template and layout management and how it can be defined by page.",
    "h1": "What are the possible page layouts ?",
    "lead": "If your content does not fit, change it",
    "page_id": "9tl87hg8coopjktg8chkh",
    "template": "holy",
    "title": "What is a template ?"
}
---
====== What is a template and how to apply a layout? ======


{{:docs:templating:undraw_building_websites_i78t.png?600|}}


===== About =====
A ''template'' applies a layout to a page.


''ComboStrap'' comes with ''built-in'' templates that you can use to change the layout on the fly for a particular page.

Choose the template that is the right fit for your content.

\\
\\

<masonry>

<card width="250px" clickable>
{{:docs:theme:element:layout_element.svg|}}
[[holy|Holy]], the holy-grail layout
</card>

<card width="250px" clickable>
{{:docs:theme:template:median_layout.svg|}}
[[medium|Medium]], a layout for readability
</card>

<card width="250px" clickable>
{{:docs:theme:template:landing_layout.svg|}}
[[landing|Landing]], a layout for landing pages
</card>

<card width="250px" clickable>
{{:docs:theme:template:index_layout.svg?preserve=style|}}
[[index|Index]], the layout for index pages
</card>


<card width="250px" clickable>
{{:docs:theme:template:blank_layout.svg|}}
[[minimal|Minimal]], the minimal printable layout
</card>

<card width="250px" clickable>
{{:docs:theme:template:blank_layout.svg|}}
[[hamburger|Hamburger]], the three layers layout
</card>
</masonry>




<blockquote align="text-center center" width="fit-content" >

**Layouts are important.**

{{:strap:layout_funny.png?300|}}
</blockquote>

===== How to set the template for a page? =====

You can set the template:
  * via the [[docs:metadata:manager|metadata manager]].


{{docs:theme:slot:page_layout_metadata_manager.png|}}

  * via the ''template'' URL property. 

<code uri>
?template=value
</code>

Example: to see this page with the [[docs:theme:template:minimal|blank template]], [[start?template=blank|click on this link]].





===== How to customize or create a template? =====



It's possible to customize a template.

  * For Power users, you can create a [[:docs:theme:slot:slot|slot]] to replace the content of a [[:docs:theme:element:element|layout element]].
  * For HTML designers, creating or overriding an existing template to fit your needs is possible. You can learn about this subject in this article: [[:howto:theme-creation|How to create a theme and customize templates?]]


===== App templates =====

''App templates'' are templates for app pages such as login, register, etc.

The user doesn't see them but as a Web Designer, you can customize them. Check out the corresponding page: [[docs:theme:template:app|]]

===== What are the default templates? =====

The default templates are:
  * for the [[:docs:page:system:home|home page]], the [[:docs:theme:template:hamburger|hamburger]]
  * for a [[docs:page:system:index|index page]], the [[docs:theme:template:index|index]]
  * for a [[:docs:page:system:item|item page]]:
      * at the root, the [[:docs:theme:template:index|index medium]] (ie holy without the sidebar)
      * otherwise, the [[:docs:theme:template:holy|holy template]]

These are defaults that take into account by default the type of content:
  * [[:docs:page:system:home|home]] and [[docs:theme:template:index|index]] pages are landing pages
  * [[:docs:page:system:item|item]] pages are content pages