Checkbox 6 Style Guide
Checkbox 6 Style Guide Styles templates can be applied to surveys and reports. This guide will show you how to create a new Style and apply it (and other appearance configurations) to a survey. CONTENTS: • • • • • • • • • • •
Create New Style Configure Style Body Styles Content Frame Fonts and Colors Matrix Styles Other Styles Progress Bar and Buttons Header and Footer Apply Survey Style to a Survey Preview Survey
Create Style
Styles are created and modified in the Style Manager. You have the option to import a style from and XML file, or create a new style from scratch. Select +Survey Style to create a new style template.
Checkbox 6 Style Guide - 1
After naming the style, select a Style Type from the drop-down list (Standard, Tablet, or Smartphone).
If desired, select a Base Style to use as a template from the drop-down list of existing styles.
Checkbox 6 Style Guide - 2
Next, determine whether the style will be Public (available for any Checkbox administrator to use on surveys) and/or Editable (available for any Checkbox administrator to modify from its original configuration). Finally, select Save to begin configuring your new style.
Checkbox 6 Style Guide - 3
Configure Survey Style
Styles are modified in the Style Editor. You can return to the Style Manager by selecting Cancel or Save at the bottom of the Preview pane. Remember to always save your changes before navigating away from the Style Editor.
Checkbox 6 Style Guide - 4
The left side of the Style Editor contains your expandable editor toolbars: • • • • • • •
Body Styles Content Frame Fonts and Colors Matrix Styles Other Styles Progress Bar and Buttons Header and Footer
Expand each of these toolbars by clicking the right-facing arrows on the toolbar title.
Checkbox 6 Style Guide - 5
The right side of the Style Editor is your preview window, which will update automatically as you make changes on the left.
Body Styles
Body Styles settings include: •
Background Color: Set the background color but clicking the color picker.
Checkbox 6 Style Guide - 6
•
•
•
Background Image: Select More Options button to add a background image. A window will appear asking you to determine the location of your image and configure image settings. Body Font: Select desired font style and size from the drop-down lists provided. You may also change the font color using the color picker. For advanced font settings select More Options. Item Spacing: Item spacing is the space between survey items on a page. Change the item spacing by entering a pixel number in the text field provided.
Content Frame
The Content Frame is the area of the screen your survey content will be displayed in. • • • •
Background Color: Set the background color of your content frame using the color picker. Frame Border: Set the width, style and color of your content frame border. Content Frame Max Width: The maximum pixel width the content frame will stretch to. Max width must be at least 800px. Content Frame Min Width: The minimum pixel w idth the content frame will shrink to. Min width cannot be less than 800px.
Checkbox 6 Style Guide - 7
Fonts and Colors
Set desired Fonts and Colors for the various text items in your survey. Select More Options for advanced font settings.
Matrix Styles
The style configurations you set under Matrix Styles will only be visible on surveys that include Matrix Items. Select More Options for advanced font settings. Checkbox 6 Style Guide - 8
Other Styles
The style configurations you set under Other Styles will only be visible on surveys that include Matrix Items.
Progress Bar and Buttons
Within this style category you can configure the size and color of a survey's Progress Bar. Progress bars give respondents a visual indication of their progress within a survey. The progress bar style configurations you set here will only be visible on surveys that have the progress bar enabled in the Survey Editor (see
Checkbox 6 Style Guide - 9
Appearance section below). The font and color of surveys' Navigation Buttons can also be customized here.
Header and Footer
Upload a logo, watermark, or insert text to create a header and/or footer. The header and footer display on every page of your survey. Use the Edit drop-down to move between the Header and Footer editors. To upload an image, select the File Upload icon from the editor toolbar.
Next, select a file from your computer to upload.
Checkbox 6 Style Guide - 10
After uploading your image, this Insert/edit image window will appear. You can change the size of your image under the Appearance tab. If you are satisfied w ith your image, select Update.
The image will appear in your Header/Footer text box. In the example above, w e centered the image using the justification icons. Checkbox 6 Style Guide - 11
As you create your new style, the display in the Preview window to the right of the Style Editor should automatically update. When you are satisfied with your style, select Save return to the Style Manager.
Apply Survey Style to a Survey
From the Survey Manager, select the survey you wish to apply a style to. The survey's dashboard will expand to the right. Select Edit Survey.
Checkbox 6 Style Guide - 12
Select Settings from the Survey Editor, then navigate to the Appearance tab.
Select desired Survey Styles from the drop-dow n lists. Checkbox's mobile browser detection will identify the brow ser/device-type a respondent is using and apply the appropriate default style to the survey. Checkbox 6 Style Guide - 13
NOTE: If you have not created (or choose not to apply) a style for Tablet or Mobile devices, the survey will use the default Web style for all browser types.
Next, configure Appearance Options. These settings are specific to the selected survey. •
• •
• •
•
Display Survey Title: Displays at the top right-hand corner of content frame on every page of survey. Title text is configured under the Languages &Text tab. Display Progress Bar: Displays at the top right-hand corner of content frame on every page of survey. Will fill as respondent moves though survey. Display Page Numbers: Displays at top right-hand corner of content frame as "page_of_" on every page of survey. If Progress Bar is enabled, Page Numbers display below bar. Show Item Numbers: Display to the left of survey question label text. Auto. Adjust Page/Item Numbers: If you have conditional or branching logic in your survey, enabling this option will ensure all pages and item numbers adjust based on which pages/items are shown. Randomize Items in Pages: Randomizes the order of questions and items on
Checkbox 6 Style Guide - 14
•
•
each survey page. Display Javascript Alert: Displays a pop-up alert (in addition to default error text) if a respondent fails to complete a required question or an answer format is invalid. Designated Required Items: Displays a red asterisk (*) to the left of question text to indicate a required question.
CHECKBOX TIP: Hover over the blue tool tips for setting details. Appearance options will save automatically.
Preview Survey
Preview the survey after applying a survey style and appearance options by selecting the Survey Preview button. Thank you for viewing this Checkbox User Guide. Click here to return to Checkbox Resources >> ©2013 Checkbox Survey, Inc.
Checkbox 6 Style Guide - 15
Create New Style Configure Style Body Styles Content Frame Fonts and Colors Matrix Styles Other Styles Progress Bar and Buttons Header and Footer Apply Survey Style to a Survey Preview Survey
Create Style
Styles are created and modified in the Style Manager. You have the option to import a style from and XML file, or create a new style from scratch. Select +Survey Style to create a new style template.
Checkbox 6 Style Guide - 1
After naming the style, select a Style Type from the drop-down list (Standard, Tablet, or Smartphone).
If desired, select a Base Style to use as a template from the drop-down list of existing styles.
Checkbox 6 Style Guide - 2
Next, determine whether the style will be Public (available for any Checkbox administrator to use on surveys) and/or Editable (available for any Checkbox administrator to modify from its original configuration). Finally, select Save to begin configuring your new style.
Checkbox 6 Style Guide - 3
Configure Survey Style
Styles are modified in the Style Editor. You can return to the Style Manager by selecting Cancel or Save at the bottom of the Preview pane. Remember to always save your changes before navigating away from the Style Editor.
Checkbox 6 Style Guide - 4
The left side of the Style Editor contains your expandable editor toolbars: • • • • • • •
Body Styles Content Frame Fonts and Colors Matrix Styles Other Styles Progress Bar and Buttons Header and Footer
Expand each of these toolbars by clicking the right-facing arrows on the toolbar title.
Checkbox 6 Style Guide - 5
The right side of the Style Editor is your preview window, which will update automatically as you make changes on the left.
Body Styles
Body Styles settings include: •
Background Color: Set the background color but clicking the color picker.
Checkbox 6 Style Guide - 6
•
•
•
Background Image: Select More Options button to add a background image. A window will appear asking you to determine the location of your image and configure image settings. Body Font: Select desired font style and size from the drop-down lists provided. You may also change the font color using the color picker. For advanced font settings select More Options. Item Spacing: Item spacing is the space between survey items on a page. Change the item spacing by entering a pixel number in the text field provided.
Content Frame
The Content Frame is the area of the screen your survey content will be displayed in. • • • •
Background Color: Set the background color of your content frame using the color picker. Frame Border: Set the width, style and color of your content frame border. Content Frame Max Width: The maximum pixel width the content frame will stretch to. Max width must be at least 800px. Content Frame Min Width: The minimum pixel w idth the content frame will shrink to. Min width cannot be less than 800px.
Checkbox 6 Style Guide - 7
Fonts and Colors
Set desired Fonts and Colors for the various text items in your survey. Select More Options for advanced font settings.
Matrix Styles
The style configurations you set under Matrix Styles will only be visible on surveys that include Matrix Items. Select More Options for advanced font settings. Checkbox 6 Style Guide - 8
Other Styles
The style configurations you set under Other Styles will only be visible on surveys that include Matrix Items.
Progress Bar and Buttons
Within this style category you can configure the size and color of a survey's Progress Bar. Progress bars give respondents a visual indication of their progress within a survey. The progress bar style configurations you set here will only be visible on surveys that have the progress bar enabled in the Survey Editor (see
Checkbox 6 Style Guide - 9
Appearance section below). The font and color of surveys' Navigation Buttons can also be customized here.
Header and Footer
Upload a logo, watermark, or insert text to create a header and/or footer. The header and footer display on every page of your survey. Use the Edit drop-down to move between the Header and Footer editors. To upload an image, select the File Upload icon from the editor toolbar.
Next, select a file from your computer to upload.
Checkbox 6 Style Guide - 10
After uploading your image, this Insert/edit image window will appear. You can change the size of your image under the Appearance tab. If you are satisfied w ith your image, select Update.
The image will appear in your Header/Footer text box. In the example above, w e centered the image using the justification icons. Checkbox 6 Style Guide - 11
As you create your new style, the display in the Preview window to the right of the Style Editor should automatically update. When you are satisfied with your style, select Save return to the Style Manager.
Apply Survey Style to a Survey
From the Survey Manager, select the survey you wish to apply a style to. The survey's dashboard will expand to the right. Select Edit Survey.
Checkbox 6 Style Guide - 12
Select Settings from the Survey Editor, then navigate to the Appearance tab.
Select desired Survey Styles from the drop-dow n lists. Checkbox's mobile browser detection will identify the brow ser/device-type a respondent is using and apply the appropriate default style to the survey. Checkbox 6 Style Guide - 13
NOTE: If you have not created (or choose not to apply) a style for Tablet or Mobile devices, the survey will use the default Web style for all browser types.
Next, configure Appearance Options. These settings are specific to the selected survey. •
• •
• •
•
Display Survey Title: Displays at the top right-hand corner of content frame on every page of survey. Title text is configured under the Languages &Text tab. Display Progress Bar: Displays at the top right-hand corner of content frame on every page of survey. Will fill as respondent moves though survey. Display Page Numbers: Displays at top right-hand corner of content frame as "page_of_" on every page of survey. If Progress Bar is enabled, Page Numbers display below bar. Show Item Numbers: Display to the left of survey question label text. Auto. Adjust Page/Item Numbers: If you have conditional or branching logic in your survey, enabling this option will ensure all pages and item numbers adjust based on which pages/items are shown. Randomize Items in Pages: Randomizes the order of questions and items on
Checkbox 6 Style Guide - 14
•
•
each survey page. Display Javascript Alert: Displays a pop-up alert (in addition to default error text) if a respondent fails to complete a required question or an answer format is invalid. Designated Required Items: Displays a red asterisk (*) to the left of question text to indicate a required question.
CHECKBOX TIP: Hover over the blue tool tips for setting details. Appearance options will save automatically.
Preview Survey
Preview the survey after applying a survey style and appearance options by selecting the Survey Preview button. Thank you for viewing this Checkbox User Guide. Click here to return to Checkbox Resources >> ©2013 Checkbox Survey, Inc.
Checkbox 6 Style Guide - 15
