Skip to Main Content

Scalar: An Introduction: Advanced Topics

This is a short introductory guide to using the Scalar publishing platform.

Have More Questions?

Have more questions? Contact The Digital Scholarship Team at for more information and guidance.


You will need to request a registration key from Scalar via the request form. If you are still having trouble, contact the Alliance for Networking Visual Culture at

The page layouts for Scalar automatically place the key image in the center of the page and at a fixed size, a placement which does not always focus on a meaningful portion of the image. Rather than upload a new, cropped version of the image and creating duplicate items, we can move and resize the existing image on the page using CSS in the page editor. The code that is used will be different for each page layout.

In each case, go to Edit Page and locate the Styling tab. Choose CSS.

Book Splash or Splash

The default code for the image in Scalar is controlled by the following:

.splash {

    background-size: cover;

    background-position: center center;


Edit the size and/or position by percentages or pixels.

Image Header

.image_header {

    background-size: cover;

    background-position: center center;


Edit the size and/or position by percentages or pixels.

Say you need an image to annotate another image. Or a timestamp in a video with a page. With Scalar’s flexible structure, you can do that too.

In the basic instructions for annotations, you start with the item you want to annotate. Now, Instead, you’ll go to the secondary item—the one you want added as an annotation to the first item. On the page edit screen, under the “Relationships” tab, select Choose the media that it annotates. You can manually enter the x, y coordinates for the image or the time-stamp for the video.


Widgets allow one to add maps, timelines, visualizations, click-through media galleries, and stylish summaries of related content to Scalar pages using the same formatting options as with media. One can add each of these interactive components anywhere on a page; above, below or within any paragraph. One can also choose to link a widget to text in the main body, that is, to reference a map or timeline the same way one would reference an image or video in Scalar.

When attempting to create a widget, check that all the necessary fields are satisfied. If the User’s Guide says a widget requires a thumbnail, check that the item has a thumbnail set under the “Styling” tab on the Page Editor. If a widget is not working as expected, it is likely because something has been left blank.


With Scalar, you can create interactive annotations for images and videos in addition to annotations for plain text.

Third Party Plugins and Platforms

If Scalar’s built-in widgets don’t quite suit your needs, Scalar allows for embedding on third party material into Scalar Pages. Check out these options for extending the interactivity of your Scalar book.

Text Annotation



Data Visualizations

Further Resources


Sometimes playing with CSS and JavaScript can have unintended consequences. If an experiment goes awry, restore content to a past version using the Book Dashboard.

Select the Version number listed next to an item to get to the Version Editor. Delete the corrupted versions of the item to restore access.

The Version Editor


Publishing Something? We can help!

Butler University Library's Digital Scholarship team can help you navigate the process of starting a journal or digital publication. We provide advising and resources related to digital publishing, open access and scholarly communications, and copyright.

We provide technical support for faculty seeking publication. Request a consultation to learn more.

For students working on class projects, contact or Jennifer Coronado at with questions.

Scholarly Communication Librarian

Profile Photo
Jennifer Coronado
(317) 940-9549


Email Butler University Libraries
Irwin Library: 317-940-9227
Science Library: 317-940-9937

Like us on FacebookInstagramFollow us on Twitter