Developers

Bring a Personas gallery to your site, utilize full CSS3 backgrounds support, and give your community something special.

Here's what you need to know:

Community Managers

Give your online audience an interactive browser theme - a fusion of design, content and functionality - for a persistent engagement with your users. Contact us and learn how easy it is.

More Themes

Explore our current work and see the great brands that will be moving to the Personas Interactive platform soon.

Developer Specifications

Introduction to Personas

Personas on web pages are defined using a JSON string set as an attribute of an HTML element.

Original Personas

The original Personas specification allows for four attributes that change the appearance of the background:

headerURL points to an image that will be placed in the top right of the window. This image is 3000px wide x 200px high.
footerURL points to an image that will be placed in the bottom right of the window. This image is 3000px wide x 100px high.
textcolor is used as the color for all text in the window (toolbars, tabs, etc.). An appropriate text shadow is chased based on the color's luminosity.
accentcolor is used as the background color for the entire window as well as the color of the titlebar on Mac.

For example:

<img class="detailed-view"
     alt="Crazy Art"
     data-browsertheme='{"id": "crazyartpersona@mydomain.com",
                         "name": "Crazy Art",
                         "headerURL": "crazyart/window-bg.png",
                         "accentcolor": "red",
                         "textcolor": "white"}'
     src="crazyart.png"
     id="crazyart-personas-preview" />

* Note that the JSON is surrounded by single quotes.


There are other attributes that are not used for display purposes:

id is a unique identifer for the persona.
name is the name of the persona.
author is the author of the persona. (optional)
description is a description of the persona. (optional)
iconURL is a URL to an icon for the persona. (optional)
previewURL is a URL to an image of the persona in use. It is used for the Add-ons window. (optional)
updateURL is a URL to a JSON file for updating the persona. It must be https. (optional)
version is a standard version string used for updating the persona. (optional)

Enhanced Personas

The Enhanced Personas specification allows for the full range of CSS background attributes to be applied to the background, as well as providing more control over color. The backgroundImage attribute is required for an Enhanced Persona. Without it, no other Enhanced Personas attributes are processed.

The following attributes are unique to Enhanced Personas:

backgroundImage

Specifies the URL of an image or multiple images that will be used for the background. Multiple images are separated by a comma. The images are drawn from right to left, so the left most image appears on top. We aren’t using the actual CSS syntax here, so don’t put url('...') around the images.

backgroundPosition

Specifies the position of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundSize

Specifies the size of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundRepeat

Specifies the repetition of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundColor

Whereas accentcolor in the original Personas specification is used for both the titlebar and the background of the browser, we allow you to specify just the background color. It is never used for the titlebar. If you specify both a backgroundColor and an accentcolor, accentcolor is used for the titlebar, and backgroundColor is used for the background of the browser.

textShadow

One of the other areas that causes problems with Personas is the area of text shadows. We’ve provided an additional attribute to let you control the text shadow. Personas determines the color of the text shadow to use for your Persona by computing the luminance of the textcolor specified in your Persona.

let luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

If the luminance is less than or equal to 110, it makes your text shadow light, otherwise it makes your text shadow dark. We’ve made textShadow an attribute that you can specify, and you can give it three values: dark, bright, or none. You can experiment with these three values to see which one makes your text look good on your Persona.

For example:

<img class="detailed-view"
     alt="Crazy Art"
     data-browsertheme='{"id": "crazyartpersona@mydomain.com",
                         "name": "Crazy Art",
                         "headerURL": "crazyart/window-bg.png",
                         "textcolor": "white",
                         "textShadow": "dark",
                         "backgroundColor": "#08afdc",
                         "backgroundImage": "crazyart/navigator-toolbox-bg.png, crazyart/window-bg.png",
                         "backgroundPosition": "top left, top right",
                         "backgroundRepeat": "no-repeat, no-repeat",
                         "updateURL": "https://mydomain.com/personas/crazyart/persona.json"}'
     src="crazyart.png"
     id="crazyart-persona-preview" />

* Note that the JSON is surrounded by single quotes.


Notes

If you specify both a headerURL and a backgroundImage, the persona will work with or without Personas Interactive installed. If you only specify a backgroundImage, nothing will happen without Personas Interactive Installed.

JSON can be validated at http://www.jsonlint.com/