Skip to main content Skip to footer

How to Style the SpreadJS Theme

SpreadJS uses a range of different default Themes to style the component. You can use these theme templates to customize and build into your own SpreadJS theme.

For this example, we will use the default "Excel 2013 White" theme, which you can find here: http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.15.2.2.css

The above CSS contains all of the CSS classes used by the component. You can customize these as you wish.

For example, you could change the row headers in their normal state like so:

.gc-rowHeader-normal {
  color: #444444;
  background-color: blue;
  background-image: none;
  border-style: solid;
  border-top-color: #efefef !important;
  border-right-color: #ababab !important;
  border-bottom-color: #d5ded5 !important;
}

You can find a sample project containing some example changes to the CSS here: https://jscodemine.grapecity.com/share/Ee4nhrfTzkad9qFdMFIVgA/

Tags:

Tye Glenz