OJS Theme Customization: CSS, Header, Footer & Homepage

Before you start your OJS theme customization

OJS theme customization works in layers. Most journals get a professional result from the first three layers alone, without touching any theme files:

1. Theme options and Appearance settings

   Colours, fonts, logo, homepage image, footer, sidebar and menus. No code.

2. Content-driven design

   Custom blocks, About/Contact/policy pages and homepage text. A little HTML at most.

3. A custom journal stylesheet

   Your own CSS rules loaded after the theme's styles.

4. A child theme

   A small plugin that inherits the Default theme and changes its styles or templates. Developer level.

Before you change anything on a live journal:

• Back up the database and the public/ folder (logos and stylesheets live there).
• Test risky changes on a staging copy or a test journal on the same installation.
• Keep your CSS and footer HTML in a text file with dates, so you can undo a change.
• Choose your base theme first. Our comparison of free OJS themes helps; the examples below use the Default theme because it is built in, accessible and the easiest to extend.

The steps are the same whatever language you search in, whether "how to design an OJS theme" or "cara custom theme OJS".

Level 1: the theme customization dashboard

The "dashboard" for design is Settings → Website → Appearance, which has three tabs in OJS 3.3, 3.4 and 3.5:

Set your brand colour here first. Changing the theme's colour option recolours the header, menus and focus states consistently, which is cleaner than overriding colours with CSS.

Logo, homepage image and favicon

Logo

Upload it under Appearance → Setup → Logo and always fill in the alt text (usually the full journal name). The Default theme limits the logo height to about 80 pixels on desktop and less on phones, so a wide logo works better than a tall one. Upload a PNG at roughly twice the display size so it stays sharp on high-resolution screens, with a transparent background if it sits on a coloured header.

Homepage image

Upload it under Appearance → Setup → Homepage Image. In the Default theme it appears full width below the header, or behind the header if you tick the header background option. Practical rules for OJS homepage images:

• Use a wide image (around 2000 pixels across) and compress it; a heavy image slows down every visit to your homepage.
• Choose something relevant to your field, not generic stock photography of handshakes or laptops.
• Do not put important text inside the image. Search engines and screen readers cannot read it, and it becomes unreadable on phones.

Favicon

Upload a small square icon (for example 32 × 32 or 48 × 48 pixels, PNG or ICO) under Appearance → Advanced → Journal Favicon. It appears in browser tabs and bookmarks, and its absence is one of the small details that makes a journal site look unfinished.

Professional OJS footer design (ready-to-paste HTML)

The footer is the most underused area in OJS. It appears on every page, so it is the right place for the information authors and indexers look for: ISSN, publisher, licence, contact and policy links. Edit it under Settings → Website → Appearance → Setup → Page Footer. Click the source code button (<>) in the editor toolbar and paste HTML like this, replacing everything in square brackets:

<div class="journal-footer">
  <div class="journal-footer-col">
    <p><strong>[Journal Name]</strong><br>
    ISSN (Online): [XXXX-XXXX] | ISSN (Print): [XXXX-XXXX]<br>
    Published by [Publisher or University Name], [City, Country]</p>
    <p>Editorial office: <a href="mailto:[editor@yourjournal.org]">[editor@yourjournal.org]</a></p>
  </div>
  <div class="journal-footer-col">
    <p><strong>Policies</strong></p>
    <ul>
      <li><a href="[https://yourjournal.org/index.php/abbr/about]">Aims and Scope</a></li>
      <li><a href="[link to peer review policy]">Peer Review Policy</a></li>
      <li><a href="[link to ethics policy]">Publication Ethics</a></li>
      <li><a href="[link to open access policy]">Open Access Policy</a></li>
      <li><a href="[https://yourjournal.org/index.php/abbr/about/privacy]">Privacy Statement</a></li>
    </ul>
  </div>
  <div class="journal-footer-col">
    <p><strong>Licence</strong></p>
    <p>Unless otherwise stated, articles are published under a
    <a href="https://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons
    Attribution 4.0 International License</a>.</p>
  </div>
