University of Toronto Crest

Journal Publishing Guide

Designing Your Journal

The look and feel of an OJS-based website can be customized by editing one or more stylesheets. While fairly complex designs are possible, simpler designs will be easier for you and your editorial team to maintain. Please visit the OJS customization guide for more information about customizing the look and feel of your journal. Please note that the JPS staff does not provide customizations to journal websites.

External help for customizing your journal

Here is a list of resources that can be used help you customize your journal:

Journal customization tutorial

Custom Style Sheets (CSS) are used to control the colour, typography, and layout of webpages. One way to learn about how to use sytlesheets is by using the Inspect Element action from the right-click menu in Google Chrome, Mozilla Firefox, Internet Explorer, and Safari. Follow along with this step-by-step guide to learn how Inspect Element works.

  1. Choose a theme for your journal. If you are not sure how to choose a theme, work through the Journal Setup page—Step 5 in particular—to learn how to complete this task. For this guide, I will be using the Classic Blue theme featured below.
  2. Download the stylesheet that corresponds to this theme. Links to these stylsheets are available in the Available Stylesheets section of this page. You will be using this stylesheet to update the look and feel of your journal after deciding which changes you would like to make.
  3. Right-click on the title of your journal—in this case 'Demonstration Journal'—and click 'Inspect Element'. An Inspect Element screen similar to the one below will appear. The HTML for the page is shown on the left side and the CSS is on the right side.
  4. Change the background colour for your journal's title.
  5. Once you find a color that you like, update the stylesheet that you downloaded in Step 2.
  6. Upload your custom stylesheet to 'Journal style sheet,' which is available in section 5.6 of the journal's setup.

Example Changes

Here are a few examples of how you can modify the theme for your journal.

Different Background Colour on Hover

This screenshot shows a colour change to a link's background when the mouse hovers over it. If you've tried to execute this same change, you may have noticed that you have to scroll down to reach 'a:hover' section. It is important to note that you can only make modifications to the sections that come from the theme you are customizing. For example, I can only make modifications to the stylesheet classicBlue.css.

Remove Uppercase for Heading

Here I modified the CSS so that the heading would not be in uppercase.

Change Header Font to Monospace

In this case, I changed the header font by modifying the font-family in the CSS.

Tips and Tricks

Available Stylsheets

JPS provides several built in stylesheets which you can use or modify to met your design goals. Below are links to these stylesheets and sample screenshots of the stylesheets in action.

Classic Blue

ClassicBlue Screencapture

Stylesheet: Classic Blue

Classic Brown

Classic Brown Screencapture

Stylesheet: Classic Brown

Classic Green

Classic Green Screencapture

Stylesheet: Classic Green

Classic Navy

Classic Nvay Screencapture

Stylesheet: Classic Navy

Classic Red

Classic Red

Stylesheet: Classic Red

Desert

Desert Screencapture

Stylesheet: Desert

Lilac

Lilac Screencapture

Stylesheet: Lilac

Night

Night Screencapture

Stylesheet: Night

Red Bar

Red Bar Screencapture

Stylesheet: Red Bar

Steel

Steel Screencapture

Stylesheet: Steel

Uncommon

Uncommon Screencapture

Stylesheet: Uncommon

Vanilla

Vanilla Screencapture

Stylesheet: Vanilla