In this guide, I will show how to create a custom theme for your SpreadJS application using the ThemeRoller tool from jQuery UI. We'll walk through the process step by step to apply a unique look to your spreadsheet app very easily.
Step 1: Open the ThemeRoller Tool
We will start by visiting the Jquery ThemeRoller at https://jqueryui.com/themeroller. Once the page loads, ensure you're on the "Theme" tab.
On the left-hand side, you'll find various customization options to help you style your theme. Under the "Roll Your Own" section, you can adjust the following settings to create a theme that suits your design:
Font settings: You can choose fonts and text styles
Corner radius: Adjust the roundness of corners
Header/Toolbar: Customize the appearance of headers and toolbars
Content: Here you can define styles for content areas
Clickable default state: Style for buttons and links on default state
Clickable hover state: Define hover behavior for clickable elements
Clickable active state: Customize the active state
Highlight: Set colors for highlighted elements
Error: Here you can specify error message style
Modal screen for overlays: Configure the modal overlay appearance
Drop shadows: Adjust the shadow effect for UI elements
Once you've configured your preferred settings, click the "Download Theme" button to save your customized theme.
Step 2: Add the theme you downloaded to your SpreadJS project
To apply your new theme in a SpreadJS sample project, follow these steps:
1.Create a folder in your project directory "css/your-theme-name"
2.Add the “jquery-ui.css” file from the downloaded theme package into this folder.
3.Drag and drop the “images folder” (included in the download) into the same theme folder.
The most important part is including the the theme in your HTML file. Make sure to place the link after the SpreadJS CSS reference: <link href="css/green-theme/jquery-ui.css" rel="stylesheet" />
Once you've followed these steps, launch your SpreadJS app. You should now see your customized UI theme applied across the spreadsheet interface without the need to write CSS from scratch.
Kristina Ismail