Index of /includes/scripts/textboxio/theme

 NameLast modifiedSizeDescription
 Parent Directory   -  
 examples/ 2024-07-04 22:09 -  
 src/ 2024-07-04 22:09 -  
 package.json 2024-07-04 20:49 586  
 Gruntfile.js 2024-07-04 20:49 1.1K 
 theme.css 2024-07-04 20:49 3.5K 
Textbox.io theme builder Live Reload:

Textbox.io Theme Tooling

Welcome to the theme tool for Textbox.io. This tool requires knowledge of CSS syntax and familiarity with command line tools (see "Building your theme" below).

Note: This tool can be used directly from the local filesystem by Chrome, FireFox and Safari. No web server is required unless using Internet Explorer or Edge due to local filesystem security restrictions.

To create a theme:

Note: Compiled themes are specific to the version of Textbox.io deployed. When deploying a Textbox.io update you will need to recompile and redeploy your theme.

 
Building your theme

To begin the theme builder process:

  1. If you don't have nodejs version 5 or above installed, follow the instructions at https://nodejs.org/. If you are still using version 4 please contact us for assistance.
  2. Inside the folder where you found this document, execute the command npm run watch. The first time you do this it may take a minute to download the grunt and postcss tools.
  3. Once you see grunt is Waiting... refresh this page. If the status box in the top right does not turn green, wait a bit and try again.

At this point any changes to theme.css will automatically reload in this page after a few seconds. As this page references the the /textboxio folder directly, you can rest assured uploading the editor distribution to your server will use the theme correctly.

Troubleshooting

Rather than live reloading, you can execute npm run build for once-off CSS compilation. Reloading the page will then load the new CSS file (browser cache permitting).

Tips

The Textbox.io UI is designed with contrast in mind. While theme.css is flexible enough to create a completely flat editor (for example, by using the same background color for the main toolbar and more drawer) it is not recommended. Variables are linked in the default theme.css to generate related colors in the UI.

Two cssnext features are used in the default theme.css:

  1. CSS variables are starting to become common, but if you haven't seen them before the syntax is quite easy to use.
    http://cssnext.io/features/#custom-properties-var
  2. The CSS color function is still very new, but it's also very handy. Be sure to look at the list of color modifiers; the default style uses only alpha and lightness but there are plenty available.
    http://cssnext.io/features/#color-function

Our team has created some sample themes for your inspiration and enjoyment. Ephox takes no responsibility for themes created in poor taste.