Display Options Tab

Your dataZoa account can apply a variety of style overrides and functionality to your displays.

Terminology

Key Concepts

• The Display Options are a means of custom-styling your displays from a central location.
• A Custom-styling is (typically) CSS or Javascript you add to the HTML headers or footers of displays owned by your account.
• You can add your own stylings or override those used by default by dataZoa

Adding/Editing Display Options

In the housekeeping toolbar, "pick Profile/Preferences under the 'gear' menu".

^

This brings you to a multi-tab page with various account attributes:

• Access the account-wide display options, use the Gear button and choose the Profile/Preferences entry.
• Use the Display Options panel to examine or edit the headers and footers.
• Note that the custom header and footer fields are empty by default.

Examples

Note: These examples presume some degree of familiarity with common Web technologies like CSS and Javascript.

Example: Enlarge downloader dialog box

dataZoa Displays typically have a download button for visitors to grab the data shown. By default, the button brings up a compact dialog box. These options will re-style it to be a bit larger:

• Add to the header section:

  <style type="text/css"> .DZOptionsRow .EMCT-DateSelect { width:8em; height: initial; display:inline-block; } </style>

• Add to the header section:

  <script type="text/javascript"> $(".EMCT-Overlay").css("font-size", "large"); </script>

Example: Custom popup on downloader button

dataZoa Displays typically have a download button for visitors to grab the data shown. By default, the button brings up a compact dialog box. This option will add functionality to pop up a Javascript alert box:

• Add to the footer section:

  <script>$('[alt^="Download the data from"]').on("click", function() {alert("Ooooh! Clicky!");} );</script>