How to use custom CSS for your OJS?

OJS, or Open Journal Systems, is a popular open-source software for managing and publishing academic journals. One of the many features of OJS is the ability to customize the look and feel of your journal using CSS, or cascading style sheets. In this article, we’ll take a look at how to use custom CSS in OJS to modify the appearance of your journal. When you are able to add code to CSS you are able to make a unique appearance in your OJS including typography, color, the position of a component, adding an image background, and other things. In this interlink article, you can use the CSS to change the font of the journal theme with the detailed steps

Step 1: Accessing the CSS Upload Feature in OJS or OMP

The first step to using custom CSS in OJS is to access the CSS editor. To do this, you’ll need to log in to your OJS installation as an administrator. Once you’re logged in, click on the “Settings” tab at the top of the screen, and then select “Website” from the dropdown menu. On the “Website” settings page, scroll down until you see the “Appearance” section, and then click on the “Advanced” button next to the “Journal Stylesheet (CSS)” option.

In this section, you can add the custom CSS by creating a new file on your local computer, for example, add new file and name it custom.css, this file can be uploaded by clicking the Upload File

Step 2: Writing Custom CSS

Once you’re in the CSS editor, you can start writing your custom CSS. The editor will display the default OJS stylesheet, but you can modify it by adding CSS rules. CSS rules are written in a syntax that consists of a selector, followed by curly braces that contain one or more properties and values.

For example, to change the background color of the header of your OJS journal, you could add the following CSS rule:

h1 {
    background-color: #f1f1f1;
}

This rule targets the h1 element on your journal’s website and sets its background color to #f1f1f1.

Step 3: Saving and Applying Your Custom CSS

Once you’ve written your custom CSS rules by using your favorite text editors such as VScode, Notepad++, or others, you’ll need to save them and apply them to your journal’s website. To do this, click the “Save” button in the text editor. Your changes will be saved, and your custom CSS will be applied to your journal’s website.

Step 4: Clear your browser cache

After you have created a CSS file, follow Step 1 to upload your CSS file to the OJS. The change to your frontend journal appearance only displayed after you have cleared your OJS cache. Read here for the guide on How to clear your OJS / OMP cache ?

If you want to make further modifications to your custom CSS, you can return to the CSS editor and edit your rules. You can also preview your changes by clicking on the “Preview” button in the editor.

In conclusion, using custom CSS in OJS can help you create a unique and personalized look for your journal’s website. By following the steps outlined in this article, you can easily modify the appearance of your OJS installation to match your preferences and needs. Happy customizing!

More resources about CSS #

1. https://www.w3schools.com/css/
2. https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS

Muhammad Hendra

Project Manager

Hendra here, I love writing about OJS and share knowledge about OJS. My passion is about OJS, OMP platform and doing some research on creating innovated products for that platform to help publisher to improve their publication.