Creating and Adding New Theme Stylesheets

A stylesheet is a jQuery or Wijmo theme that controls the appearance (colors, fonts, etc.) of your NetHelp theme.

Doc-To-Help includes predefined stylesheets (and additional stylesheets for the Responsive theme), but you can download additional themes, or create your own, with the jQuery Theme Roller.

  1. On the Target ribbon, click the Designer button in the Theme section.
  2. In the Theme Designer, click the Add New Style Sheet button . The Add New Style Sheet dialog opens.

  3. Do one of the following:

    • If you already have a theme you would like to add, click and navigate to your file.

    • If you want to create or download a theme for Tabs or Accordion, open the jQuery UI Theme Roller website at:

      http://jqueryui.com/themeroller/

      Download the theme for version 1.12.1 and save it on your machine. Then in Doc-To-Help's Add New Style Sheet dialog, click and navigate to the downloaded file.

      For the Responsive theme, use the jQuery Mobile Theme Roller website at:

      http://themeroller.jquerymobile.com/?ver=1.3.2

      Download the theme for version 1.3.2 and save it on your machine. Then in Doc-To-Help's Add New Style Sheet dialog, click and navigate to the downloaded file.

  4. Click Next. The file name will display in the "Style Sheet name" field.

  5. Click Finish. In the Theme Designer, the "Style sheet" field will automatically choose the new theme and display it.

After you add a stylesheet using the Add New Style sheet dialog, it will be stored on your computer in C:\Users\[username]\Documents\My Doc-To-Help Projects\Doc-To-Help\Themes\Common\NetHelp 2.0\css\jquery-ui\[name of new theme].

To learn more about using the jQuery UI Theme Roller, see:

http://jqueryui.com/docs/Theming/Themeroller

To learn more about the jQuery Mobile Theme Roller, see:

http://jquerymobile.com/resources/

These steps apply to themes based on Accordion or Tab themes. It does not affect Responsive themes, which use jQueryMobile stylesheet.

  1. On the Target ribbon, click the Designer button in the Theme section.
  2. In the Theme Designer, select the style sheet you want to upgrade from the Style sheet drop-down.
  3. Click the Open in ThemeRoller button . Your browser will open to the jQuery-UI website.
  4. Click Download theme on the left side of this page.
  5. Select version 1.12.1.
  6. Scroll down the page and click Download. The zip file for the new style sheet version will download. You should see version 1.12.1 listed in the name of the downloaded file.
  7. After the download is complete, go back to the Theme Designer.
  8. Click the Add new Style Sheet from Themeroller button.
  9. In the Add New Style Sheet dialog, browse to the location where you saved the version 1.12.1 stylesheet.
  10. Click Next.
  11. Type in the name of the new style sheet you just downloaded, and then click Finish. Your new style sheet is now ready to be used in your theme.