Theme Designer is an add-on to WrapCreator that allows you to set the web page colors you couldn’t set before, e.g. for the page background, for charts and tabs, and for widgets. 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. Using the ThemePreview toolbar, you can switch between themes directly in the web browser to determine which is best for your calculator. To become permanent, the selected theme must be applied to the spreadsheet before it is converted to a web page.
This help page describes how you can use the Theme Designer to customize the wraps created by WrapCreator.
WrapCreator converts Excel spreadsheets to live web pages that we call Wraps. Most of the formatting of the spreadsheet is preserved, e.g. the text and cell colors, lines and fill patterns that you apply with Excel are also used in the Wrap. 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, tabs, or widgets. We created the Theme Designer tool to give you control over also 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 WrapCreator. The next time you convert a spreadsheet, you can apply the new theme to the Wrap. The theme’s stylesheet contains additional visual properties that are applied when the Wrap is opened in a web browser.
The Categories panel on the left side of Theme Designer lets you select what part of the web page you want to customize.
By selecting Widgets, you can edit the brand color of the widgets. 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 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.
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.
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.
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.
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.
Convert the decimal numbers for Red, Green and Blue to hexadecimal codes with one of the many web tools for this purpose.
Enter the hexadecimal color code into the Theme Designer color picker.
If you wish to create a 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.
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.
When you have set all the colors you require, you download the theme as a stylesheet and import it into WrapCreator in your PC. You can then apply the theme to any calculator during conversion. Let’s continue with how to download and apply a theme to a calculator.
