NetLogo Web Appearance and Styling

The appearance of NetLogo Web is designed to be reasonably easy to change using standard CSS. Some elements are styled directly by templating code and somewhat hard to change, but many elements are styled using HTML element classes for use by CSS declarations in the project files which are easy to tweak.

Pages

The most common entry point to running models on NetLogo Web is the launch page. This is not the only way to run models, since they can be run as a simpler, single-purpose page which does not include the whole NetLogo Web wrapping site, and also via the standalone page, which is used when you export a model as HTML. Any changes to styles probably want to consider effects on all the model-running entry points.

Stylesheets

All stylesheets are kept in the public/stylesheets folder of the Galapagos repository.

• When not running models standalone, NetLogo Web provides a standard navigation and theming through a common wrapper template. The styles are kept in the theme.css file.
• Colors for NetLogo syntax are in the netlogo-syntax.css file.
• The general styles for the model simulation page (used across the launch, web and standalone pages), are in the tortoise.css file.
• The actual styles for a model, including things like widgets and the command center, info, and code tabs, are kept in widgets.css with some extra pieces in netlogoweb.css.
• Some generic styles used across components in NetLogo Web are contained in classes.css.

It may take some poking around in your favorite browser's web developer console to find the exact class name we use for things, but there probably is one there somewhere if you want to try tweaking the appearance.

Libraries

Some styling in NetLogo Web is defined by external libraries - particular Highcharts used by our model plots and CodeMirror for our code syntax highlighting. These libraries have their own styling systems.