Skip to main content
OJS for Everyone Logo
OJS for EveryoneThe Practical GuidebookRSYN Research LLP

Tutorial: Front-End Customization

Role: Journal Manager
Time: 20–60 minutes
OJS Version: 3.5+

This tutorial covers the most common front-end customisations journal managers can make in OJS without technical development skills — including logo, colours, custom CSS, navigation menus, and sidebars.

Before You Start​

  • You have Journal Manager access in OJS.

Step 1 — Upload Your Logo and Favicon​

  1. Go to Settings → Website → Appearance.
  2. Upload your Journal Logo (recommended: 200–400px wide, PNG with transparent background).
  3. Upload a Journal Favicon (32×32 px .ico or .png).
  4. Optionally upload a Journal Thumbnail (used in multi-journal site listings).
  5. Click Save.

Step 2 — Choose or Switch Theme​

  1. In Settings → Website → Appearance, scroll to Theme.
  2. Select a theme from the dropdown (only installed themes appear).
  3. Click Save and review the live site.

Available built-in themes include: Default, Health Sciences, and any installed community themes. See the Themes Reference for a full list.

To install additional themes:

  • Site Administrator goes to Administration → Plugin Gallery and installs a theme plugin.

Step 3 — Customise Theme Colours (if supported)​

Some themes offer colour configuration:

  1. In Settings → Website → Appearance, look for colour picker or accent colour options below the theme selector.
  2. Select your preferred colours.
  3. Click Save.

Step 4 — Add Custom CSS​

For style changes beyond theme settings:

  1. Create a .css file with your overrides, e.g. custom.css:
/* Change header background */
.pkp_head_wrapper { background-color: #1a3a5c; }

/* Change link colours */
a { color: #1a5276; }
a:hover { color: #2e86c1; }

/* Adjust article title size */
h1.page_title { font-size: 1.8rem; }

/* Style the footer */
.pkp_structure_footer { background: #f0f0f0; padding: 20px; }
  1. In Settings → Website → Appearance, upload the file in the Custom Stylesheet field.
  2. Click Save.
tip

CSS overrides survive OJS upgrades. Never edit theme files directly — use a custom stylesheet instead.

Step 5 — Edit Navigation Menus​

Customise the navigation bar:

  1. Go to Settings → Website → Navigation Menus.
  2. Click Edit next to Primary Navigation.
  3. Drag and drop menu items to reorder.
  4. Click Add Item to add custom links (external URLs, static pages, etc.).
  5. Click Save.

Step 6 — Add Sidebar Blocks​

Use the Custom Block Manager plugin to add HTML content blocks to the sidebar:

  1. Enable the Custom Block Manager plugin in Settings → Website → Plugins.
  2. Go to Settings → Website → Appearance → Sidebar.
  3. Click Add Block → Custom Block.
  4. Enter a block title and paste your HTML content.
  5. Reorder blocks by dragging.
  6. Click Save.

Common uses: sponsor logos, social media links, indexing badges, journal statistics.

Step 7 — Add Custom Header Content​

Use the Custom Header Plugin to inject HTML/JS into every page (e.g., a cookie banner, analytics scripts):

  1. Enable Custom Header in Settings → Website → Plugins.
  2. Click Settings next to the plugin.
  3. Paste your HTML in the header content area.
  4. Click Save.

Step 8 — Edit Static Pages​

For custom "About", "Contact", or informational pages:

  1. Enable the Static Pages plugin.
  2. Go to Settings → Website → Plugins → Installed Plugins → Static Pages.
  3. Click Add Static Page.
  4. Enter a URL path (e.g., about-our-team), title, and content.
  5. Add the page to your navigation menu (Step 5).

Troubleshooting​

ProblemSolution
CSS changes not applyingClear browser cache; also clear OJS template cache via Administration → Clear Template Cache
Logo not displaying correctlyResize the image to the recommended dimensions; use PNG with transparency
Theme colours not savingEnsure you are clicking Save in the Appearance settings, not just applying the theme
Custom block not appearingCheck the block is positioned in the sidebar layout; verify it is not restricted to certain pages

Next Steps​