Theme Designer is a powerful tool that helps you customize parts of the spreadsheet. However, the theme only controls the layout that is not set from inside Excel. If you just want to use a different color for the text in a cell or change a cell’s background color, use the Format Cells command in Excel before you convert the spreadsheet to a web page.

This tutorial shows you how the Excel settings for the cells in a form blend with the overall layout settings in the theme.

Example spreadsheet

Here’s a simple calculator to convert time from one time zone to another – called Global Meeting Planner. You set your time zone and the time zone for the person you want to meet. Using the slider you can scroll through the possible times during the day, trying to find the best time for the meeting. The example calculator has some formatting assigned by the theme, and some comes from the spreadsheet.


Plain spreadsheet

To create the example, we started with a plain spreadsheet. You can download the plain spreadsheet here. This is what the spreadsheet looks like without formatting and theme.



Formatted spreadsheet

Now, let’s add some formatting in Excel. Let’s make the font bold and bigger. Let’s fill the surrounding cells with yellow color. Read more about how to format the web page from Excel. You can download the formatted spreadsheet here.

This is what the spreadsheet looks like when we’ve added the formatting in Excel. As you can see, from Excel we cannot format the tab row at the top of the screen – it’s not even part of the spreadsheet. We cannot assign a color to the slider that was added by SpreadsheetConverter, or to any other widget. All this must be done by the theme.




In order to style the rest i.e. tab row and the slider, you need to create a new theme from Theme Designer and use this theme for the spreadsheet.

Inside Theme Designer, click on the Layouts category, then enter the following color values:

  • Tab background color box:  #ffe066
  • Tab text color: #262213
  • Active-tab background: #fffdf9
  • Active-tab text color: #262213




Select the Widgets category, then enter #960046 as the Brand color.



Now, download the theme and apply it to the spreadsheet from Workbook tab. For your convenience, the theme file can be downloaded here too.

Final Result

Here is the final calculator, with the correct theme applied. As you can see, the tab row is now adapted to the color scheme, as well as the slider.


This shows that much of the formatting needs to be done in Excel, and that a theme can be used to format the rest.

Now, try for yourself! Try adapting the bottom toolbar and the Print button to the colors of the theme.