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:
- PKP Customizing OJS
- W3Schools CSS Tutorial
- MDN Getting Started with CSS
- Codecademy HTML and CSS Course
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.
- 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.
- 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.
- 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.
- HTML: the actual content of the page e.g. the title of your journal
- CSS: the way the page is styled e.g. the background of my title is blue (CSS is the focus of this tutorial)
- First you need to find a colour that you want to use. Use a colour picker to find a hex value for the colour you want to see behind your journal's title. The W3School's Color Picker is one source where you can find hex values.
- Replace the hex value next to 'background-color' with the hex value that you have chosen e.g. in this case I have replaced #069 with #ff9966.
- Open the stylesheet in a text editor e.g. Notepad for Windows or TextEdit for Mac.
- Find the section that looks the same as the one you changed in the Inspect Element screen.
- Change the hex value.
- Save the document.
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
- Instead of going to a colour picker website, you can click on the little colour box next to the hex value and a colour picker will automatically pop up.
- Any lines that are not being used on the page are crossed out, so do not spend time trying to change those.
- Once you leave or refresh the page, you will lose all of the changes you have made in the Inspect Element screen.
- You can use the HTML side of the Inspect Element screen to highlight the section you are working on or choose a new section to work on.
- When you delete a value—e.g. '#fff' or 'uppercase'—from the CSS, the Inspect Element screen will automatically give you a dropdown list of values that you can you to replace the value you just deleted.
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.
Stylesheet: Classic Blue
Stylesheet: Classic Brown
Stylesheet: Classic Green
Stylesheet: Classic Navy
Stylesheet: Classic Red
Stylesheet: Red Bar