Widget structure

This is the basic widget layout. Please change styles and anything within a.entry-widget-launcher, but all class names should stay the same, while the structure (divs etc) should be altered only after discussion.

All style attributes can be edited -- QUESTION: we're probably best not to import a CSS file since it's likely to clash with the host page's CSS and is another file to include... All the CSS magic will be in the iFrame

The 'pretent sidebar' div (div#pretend-sidebar) is just to hold the widget container as if in a page and is not part of the widget.

View the source to see the code. This body text is held in a 'pretend-body' div.

CSS classes & structure

Will be used by jQuery etc to manipulate the code

• div.tn-pse-widget-container - container wrapper for the whole thing. To avoid clashes, this must be used to specifically reference all items within it when using CSS and JS.
• div.widget-upper - upper wrapper inside container.
• iframe.view-widget - iFrame within upper section
• div.widget-lower - lower wrapper inside container.
• a.entry-widget-launcher - <a> tag with image for add button
• div.modal-mask - a shadow mask or 'cover' for the page when modal dialog is over it
• div.modal-outer - outer of modal dialog, containing close button and inner
• a.modal-button-close - outer of modal dialog, containing close button and inner
• div.modal-inner - inner of modal dialog, contains iframe for entry widget
• iframe.entry-widget - an iFrame to the entry widget. Added by jQuery not initially present