Blog

Signals Blog

Styling the ChemWriter Editor with CSS

Customizing the appearance of page elements through CSS has been a staple of Web development for many years. ChemWriter's Editor component renders itself using DOM elements, making fine-grained customization possible using CSS. Read on to learn how to use this capability.

About chemwriter.css

The chemwriter.css file defines on-screen appearance of Editor components. To prevent collisions with other definitions appearing on the same page, each class name uses the prefix chemwriter-.

For example, the appearance of Editor's top-level DOM element is defined by a set of rules defining size, border, background color and box sizing model.

ChemWriter Editor top-level DOM element styling
/*
 * Main Editor window
 */
.chemwriter-editor {
  width: 100%;
  height: 100%;
  position: relative;
  border: 2px solid gray;
  border-radius: 5px;
  background-color: #dcdcdc;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

Changing any attribute is a simple matter of modifying the CSS class. Although in principle it's possible to do so by directly editing the chemwriter.css file, this is not recommended because the stylesheet regularly gets updated with new releases.

A far better approach would be to override the chemwriter-editor class with the specific change of interest.

Overriding chemwriter.css
/*
 * Ensure that this definition loads after chemwriter.css
 */
.chemwriter-editor {
  border: 2px solid red;
}

However, all classes defined in chemwriter.css are subject to change at any time. The situation is similar to undocumented API methods. They are intended for internal use only and can change without notice - wrecking anything built on top.

What's needed is a set of stable ChemWriter CSS classes that are safe to override.

Introducing chemwriter-user.css

To provide a safe mechanism for customizing ChemWriter component appearance, chemwriter-user.css has been introduced. This file defines those classes that can be safely overridden. Unlike chemwriter.css, chemwriter-user.css can either be edited directly, or used as a template.

Currently-usable CSS classes
/* Main Editor window */
.chemwriter-editor { }

/* Editor button */
.chemwriter-button { }

/* Hovering over an enabled button */
.chemwriter-button-enabled:hover { }

/* Disabled Editor button */
.chemwriter-button-disabled { }

/* Pressed button */
.chemwriter-button-pressed { }

/* About button */
.chemwriter-button-about { }

/* Editor button icon. Font "ChemWriter Symbols" is defined in */
/* chemwriter.css. To change button icons, use a different font. */
.chemwriter-icon { }

/* The small triangle that appears to the lower-right of button icons. */
.chemwriter-detail-disclosure { }

/* Use a small triangle shape */
.chemwriter-detail-disclosure:after { }

/* The main structure display area. */
.chemwriter-document-view { }

/* IE8 only */
.chemwriter-fallback-content { }

Styling the Editor

A site may use a dark color theme. As a result, the Editor might show up better given a dark theme for it as well. This can be accomplished by overriding a few of the class definitions contained in chemwriter-user.css.

Dark-Themed ChemWriter Editor
body {
  background-color: black;
}
.chemwriter-editor {
  background-color: #808080;
  border: 1px solid #b0b0b0;
}

.chemwriter-button {
  color: #e0e0e0;
  text-shadow: 0 1px #000000;
}

.chemwriter-button-disabled {
  color: #a0a0a0;
}

Conclusions

ChemWriter components such as Editor are built from standard HTML5 elements and can be styled with CSS. The newest release makes it possible to reliably customize many aspects of Editor's appearance.