</div>

Then add these rules to your journal stylesheet (see custom CSS below) to lay the footer out in columns that stack on phones:

.journal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}
.journal-footer-col {
  flex: 1 1 220px;
}
.journal-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.journal-footer li {
  margin-bottom: 0.4rem;
}

The rich text editor may tidy up pasted markup. If it removes your classes, paste simpler HTML (paragraphs and links) and style it with .pkp_footer_content instead. Policy links should point to real pages; our journal policy templates give you editable text for each one.

Sidebar blocks and navigation menus

Sidebar blocks (Custom Block Manager)

The Custom Block Manager plugin ships with OJS. Enable it under Settings → Website → Plugins → Installed Plugins, click Manage Custom Blocks below its name, then Add Block. Good uses for custom blocks are:

• A "Submit a manuscript" link to the submission page.
• Journal information: ISSN, publication frequency, peer review type, licence.
• A current call for papers with its deadline.
• Links to the editorial board and author guidelines.

Place and order blocks by dragging them under Appearance → Setup → Sidebar. Keep it to four or five blocks. In themes such as Health Sciences, Classic, Immersion and Pragma, these blocks appear in the footer area rather than beside the content.

Navigation menus

Menus live under Settings → Website → Setup → Navigation. Edit the Primary Navigation Menu by dragging items in and out, and create new links with Add Item (an existing OJS page, a remote URL or a custom page). A clear menu for an academic journal looks like this:

• Current and Archives
• About: About the Journal, Aims and Scope, Editorial Team, Policies, Indexing, Contact
• For Authors: Author Guidelines, Submit a Manuscript
• Announcements (if you publish calls for papers)

Short menus work better. Some items, such as Announcements or Register, only show when the related feature is enabled or the user is logged out.

Custom About, Contact and policy pages

You can add new pages in two ways:

• Navigation Menu Items → Add Item → Custom Page: a built-in way to create a simple page with a title, path and content.
• Static Pages plugin: included with OJS 3.3, 3.4 and 3.5. Enable it under Installed Plugins, refresh, then use the new Static Pages tab under Settings → Website to add pages with a path, title and preview. Add each page to a menu afterwards.

Use these for Aims and Scope, Peer Review Policy, Publication Ethics, Open Access, Indexing and Archiving. Choose short, permanent paths such as peer-review-policy, because indexers and authors will link to them.

Contact page design

The built-in Contact page is filled from Settings → Journal → Contact (principal contact, technical support contact and mailing address). Complete every field with institutional email addresses rather than personal webmail. If you need more, such as separate contacts for submissions, technical problems and permissions, create a custom "Contact" page with those details and link it from the menu instead of the default one.

Custom CSS in OJS: upload a journal stylesheet

Custom CSS is the safest way to change the design beyond the theme options. In OJS 3.3, 3.4 and 3.5:

1. Find what to change

   Open your journal, right-click the element and choose Inspect. The browser shows its HTML class and current CSS. Test changes live in the developer tools first.

2. Write a plain CSS file

   Save your rules in a text editor as, for example, journal-style.css. Only plain CSS works here, not LESS or SCSS.

3. Upload it

   Go to Settings → Website → Appearance → Advanced → Journal Style Sheet, upload the file and save. OJS loads it after the theme's stylesheet, so your rules win when the selectors are equally specific.

4. Re-upload to update

   To change it later, edit your local copy and upload it again. Keep the file under version control or at least dated backups.

The stylesheet applies whichever theme is active, so re-test it if you ever switch themes.

CSS snippets for the Default theme

