Blog

Signals Blog

Building Mobile and Web Applications in Chemistry Part 3: Styling and Theming ChemWriter with CSS

The last article in this series outlined some simple customizations that would enable ChemWriter to be deployed on iPad devices. ChemWriter offers many opportunities to customize the look of the structure editor by editing a single CSS file. This article will discuss how ChemWriter uses CSS and explains our long-term plans for enabling visual customization and theming.

Quickstart: Changing Editor Size

Every ChemWriter deployment will require at least one customization to re-size the editor in a page - here's how.

After downloading the SDK, create a working directory that contains the files chemwriter.js, chemwriter.css, and chemwriter-custom.css. Then add an HTML file containing the following markup:

<!DOCTYPE HTML> 
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9">
    <link rel=stylesheet href="chemwriter.css" type="text/css" media=screen />
    <link rel=stylesheet href="chemwriter-custom.css" type="text/css" media=screen />
    <script src="chemwriter.js"></script>
  </head>
  <body>
    <div id="editor"></div>
    <script>
      chemwriter.loadEditor('editor', { });
    </script>
  </body>
</html>
 

Next, edit chemwriter-custom.css to set the editor's size to 500x350 pixels:

.chemwriter .editor {
  width: 500px; height: 350;
}
 

Similarly, the size of a painter can be changed with:

.chemwriter .painter {
  width: 190px; height: 130px;
}
 

That's all there is to it. ChemWriter uses exactly the same standard mechanism for changing overall appearance that's use by every other page element.

A Stylesheet API

Modifiable styles represent a kind of API in that they are a contract between ChemWriter and your application that styling will work a certain way. You shouldn't have to change your own stylesheets to apply a ChemWriter update any more than you should have to update your JavaScript.

We're committed to building CSS stability into ChemWriter. The way we're doing this is through the chemwriter-custom.css file.

Our intent is that this file should contain the definitive collection of stable ChemWriter CSS selectors. The most recent 2.8.0 release marks the first time this file has been included with the ChemWriter SDK. This release is also contains global changes to the chemwriter.css file that prefix every selector with the .chemwriter selector to prevent collisions with styles defined elsewhere on you page.

If you plan to modify the appearance of ChemWriter through CSS, the preferred way for doing so is not to modify chemwriter.css, but rather chemwriter-custom.css. Doing so will ensure you're styles won't be broken by subsequent ChemWriter releases.

Toward ChemWriter Themes

Coherent visual layout and appearance can be important factors in application usability and acceptance. For example, if your site doesn't use rounded corners, the default rounded corners of ChemWriter may be distracting. If your site uses a dominant color, you may want to either contrast or blend that color into the structure editor.

The combination of these visual customizations (available through CSS), and behavioral customizations (through the JavaScript API) constitute a theme. A theme can be applied across an organization to give each editor session a consistent look and feel that reduces learning curves.

Conclusions

ChemWriter leverages the power of CSS to enable visual customizations of the editor. Future articles will document new additions to the stable CSS selectors with illustrative examples.