Themes

The themes used in portals operate on the same principle as those used in surveys (go to About Themes for more information). A theme is a collection of different Styles, each holding a specific layout definition (go to About HTML Styles for more information). Inside a Panel Portal you can have as many themes as you like, but only one can be active at a time. You can right-click the theme you want to set as default. Also, if you want the panelist to be able to select his or her theme, you can use a Theme Selector (go to Visual Components for more information).

Styles

Click the plus sign in front of a Theme to see all the styles for that Theme. The figure below shows the styles included in “Green” theme. This means that when the “Green” theme is in use, the visual components (and free-form text) can be assign any of these look-and-feel definitions.

To set a style for a visual component:

1. Double-click the component (or right-click and choose Properties) - .

The Properties list opens as shown in the figure below.



Figure 1 - Applying a style for a Visual Component

2. Click the down-arrow beside the Style Name field and select from the list the style you wish to use for this component, then click Apply.

Note that only class styles can be selected, not tag, id or complex.

A style has its own properties.

3. In the Panel Portal toolbox, double-click on the style (or right-click the style and choose Properties).

The style designer opens up in the frame on the right - .

Figure 2 - Working with Styles

The figure shows properties for the “topnav” style. The property tab bar (1) provides access to a wide variety of settings for each style.

Whenever you change a setting, you are given you an instant preview (2) of the style do that you can see how each setting affects the style. Also, when making changes to a style, each alteration (setting) is listed below the preview so that you at all times know which settings have been set for that style (3) (go to Visual Components for more information).

Set as Default

You can set a Theme to be default. The default Theme will always be used unless another theme is specifically chosen by panelists.

To set a Theme as Default:

1. In the Panel Portal toolbox, right-click on the desired Theme.
2. Choose Set as Default from the drop-down menu - .

The text “DEFAULT” is displayed next to the default theme inside the Panel Portal toolbox.

Figure 3 - Setting a theme as Default

View Stylesheet Contents

You can view the styles in a theme. This is very helpful if you wish to find the definitions of all styles, typically for use outside this theme. To view the styles:

Right-click a Theme and choose View Stylesheet Contents from the drop-down menu - .

This displays all the styles for that Theme, as in the example below.

Figure 4 - Selecting View Stylesheet Contents

Edit Custom CSS

Right-click on a theme and select Edit Custom CSS to open the Edit custom CSS overlay - .

Figure 5 - Example of the Edit Custom CSS overlay

As the theme editing functionality is rather limited, this overlay allows you to manually edit the stylesheet and add you own style codes. Note that you should have some experience with stylesheets and HTML coding before you attempt to use this functionality. The links below may be useful if you wish to learn more about CSS and HTML:

https://developer.mozilla.org/en-US/docs/Web/CSS

https://developer.mozilla.org/en-US/docs/Web/HTML