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.

Original Personas vs. Enhanced Personas

Overview

A Persona contains two images – a header and a footer. These images are very large – 3000 pixels wide. You may wonder why that is. Personas is designed to do one thing; take an image and put it in the upper right corner of the browser. It doesn’t resize or scale the image. If you resize your browser very wide, you just see more of the image on the left hand side. That 3000 pixels number is a completely arbitrary number that is designed to be the maximum you will resize your browser.

This architecture creates problems.

All of these problems have already been solved by CSS, but none of the CSS to do anything to background images is available in Personas. That’s where the Enhanced Personas feature of Personas Interactive comes in.

Enhanced Persona Attributes

... or skip right to the Enhanced Personas Development Specifications to get started.

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.