Custom theme

Custom theme

Posted by: kmalyi on 2 September 2020, 8:30 am EST

• 

  kmalyi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 September 2020, 8:30 am EST

  Hi, i want create custom theme for whole workbook, is there any way to do that? For now i am trying to change your basic css file and it’s pain to find element css class (because i can’t inspect canvas).

• 

  kmalyi

  • Post Options:
  • Link
    Copy

  Posted 2 September 2020, 8:34 am EST

  Also i can’t use js helpers because i want change design of whole component, so i guess adding custom styles via css will be the best way.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 3 September 2020, 4:40 am EST

  Hi,

  To create a custom theme you may override one of the existing spread theme files. The class names are kept quite descriptive in themselves. So you may use seach feature of text editors to search for the required styles. For example, styles related to scrollbar have class names such as “gc-scroll-container”, “gc-scroll-arrow”, for selection, the class name for selection related styles is “gc-selection”.
  
  Further, SpreadJS also supports jquery UI themes so you may use those too. Please refer to the following demo:
  
  • https://www.grapecity.com/spreadjs/demos/features/theme/external-theme/purejs
  
  • https://www.grapecity.com/spreadjs/docs/v13/online/themeroller.html

  Further, if you face any difficulty with finding class names for any particular feature/element, then please inform us about the same and we would be glad to help.

  Regards
  
  Sharad

• 

  peter

  • Post Options:
  • Link
    Copy

  Posted 4 September 2025, 11:32 pm EST

  Is it possible to list all the class names that can be over-riden, or a way to find these?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 8 September 2025, 7:25 am EST

  Hi,

  There isn’t a single comprehensive list of all CSS classes that can be overridden, but here are some approaches you can use to identify and customize them:

  1. Theme CSS Files
     
     Each SpreadJS theme includes a base CSS file (e.g.,

     gc.spread.sheets.excel2013white.css

     ) that defines the visual appearance. You can search within these files to locate styles for specific elements. For example:
     • Scrollbars → gc-scroll-container, gc-scroll-arrow
     • Selection → gc-selection
     • Tab strip → gc-tabstrip

     theme demo: https://developer.mescius.com/spreadjs/demos/features/theme/spread-theme/purejs)

  2. Custom Theme via CSS
     
     You can duplicate one of the existing theme files, adjust it to your needs, and load it as your own theme. This is often the cleanest way to apply global design changes.

  3. External Themes
     
     SpreadJS also supports applying jQuery UI themes or Bootstrap. You can create a theme using ThemeRoller and apply it directly:
     
     External theme demo: https://developer.mescius.com/spreadjs/demos/features/theme/external-theme/purejs)

  At the moment, we don’t provide a master list of all class names, but if there’s a specific element you’re having trouble styling, please let us know and we’ll point you to the exact class or style you need to override if available.

  Regards,
  
  Priyam