Customize Your Anthology’s CSS

Rationale

There are three aspects of an anthology that can be customized:
Some components of the basic HTML framework used to create pages.
The CSS styling of the site.
Site functionality (via JavaScript).
This documentation will explain which pieces of the CSS you may modify and offer a suggested workflow for doing so. In this documentation, {anthId} means the id of the target anthology, such as dre or qme.

Where to Customize Your Anthology’s CSS

You can customize your anthology’s styling by overriding LEMDO’s standard SCSS. You will do so in your {anthId}.scss file, which is housed in the lemdo/data/anthologies/{anthId}/site/css folder. Your anthology .scss file is compiled at build time to create {anthId}.css, which is then placed in the css folder in the anthology build output, and linked into the HTML files after the default lemdo-dev.css file. Doing so ensures that your anthology styling overrides LEMDO’s standard styling in all of your HTML files. Important: Do not svn add your {anthID}.css or {anthId}.map.css files. These are generated files, created from the .scss file in that folder, and should never be tracked by svn.
You need to become familiar with LEMDO’s standard styling and how it is organized before you begin work on your anthology’s .scss file. For information on LEMDO’s standard style, see Introduction to LEMDO’s SCSS.

What to Customize in Your Anthology’s CSS

LEMDO has some expectations for what anthologies customize in their .scss files. You must customize your anthology’s:
Logo
Favicon
You may customize your anthology’s:
Banner/header
Top navigation bar appearance
Colour palette
Footer appearance
Side panels (i.e., hamburger menu, metadata pane, and annotation/collation pane)
Font family
Splash image
We strongly recommend that you do not customize styling in either modernized or semi-diplomatic texts.
You may not make any CSS customizations that remove accessibility functions from your anthology website.

Create Custom Styling

LEMDO uses many different CSS selectors. Some are global, like var(--highlightColor), but others appear only in certain zones of the site, like side menus or top navigation components. Where possible, CSS variables have been organized in the ._variables.scss file used by LEMDO into five different regions: Left Panel, Top Navigation, Main Content, Popup, and Footer.

                        Screenshot of a play on the LEMDO website with the following sections labelled: 1 Left Panel, 2 Top Navigation, 3 Main, 4 Popup, and 5 Footer. Left panel is on the left side of the page, top navigation is the menu bar at the top of the page, main is a large section in the middle of the page, popup is a window on the right side of the page, and footer is at the bottom of the page.
LEMDO site regions.
Overriding highlight colours, fonts, and typography can be done using the SCSS variables, allowing for a change done once in the .scss file to appear everywhere the variable is applied, but it is not a requirement. Sometimes it will be more efficient to use an inspector to locate the element that you wish to change and add that element directly to your site’s .scss file in order to make the change.

Recommended Workflow for CSS Customization

We recommend that developers working on CSS customization download a local copy of their anthology website from our Jenkins server, make and test their changes locally, and then commit their changes to the shared LEMDO repository. You must commit at the end of each work session, though you are welcome to commit more often; frequent commits make it easier to check for bugs and make necessary fixes.
To follow our recommended workflow:
Run ./getSiteFromJenkins.sh {anthId} (replacing {anthId} with your anthology’s ID) from the lemdo directory in your command line. Doing so will download a complete copy of the latest build of your anthology from our Jenkins server and place it in the products directory inside your local copy of the LEMDO repository.
Open your local copy of the main anthology site by navigating into the products/{anthId}/site directory and opening any of the .html files therein.
Make your changes in the data/anthologies/{anthId}/site/css/{anthId}.scss file.
At the command line, test your changes by running ant -f build_anthology.xml updateAnthology -Danthology.id={anthId}. Doing so will copy all JS, images, and font files over to the locally built site, and run SASS to build the .scss file to create a .css file in the css folder.
Super reload your local copy of the site to check if your changes achieved the desired outcome.
Commit your changes, ensuring you svn add any new images or font files before committing.
It will take a few hours for the Jenkins site to rebuild your anthology with your customizations.

Example: Font-Style Changes

If you wanted to change to change the sans-serif style font from Alegreya (the default) to Arial you could change the css variable --primarySans from:
--primarySans: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
to:
--primarySans: Arial, sans-serif;
Doing so will change the font-face across your anthology’s entire site.
You can also use a developer tool to locate the HTML element being styled, recreate it in your .scss file, and override the style that way. You may want to do this if the element you are changing does not have a variable applied to it, or if you do not wish an existing variable to be applied.

Prosopography

Janelle Jenstad

