Before setting up your website’s appearance on the dashboard, it might be worth taking a moment to think about what makes your journal stand out from other journals in your field of study. A visually appealing and well-thought-out website can contribute to your journal’s credibility.
When making changes to your journal’s design, make sure to choose colours and design elements that will be accessible for all users. To find out more, see Inclusive and Accessible theming.
OJS 3’s dashboard allows for some personalisation without having to alter the HTML and CSS code. In any basic OJS installation, there are three main components that you can adjust to own your website’s look and feel and build your journal’s identity:
When selecting the colour scheme for your journal, stick to simple palettes composed of grayscale with one or two accent colours. This will help your website look professional and uncluttered. Most default themes will only allow for one or two colours; make sure the chosen colours do not obstruct the text or any images on your website.
Theme colours in OJS can be edited under Website > Appearance > Theme. You can select a colour by using a slider or entering the HEX value for the colour (e.g. #10BECA). It is possible to further customize your site’s colours with CSS, but we do not recommend this for beginners.
For more information about accessible colour choices and screenshot examples, see Inclusive and Accessible Theming – Colours.
Different typefaces and fonts can convey different tones. The OJS 3 default theme offers a few pairing options under Website > Appearance > Theme.
To customize fonts in other themes, you will have to edit CSS stylesheets manually.
As with your colour scheme, it is preferable to keep it simple and stick to a single typeface which includes bolds and italics. If you are writing in different scripts or languages, make sure that the selected typeface includes these special characters.
Typeface choice is a crucial element of your website, as it can affect legibility and readability of your content.
If you wish to use different typefaces for the headings and the body text, the same rules apply. However, make sure that you select a secondary typeface that pairs well with the primary one. Make sure to use display typefaces for headings exclusively, as they are designed to be used for larger text and not extended paragraphs of text.
The various themes of OJS provide options for using custom images throughout in order to enhance the look and feel of your journal. Accepted file formats for images include JPG and PNG, although journal managers and journal editors should consider the placement and function of each image when selecting an image file format and size.
OJS 3’s dashboard allows journal editors and journal managers to upload image files for the following elements:
Any photographs and graphics used in your journal should reflect the rest of your website’s brand. It is always preferable to avoid generic stock images or clip art and to make sure to stick to larger-format and high-resolution photographs and graphics. If you would like to display interesting and unique images but do not have the means to purchase them, there are many repositories of openly licensed (typically Creative Commons-licensed) or public domain images, such as:
*Note that the use of most Creative Commons-licensed material requires that you give credit for images used. The typical mode of attribution is Title, Attribution, Source, License. For example:
“Journal of Information Technology & Politics” by justgrimes is licensed under CC BY-SA 2.0
If you decide to create or use your own graphics (e.g., you or someone on your team is in charge of creating logos, graphic assets such as icons), make sure that you keep the original lossless files (in SVG, AI, etc.). Save any non-photographic images in PNG, and make sure that these images are not compressed or stretched once uploaded on your website.
The Logo is the image that represents the journal and is displayed at the top of most themes. We generally recommend that logos should be:
The Home page image is the large feature image on the homepage on some themes, such as the Default, Manuscript, and Health Sciences themes. Some general recommendations for Home page images include:
The Journal Thumbnail is a small image used for OJS installations with multiple journals displayed next to the journal title on the list of all journals on the site. Some general recommendations for Journal Thumbnail images are to use images that are:
The Issue Cover Image is the image displayed alongside the issue information of past issues and beside the issue information for the current issue seen on the homepage. Some general recommendations for Issue Cover Images is that they should be:
Article Images are displayed beside the title and contributor list of each article. Article cover images should be:
The recommended image dimensions will vary depending on the base theme you have selected and how image sizes are coded in the theme.
For the Health Sciences and Classic themes, detailed information about images and dimensions can be found in their README files:
Other themes do not have image information in their README files. See the Themes chapter of the Theming Guide for further information on these themes.
The size and manner in which images are displayed can be altered by uploading a custom CSS file.
In OMP you can configure the size of your book cover thumbnails under Website Settings > Appearance.
It is not possible to adjust the size of an image you have uploaded to OJS through the OJS interface. Instead you should edit the image dimensions in an image editor application outside of OJS and then upload the image in OJS. You can adjust image sizes with a custom CSS file, but this could affect accessibility and responsiveness.