Customizing Graphene with Templates and CSS

It is possibly to heavily customize your Graphene instance with CSS and custom Templates.

Table of Contents
Custom Theme (CSS)
Custom Templates
Custom Micro App / Page Renderer / Template

Custom Theme (CSS)

When editing the site, there exists a "Theme" tab where you can provide additional CSS to override the default Graphene CSS. By default, Graphene uses standard Bootstrap 3 Classes. Due to the nature of CSS, however, it is very easy to modify these classes.

<!-- Standard Bootstrap 3 CSS -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Standard Graphene CSS -->
<link rel='stylesheet' type='text/css' href='/assets/css/graphene.css'>
<!-- Custom Theme CSS (This is where the Custom CSS is added) -->
<link rel='stylesheet' type='text/css' href='/css'>

Note that when pages load within Graphene, the custom CSS is added after Bootstrap and Graphene are loaded. As a result, it is relatively easy to override the default CSS.

For Example

.navbar-inverse {
    background-color: blue; /* Setting Menubar to Blue */
}

Custom Templates

In addition to modifying the default Graphene CSS, it is also possible to override any of the default Graphene Templates.

By default, Graphene uses a number of "mustache" templates to render all apps/pages for the standard end-user view. These templates are part of the standard Graphene codebase, and are available here.

Note that the "main" template is called first, with the other templates being referenced by the main template via the standard {{>partial}} syntax.

Using the "Templates" tab of the site editor within Graphene Admin, it is possible to override any subset of the default Graphene templates by simply creating a new template, and giving it the same name as the default template (excluding the .mustache extension). You may also create your own templates and reference those if you so choose.

For example, you could override the default "footer.mustache" template as follows:

Example: footer Template

<div>This goes at the bottom of the page</div>

Note: Where possible, it is always better to override the default CSS vs. changing the default templates. As new features are added to Graphene, the default templates may change over time. If you have modified those templates, it is possible that performing a Graphene update may break existing or future functionality. Updates to default templates will be specified in the Graphene release notes, but avoiding changes where possible will make future upgrades far less painful.

Custom Micro App / Page Renderer / Template

By default, Graphene will render pages and apps with the default Graphene templates. However, it is possible to define and dynamically swap out the page / app renderer templates by modifying the URL of any given page or app.

Alternate Page Renderer / Template Example:

Consider the following URL: https://my.example.com/page/mygroup/mypage We can swap put page for /r/[template_name] to render the page with a completely different template, giving us https://my.example.com/r/app/mygroup/mypage

Alternate App Renderer / Template Example:

Consider the following URL: https://my.example.com/app/mygroup/myapp We can swap put app for /ar/[template_name] to render the app with a completely different template, giving us https://my.example.com/ar/app/mygroup/myapp

By default, Graphene ships with a default "app" template, but you may create your own alternate renderer templates if you wish.