Janelle Jenstad is a Professor of English at the University of Victoria, Director of The Map of Early Modern London, and Director of Linked Early Modern Drama Online. With Jennifer Roberts-Smith and Mark Kaethler, she co-edited Shakespeare’s Language in Digital Media: Old Words, New Tools (Routledge). She has edited John Stow’s A Survey of London (1598 text) for MoEML and is currently editing The Merchant of Venice (with Stephen Wittek) and Heywood’s 2 If You Know Not Me You Know Nobody for DRE. Her articles have appeared in Digital Humanities Quarterly, Elizabethan Theatre, Early Modern Literary Studies, Shakespeare Bulletin, Renaissance and Reformation, and The Journal of Medieval and Early Modern Studies. She contributed chapters to Approaches to Teaching Othello (MLA); Teaching Early Modern Literature from the Archives (MLA); Institutional Culture in Early Modern England (Brill); Shakespeare, Language, and the Stage (Arden); Performing Maternity in Early Modern England (Ashgate); New Directions in the Geohumanities (Routledge); Early Modern Studies and the Digital Turn (Iter); Placing Names: Enriching and Integrating Gazetteers (Indiana); Making Things and Drawing Boundaries (Minnesota); Rethinking Shakespeare Source Study: Audiences, Authors, and Digital Technologies (Routledge); and Civic Performance: Pageantry and Entertainments in Early Modern London (Routledge). For more details, see janellejenstad.com.

Joey Takeda

Joey Takeda is LEMDO’s Consulting Programmer and Designer, a role he assumed in 2020 after three years as the Lead Developer on LEMDO.

Mahayla Galliford

Project manager, 2025-present; research assistant, 2021-present. Mahayla Galliford (she/her) graduated with a BA (Hons with distinction) from the University of Victoria in 2024. Mahayla’s undergraduate research explored early modern stage directions and civic water pageantry. Mahayla continues her studies through UVic’s English MA program and her SSHRC-funded thesis project focuses on editing and encoding girls’ manuscripts, specifically Lady Rachel Fane’s dramatic entertainments, in collaboration with LEMDO.

Martin Holmes

Martin Holmes has worked as a developer in the UVic’s Humanities Computing and Media Centre for over two decades, and has been involved with dozens of Digital Humanities projects. He has served on the TEI Technical Council and as Managing Editor of the Journal of the TEI. He took over from Joey Takeda as lead developer on LEMDO in 2020. He is a collaborator on the SSHRC Partnership Grant led by Janelle Jenstad.

Navarra Houldin

Training and Documentation Lead 2025–present. LEMDO project manager 2022–2025. Textual remediator 2021–present. Navarra Houldin (they/them) completed their BA with a major in history and minor in Spanish at the University of Victoria in 2022. Their primary research was on gender and sexuality in early modern Europe and Latin America. They are continuing their education through an MA program in Gender and Social Justice Studies at the University of Alberta where they will specialize in Digital Humanities.

Nicole Vatcher

Technical Documentation Writer, 2020–2022. Nicole Vatcher completed her BA (Hons.) in English at the University of Victoria in 2021. Her primary research focus was women’s writing in the modernist period.

Patrick Szpak

Patrick Szpak is a Programmer Consultant and Web Designer in the Humanities Computing and Media Centre at the University of Victoria.

Sofia Spiteri

Sofia Spiteri is currently completing her Bachelor of Arts in History at the University of Victoria. During the summer of 2023, she had the opportunity to work with LEMDO as a recipient of the Valerie Kuehne Undergraduate Research Award (VKURA). Her work with LEMDO primarily includes semi-diplomatic transcriptions for The Winter’s Tale and Mucedorus.

Tracey El Hajj

Junior Programmer 2019–2020. Research Associate 2020–2021. Tracey received her PhD from the Department of English at the University of Victoria in the field of Science and Technology Studies. Her research focuses on the algorhythmics of networked communications. She was a 2019–2020 President’s Fellow in Research-Enriched Teaching at UVic, where she taught an advanced course on Artificial Intelligence and Everyday Life. Tracey was also a member of the Map of Early Modern London team, between 2018 and 2021. Between 2020 and 2021, she was a fellow in residence at the Praxis Studio for Comparative Media Studies, where she investigated the relationships between artificial intelligence, creativity, health, and justice. As of July 2021, Tracey has moved into the alt-ac world for a term position, while also teaching in the English Department at the University of Victoria.

Orgography

LEMDO Team (LEMD1)

The LEMDO Team is based at the University of Victoria and normally comprises the project director, the lead developer, project manager, junior developers(s), remediators, encoders, and remediating editors.

Metadata