Theme Designer is an add-on to SpreadsheetConverter that allows you to set the web page colors you couldn’t set before, e.g. for the web page background, for charts and tabs, and for widgets and toolbars. Create your own visual theme and apply it to your web calculators to match your company’s corporate profile – or your personal taste.

The Theme Designer is a free web-based interface where you can create custom themes at http://themedesigner.spreadsheetconverter.com/.

Once you’ve designed a theme, you can download it as a file and use it with your web calculators.

This help page describes how you can use the Theme Designer to customize the webpages created by SpreadsheetConverter.

Overview

SpreadsheetConverter converts Excel spreadsheets to live web pages. Most of the formatting of the spreadsheet is preserved, e.g. text and cell colors, lines and fill patterns that you apply with Excel are also used in the converted web page. Read more about how to format the web page from Excel.

However, Excel does not permit you to set all the properties of the converted page, e.g. the color for the web page background, for charts or for  tabs, widgets and toolbars. We created the Theme Designer tool to allow you to set these properties and to re-use the resulting visual design as a “theme” for more than one calculator.

The finished theme is provided as a Cascading Style Sheets (CSS) file that you download and import into SpreadsheetConverter. The next time you convert a spreadsheet, you can apply the new theme to the converted web page. The theme’s stylesheet contains additional visual properties that are applied when the calculating web page is opened in a web browser.

The ThemeDesigner panels

The Categories panel

The Categories panel on the left side of Theme Designer lets you select what part of the web page you want to customize.

categories

By selecting Widgets, you can edit the brand color of the widgets. On the Toolbar page, you can customize the SpreadsheetConverter toolbar’s color and the color of the buttons. Layouts allow you to modify the colors for sheet tabs and sliding panels. The Charts page allows you to tailor the visual appearance of the charts in your calculator.

The Properties panel

The Properties panel is in the center of the Theme Designer page. This is where you set the visual attributes for the currently selected category.

For each category, there are different properties you can change. You set each color using a color picker. Click the color picker and select a color, or type the exact Hex color code into the textbox.

tab color

tabbackcolor

For each color, click the Apply button to the right of the color picker to apply the changes. To return to the initial default value, press the Reset button.

toolbarcol1

The Preview panel

The Preview panel is the rightmost panel in Theme Designer. It lets you view the result of your modifications before you apply the theme to a spreadsheet. Whenever you change a visual property, the preview panel reflects the change.

In the below example we typed the Hex color code #42804f into the Toolbar color picker and clicked on the Apply button. As you can see, the Preview panel lets you examine the result.

 

toolbarcol

toolbar

 

Color spaces and corporate identity

Both Excel and Theme Designer are built for the RGB color space that is mainly used for display screens. With RGB, the color 0 (zero) is black, as in a dark pixel on the screen. When you work with computer printers, you typically use the CMYK color space. With CMYK, the color 0 is white, as in printing nothing on white stationery. The third common color space is PMS, where the Pantone system is used to select the colors for a printing press.

Using the same colors as in Excel

Excel uses the RGB color space. If your spreadsheet uses a color that you also wish to use for your theme, simply read the values for red, green and blue from the Excel color picker.

excel-color-picker

Convert the decimal numbers for Red, Green and Blue to hexadecimal codes with one of the many web tools for this purpose.

Converting decimal RGB to hexadecimal

Enter the hexadecimal color code into the Theme Designer color picker.

Settinf the form background color in Theme Designer

Using the same colors as in your website

If you wish to create a SpreadsheetConverter theme with the same colors as the rest of your website, you can obtain the proper Hex codes from the stylesheets used for the web site. As an example, if you find that your website uses the color #FFCC00 a lot, you can use the same color for your web calculators by applying it Excel or Theme Designer.

Using the same colors as in your company logo

If you want to use corporate colors like the colors in your company logo, you may save a lot of time by asking your PR department for the Pantone (PMS) codes that were used. There are tools on the web that help you convert Pantone colors to RGB colors. There are also web tools to help you match a color in an uploaded image.

Applying a theme to a calculator

When you have set all the colors you require, you download the theme as a stylesheet and import it into SpreadsheetConverter in your PC. You can then apply the the theme to any calculator during conversion. Let’s continue with how to download and apply a theme to a calculator.