Themes

Themes

The Themes resource is the primary way our system stores the Site themes that generally control the header, footer and CSS styles that can be reused and assigned to many Sites.

Warning: the Themes resource is currently only supported within the Site Builder and internally within the platform. If you are integrating this endpoint be aware that your published themes will be fully backwards compatible, but the specific fields and methods may change in the future.

Theme Model

Theme object

The theme object contains the following fields

Attribute

Type

Description

id

integer

unique id of the theme

active

boolean

Boolean to show this theme to users within the Site Builder

name

string

Unique slug for the theme. Can only contain lowercase letters, numbers and dashes

display_name

string

Theme name that is shown within the Site Builder

parent_id

integer

ID of the parent theme that this theme is extending

render_mode

string

The render mode to be used to render this theme. Choices are legacy or mastertheme

extra_css

string

The CSS used to render this theme

footer_code

string

Extra HTML to add to all the site/theme pages right before the ending </body> tag

footer_template

object

HTML content that will be rendered at the bottom of the page body

header_code

string

Extra HTML to add to all the site/theme pages right before the ending </head> tag

header_template

object

HTML content that will be rendered at the top of the page body

module_templates

list

List of module templates that can be used to override the default HTML used for rendering of various modules

theme_html

string

The main wrapper HTML used to render the theme when using the legacy theme rendering mode

site_override

object

site_override_objects

list

preview_url

string

Hostname that is used to load the auto-generated thumbnail image used to display the theme in the Site Builder

added

timestamp

Date and time theme was created

modified

timestamp

Date and time theme was modified

user_id

integer

Reference id to the User that created this theme

Example object:

{
  "active":true,
  "added": "2019-04-25T16:14:06",
  "display_name": "Custom Theme",
  "extra_css": "body { background-color: red }",
  "footer_code": "<script type=\"text/javascript\" src=\"...",
  "footer_template": {
    "added": "2019-04-25T16:59:52",
    "content": "<footer>...</footer>",
    "id": 123,
    "modified": "2019-04-25T17:02:17",
    "type": "footer"
  },
  "footer_template_id": 123,
  "header_code": "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,500,600,700,700i|Montserrat:300,400,500,600,700\" rel=\"stylesheet\">",
  "header_template": {
    "added": "2019-04-25T16:59:52",
    "content": "<header id=\"header\"></header>",
    "id":124,
    "modified": "2019-04-25T17:02:17",
    "type": "header"
  },
  "header_template_id":124,
  "id":11,
  "module_templates": [

  ],
  "name": "custom-api-theme",
  "parent_id": null,
  "preview_url": "example.somedomain.com",
  "render_mode": "legacy",
  "resource_uri": "/api/v2/themes/11/",
  "site_override":{
    "en":174635
  },
  "site_override_objects": [
    "linklists",
    "pages",
    "theme_settings",
    "extra_css",
    "header_code",
    "footer_code",
    "logo_fallback",
    "plugins"
  ],
  "style_css": "/* Blank style */",
  "theme_html": "<!doctype html>\n<html>\n<head>\n  <title>{{ page.title }}</title>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no\">\n  {% block framework %}\n  {% endblock %}\n  {% include \"themes/header_content.html\" %}\n</head>\n<body>\n\n{% include \"themes/prebody_content.html\" %}\n\n{% if header_template %}\n{{ header_template|safe }}\n{% endif %}\n\n{% include \"themes/layout_content.html\" %}\n\n{% if footer_template %}\n{{ footer_template|safe }}\n{% endif %}\n\n{% include \"themes/footer_content.html\" %}\n\n</body>\n</html>"
}

Site Override Options

These configuration options are use to enable a Theme to override the content of any Site that is assigned that Theme. This is called a "master theme" within our platform and can be used to extend pages, page content, theme settings, plugins, etc from one central site_id

site_override

The below configuration would use the content identified in site_override_objects when rendering the site if that site's language is set to en

"site_override":{
  "en": 174635
}

site_override_objects

The below configuration would denote that most content of the Site should be pulled from the site_override Site. This includes pages, the content on those pages, the navigation list (if applicable), and any plugins enabled.

"site_override_objects": [
  "linklists",
  "pages",
  "plugins"
]

Create a theme

POST /api/v2/themes/

Required fields

Attribute

display_name

theme_html

Example request to create a custom theme

{
  "active":true,
  "display_name": "Custom Theme",
  "extra_css": "body { background-color: red }",
  "footer_code": "<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js\">",
  "footer_template": {
    "content": "<footer>Footer content</footer>"
  },
  "header_code": "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,500,600,700,700i|Montserrat:300,400,500,600,700\" rel=\"stylesheet\">",
  "header_template": {
    "content": "<header id=\"header\">Header content</header>"
  },
  "render_mode": "legacy",
  "style_css": "/* Blank style */",
  "theme_html": "<!doctype html>\n<html>\n<head>\n  <title>{{ page.title }}</title>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no\">\n  {% block framework %}\n  {% endblock %}\n  {% include \"themes/header_content.html\" %}\n</head>\n<body>\n\n{% include \"themes/prebody_content.html\" %}\n\n{% if header_template %}\n{{ header_template|safe }}\n{% endif %}\n\n{% include \"themes/layout_content.html\" %}\n\n{% if footer_template %}\n{{ footer_template|safe }}\n{% endif %}\n\n{% include \"themes/footer_content.html\" %}\n\n</body>\n</html>"
}

Updating a theme

PUT /api/v2/themes/:id/

PreviousPluginsNextAnalytics

Last updated