Version 1.5Restyling a Panel

First Steps

There are two routes you can take when restyling a Glow Panel or InfoPanel, you can either alter the current design by overwriting the current CSS, or provide your own template and restyle from scratch.

Whichever route you take, it's important that you add your own ID or class to the Panel(s) you are going to restyle.

Do not use reference CSS classes that start with "glow", such as "glow111-panel", as these change every version of Glow, to avoid clashes between two versions of Glow used on the same page.

Small Changes: Changing the CSS

Overwriting the current CSS is only recommended for small changes such as replacing the images of the panel.

Open Default PanelOpen Restyled Panel

JavaScript

var restyledPanel = new glow.widgets.Panel("#restyledPanelContent", { id: "restyledPanel"
});

The only difference between the custom panel and restyled one is the restyled one has an ID.

This allows CSS to target that specific panel.

CSS

View CSS

/* top right corner */
#restyledPanel .tr { background: url(/staticarchive/7bbbbde527648c8c8efbffd254ff410dc4f6ebfd.png); /* IE fix */ _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/staticarchive/7bbbbde527648c8c8efbffd254ff410dc4f6ebfd.png', sizingMethod='crop');
} /* top left corner */
#restyledPanel .tl { background: url(/staticarchive/e0c73bba395372d7a9dd1ba66ebac9fbecae099d.png); /* IE fix */ _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/staticarchive/e0c73bba395372d7a9dd1ba66ebac9fbecae099d.png', sizingMethod='crop');
} /* bottom right corner */
#restyledPanel .br { background: url(/staticarchive/14fd9e19630cf05eeb9c8c091ea2a05717325441.png); /* IE fix */ _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/staticarchive/14fd9e19630cf05eeb9c8c091ea2a05717325441.png', sizingMethod='crop');
} /* bottom left corner */
#restyledPanel .bl { background: url(/staticarchive/b7515ec5fb3555ea6cce533780dc71e6de6acc1a.png); /* IE fix */ _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/staticarchive/b7515ec5fb3555ea6cce533780dc71e6de6acc1a.png', sizingMethod='crop');
} /* close button */
#restyledPanel .panel-close { background: url(/staticarchive/9f3f6de6c71cf59517acc75e5b0fac3e3d2c643b.png);
} /* gradient background */
#restyledPanel .c { background: #2a3065 url(/staticarchive/b61977e6c52dd338294f02bae8441c719880701b.png) repeat-x bottom;
} /* transparent border */
#restyledPanel .bars,
#restyledPanel .tb div,
#restyledPanel .bb div { background: #404a9a; opacity: .5;
} /* connecting borders */
#restyledPanel .tb { border-bottom-color: #2a3065;
}
#restyledPanel .bb { border-top-color: #373f84;
}
#restyledPanel .panel-hd { border-bottom-color: #343c7e;
}

Larger Changes: Creating a new template

Often the easiest way to restyle a Panel is to create your own template. This isn't as complicated as it sounds, you're simply creating your own HTML for the panel, but still getting the Panel API and cross browser fixes.

Open Templated Panel

The Template

The template is simply a string containing HTML. Certain class names in the template are used to identify parts of the panel.

panel-hd

The heading content of your panel will be inserted here. When you do myPanel.header.html("Hello!") you'll be changing the content of this element.

panel-bd

The body content of your panel will be inserted here. When you do myPanel.body.html("Hello!") you'll be changing the content of this element.

panel-ft

The footer content of your panel will be inserted here. When you do myPanel.footer.html("Hello!") you'll be changing the content of this element.

panel-close

An event listener will be attached to this element which will cause the panel to close when clicked.

Here's the template used in the above example:

var customTemplate = ' <div class="customTemplate"> <div class="customTemplate-head"> <div class="panel-hd"></div> </div> <div class="customTemplate-body"> <div class="panel-bd"></div> </div> <div class="panel-ft"></div> <div class="customTemplate-bottom"> <a href="#" class="panel-close">Close</a> </div> </div>
';

JavaScript

var templatedPanel = new glow.widgets.Panel("#templatedPanelContent", { width: 571, template: customTemplate
});

CSS

View CSS

.customTemplate .customTemplate-head { height: 82px; background: url(/staticarchive/1b36495c5cdaa7f7f8e7a8877f95082e381dd683.png) no-repeat; padding-top: 1px; /* IE fix */ _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/staticarchive/1b36495c5cdaa7f7f8e7a8877f95082e381dd683.png', sizingMethod='crop');
}
.customTemplate .customTemplate-bottom { height: 83px; background: url(/staticarchive/654ee7a1eb76a2e587861b6bcbea07ac4ae15078.png) no-repeat; /* IE fix */ _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/staticarchive/654ee7a1eb76a2e587861b6bcbea07ac4ae15078.png', sizingMethod='crop');
}
.customTemplate .customTemplate-body { background: url(/staticarchive/8683b71249e2e3be6e72986eeceaec5dee1c95cd.png) center; overflow: hidden; zoom: 1; /* IE fix */ _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_ie.png', sizingMethod='crop');
} .customTemplate .panel-bd { background: #fff; margin: 0 90px; font-size: 1.2em;
} .customTemplate .panel-hd { background: #fff; margin: 53px 90px 0; color: #600; font-size: 1.5em;
}
.customTemplate .panel-hd * { margin: 0;
} .customTemplate .panel-close:link,
.customTemplate .panel-close:visited { float: right; border: 1px solid #ccc; background: #eee; font-size: 1.2em; padding: 5px 19px; margin-right: 90px; text-decoration: none; color: #333; position: relative;
} .customTemplate .panel-close:hover,
.customTemplate .panel-close:active { text-decoration: underline; border-color: #888;
}