These snippets target class names used by the Default theme templates in OJS 3.3, 3.4 and 3.5 (checked against PKP's source code). The Default theme switches to its desktop layout at 992 pixels, so desktop-only rules use that breakpoint. Replace the colours with your own.

/* ===== Header ===== */
.pkp_structure_head {
  background-color: #0b3d63;            /* or set it in the theme's Colour option */
  border-bottom: 4px solid #f2a900;     /* accent line under the header */
}

/* Larger logo on desktop only (the theme default is 80px) */
@media (min-width: 992px) {
  .pkp_site_name .is_img img {
    max-height: 110px;
  }
}

/* Journal title when no logo is uploaded */
.pkp_site_name .is_text {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ===== Primary navigation (desktop) ===== */
@media (min-width: 992px) {
  .pkp_navigation_primary > li > a {
    font-size: 0.95rem;
    font-weight: 600;
  }
  .pkp_navigation_primary > li > a:hover {
    border-color: #f2a900;
  }
}

/* ===== Article lists (homepage and issue pages) ===== */
.obj_article_summary {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.obj_article_summary > .title a {
  color: #0b3d63;
}
.obj_article_summary .authors {
  font-style: italic;
}

/* ===== PDF / galley buttons ===== */
.obj_galley_link {
  border-color: #0b3d63;
  color: #0b3d63;
  border-radius: 4px;
}
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: #0b3d63;
  color: #ffffff;
}

/* ===== Sidebar blocks ===== */
.pkp_block .title {
  color: #0b3d63;
  border-bottom: 2px solid #f2a900;
  padding-bottom: 0.25rem;
}

/* ===== Footer ===== */
.pkp_structure_footer_wrapper {
  background: #0b3d63;
}
.pkp_footer_content,
.pkp_footer_content a {
  color: #ffffff;
}
.pkp_brand_footer {
  opacity: 0.85;                        /* keep the OJS/PKP credit, just quieter */
}

/* ===== Phones ===== */
@media (max-width: 767px) {
  .pkp_footer_content {
    padding: 1.5rem 1rem;
  }
  .journal-footer {
    gap: 1rem;
  }
}

If you change the footer background to a dark colour, make sure the OJS/PKP logo in .pkp_brand_footer is still visible, or give that area a lighter background. Avoid hiding content with display: none just to tidy a page; hidden author or licence information can still matter to indexers and readers.

OJS homepage design best practices

A good journal homepage answers three questions in a few seconds: what does this journal publish, can I trust it, and how do I read or submit? These elements do that in OJS:

• Journal summary: two or three sentences on aims and scope, entered in Settings → Journal → Masthead and shown with the theme's "journal summary" option.
• ISSN and publisher: visible on the homepage or in the footer, matching the ISSN register.
• Current issue: the Default theme shows the current issue's table of contents automatically once an issue is published.
• Editorial board link: one click from the homepage, with names and affiliations.
• Calls for papers: publish them as Announcements (Settings → Website → Setup → Announcements) so they appear on the homepage. OJS 3.5 also adds homepage Highlights, which PKP notes may not work with every theme.
• Indexing information: list only the databases that actually index the journal, and link to the journal's record in each.
• Additional Content: the field under Appearance → Advanced adds text below the current issue on the homepage, useful for a short "journal at a glance" list.

Avoid auto-playing sliders, huge uncompressed images, long welcome messages and walls of logos. They slow the page and push the current issue out of view. Homepage clarity also helps search engines: Google Scholar works from article pages, and a clean structure and fast pages make those easier to reach. Our Google Scholar indexing guide covers the technical side.

OJS child theme development

When CSS is not enough (for example you need a different header layout or extra homepage sections), build a child theme. A child theme is a small theme plugin that names a parent theme. OJS loads the parent's templates and styles, then applies your changes, so the parent can be updated without wiping your work. The structure below follows PKP's Theming Guide and PKP's own child themes; check it against the guide for your exact release.

OJS 3.3

myJournalTheme/
├── index.php
├── MyJournalThemePlugin.inc.php
├── version.xml
└── styles/
    └── index.less

<?php
require_once('MyJournalThemePlugin.inc.php');
return new MyJournalThemePlugin();

<?php
import('lib.pkp.classes.plugins.ThemePlugin');

class MyJournalThemePlugin extends ThemePlugin {
    public function init() {
        // Inherit everything from the Default theme
        $this->setParent('defaultthemeplugin');
        // Compile our LESS together with the parent's stylesheet
        $this->modifyStyle('stylesheet', ['addLess' => ['styles/index.less']]);
    }

    public function getDisplayName() {
        return 'My Journal Theme';
    }

    public function getDescription() {
        return 'Child theme of the Default theme for My Journal.';
    }
}

OJS 3.4 and 3.5 (namespaced)

From OJS 3.4, plugins use PHP namespaces and the class file drops the .inc part. The namespace must match the folder name.

<?php
return new \APP\plugins\themes\myJournalTheme\MyJournalThemePlugin();

<?php
namespace APP\plugins\themes\myJournalTheme;

use PKP\plugins\ThemePlugin;

class MyJournalThemePlugin extends ThemePlugin
{
    public function init()
    {
        $this->setParent('defaultthemeplugin');
        $this->modifyStyle('stylesheet', ['addLess' => ['styles/index.less']]);
    }

    public function getDisplayName()
    {
        return 'My Journal Theme';
    }

    public function getDescription()
    {
        return 'Child theme of the Default theme for My Journal.';
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE version SYSTEM "../../../lib/pkp/dtd/pluginVersion.dtd">
<version>
    <application>myJournalTheme</application>
    <type>plugins.themes</type>
    <release>1.0.0.0</release>
    <date>2026-10-17</date>
    <lazy-load>1</lazy-load>
    <class>MyJournalThemePlugin</class>
</version>

// Override a Default theme LESS variable (links, buttons)
@primary: #8a1c1c;

// Then add normal CSS rules
.pkp_structure_head {
  border-bottom: 4px solid #f2a900;
}

To install it, compress the myJournalTheme folder as a .tar.gz archive and use Upload a New Plugin, or copy the folder into plugins/themes/ on the server. Then enable it under Theme Plugins and select it in Appearance → Theme. Because it inherits the Default theme, the Default theme's options remain available.

To change a template, copy the file from the parent into the same path inside your child theme (for example templates/frontend/components/footer.tpl) and edit the copy. OJS checks the child theme first. Override as few templates as possible, and re-check each one after every OJS upgrade, because the originals change between releases. If you override headerHead.tpl or footer.tpl, keep their {load_header}, {load_stylesheet} and {load_script} calls: plugins such as Google Scholar Indexing rely on them to output meta tags and scripts.

A child theme is real development work that needs maintenance at each major OJS release. If you would rather have it designed, built and kept compatible for you, our OJS theme design service works exactly this way, on top of PKP's maintained themes.

Clear the cache, then test on mobile and for accessibility

Clearing the template cache

OJS caches compiled templates and stylesheets. After changing a theme, a child theme's files or LESS, ask the site administrator to run Administration → Clear Template Cache, which also clears the compiled CSS. Uploaded journal stylesheets usually update immediately, but your browser may still show the old version until you force a reload.

Mobile testing

• Check the homepage, an issue page, an article page and the submission page on a real phone.
• Open the mobile menu and make sure every item is reachable.
• Look for oversized logos, tables wider than the screen and text inside images.

Accessibility checks

• Text colour contrast of at least 4.5:1 for normal text (WCAG AA), including on your header and footer colours.
• Every link and button can be reached and seen with the Tab key; do not remove focus outlines.
• Logos and meaningful images have alt text.
• Run your browser's built-in Lighthouse or accessibility check on key pages.

PKP notes that changes to a theme can affect its accessibility, so re-test after each significant change. If something breaks after an upgrade and you cannot find the cause, our OJS technical support team can help.

Frequently Asked Questions