Atlas Theme
User Guide

Getting Started

Atlas is a licensed premium theme that gives your OJS 3.3 & 3.5 journal a polished, professional identity in minutes. Everything is configured from the OJS admin panel — you never need to touch code or files.

Installation Steps

Quick Setup Checklist

• Upload, enable, and select Atlas as the current theme
• Activate your license key
• Set your Primary and Accent colors
• Choose Light, Dark, or Auto mode
• Pick one of the 5 font sets
• Add Editor's Pick article IDs for the hero
• Position the homepage sections (metrics, editorial board, indexing…)
• Add your social media links and footer columns

License Activation

Atlas is a commercial theme and requires a valid license key to run. The key is tied to your domain (and, for single-journal licenses, to one journal).

License Types

Primary Color

The Primary Color is your main brand color. Atlas uses it for the bold, gradient surfaces and the main action buttons — it is what gives the site its identity at a glance.

Where the primary color appears

• The Editor's Pick hero author cover (a 3-stop gradient built from this color)
• Current issue and other issue cards (cover gradient)
• The Submit button in the top bar and the Call to Action buttons
• Small accents such as the journal-card wordmark tiles

Set it from the Primary Color picker in Appearance. Use a strong, saturated color that reads well in white text on top.

Accent Color

The Accent Color is the secondary highlight color. While the primary color carries the big surfaces, the accent is used for finer emphasis:

• Text links and hover states (unless you set a separate link color)
• Section numbers, small highlights and the secondary CTA button
• Selected states (e.g. the active filter chip)

Keeping primary and accent as two distinct colors gives the site depth; setting them to the same value gives a strictly monochrome brand. Both are valid — it is your choice.

Contrast report

Under each color field (primary, accent and link color) the settings screen shows a contrast report: the shade Atlas actually uses for text — and, for the accent, for the borders of hovered and selected controls — on each surface tone in light and dark mode, with its contrast against the page (targets: 4.5:1 for text, 3:1 for borders). Atlas darkens or lightens these shades until they pass, so a very light or very dark color can show up as a noticeably different shade in text. A ⚠ next to “the colour itself” means buttons and highlights in that color stand out little from the page. The report follows the last saved color: save, then reload the settings page. The keyboard focus ring does not depend on these colors.

Link Color

Text links inside your content — the About pages, custom pages, submission guidelines and the “read more” link on announcements — follow the accent color by default. If your brand book specifies a separate color for links and interactive states, set it here.

Leave the field empty to keep following the accent color, which is what every existing site does. Setting it changes nothing else: buttons, covers and chips still use the primary and accent colors.

Surface Tone

Your brand colors do not sit on their own: behind them is a neutral palette — the page background, the body text, the hairline rules and the header strip. Surface tone chooses that palette.

• Warm — cream paper, the Atlas signature look. This is the default and nothing changes for existing sites.
• Neutral — white and grey, no color cast. A safe base for almost any brand.
• Cool — blue-tinted grey, for institutional identities built on blues and greys.

This matters more than it sounds. A dark-blue corporate palette on a cream ground reads as two different brands; on a cool or neutral ground it reads as one. If your university or publisher has a formal brand book, start here, then set the primary, accent and link colors.

Theme Mode (Light / Dark)

Atlas ships with fully designed light and dark modes. You choose the default, and readers can switch at any time with the toggle in the header (their choice is remembered on their device).

Font Family

Choose one of five carefully paired font sets. Each set defines a heading/serif face and a body/sans face that work together for comfortable scholarly reading. Pick the one that fits your journal's character.

Choosing Custom reveals two dropdowns: Custom font — headings and Custom font — body text. Each lists 40 Google Fonts families (sans, serif and mono) that we verify to load, so there is nothing to type and nothing to misspell. Leave one on “same as…” to use the other for both roles. For a family that is not listed, pick Other at the end of the list and a text field appears; after saving it reports whether Google Fonts serves the name you entered.

Font delivery

Choose where the typefaces come from. Google Fonts (the default) loads them from Google, as before. Self-hosted serves the very same typefaces from your own server — no visitor IP address ever reaches Google, which is what journals hosted in the EU normally require. System fonts downloads nothing at all and uses whatever the reader's device provides. The Custom set is a pair of Google Fonts family names, so it only applies with Google delivery; in the other two modes the theme falls back to the Editorial set.

Container Width

Sets how wide the main content area can grow on large screens.

Theme Toggle & Command Palette

Reader conveniences you can switch on or off:

Keyboard shortcuts

Ctrl/⌘ + K opens the command palette. Alt + Shift + D (⌥ + ⇧ + D on a Mac) switches between light and dark mode while the theme toggle is shown. Neither clashes with a browser shortcut (Ctrl + D stays the browser's bookmark key), and the palette lists both.

Top Bar & Announcement

The slim bar above the main navigation always shows. On a journal it can carry a short announcement on the left (for example “Now accepting submissions for the upcoming volume”), with the language switcher and login/register on the right. The navigation row below stays fixed (sticky) as readers scroll.

On phones the same navigation collapses into the menu button. A long menu scrolls inside its own panel while the page behind stays put, and a top-level item that has a submenu opens and closes it with a tap instead of navigating away — the same behaviour as the desktop dropdown.

The user menu on the right is OJS's own User Navigation Menu, so its entries are the standard ones and follow the visitor's role: a reader sees Register and Login; a logged-in editor sees the editorial Dashboard, View Profile and Log Out; a site administrator additionally sees Administration. Edit it under Settings → Website → Navigation Menus like in any other OJS theme.

When an editor has outstanding tasks, OJS's task count appears as a badge next to Dashboard — in your own brand colour, the same one the Submit button uses — and is repeated on the user button, so it is visible without opening the menu. With nothing pending, no badge is shown.

Search — Across All Journals

The search box on the right of the menu opens the command palette. Type a query and press Enter to see results.

• On a journal, search runs within that journal.
• On the publisher (site) home, search runs across all hosted journals at once — and every result links straight to the right journal.

Social Icons in the Header

Any social links you configure (see Social Media Links) appear as a neat framed icon group. On a journal they sit at the far right of the navigation row; on the publisher home they move up into the top bar, styled to match the language switcher.

Journal Identity

This setting controls how the journal presents itself in two places at once — the homepage hero and the nameplate strip on inner pages. Choose what they display:

Many uploaded logos are banners that already contain the journal name. With Logo + Name the title then appears twice, once inside the image and once as text below it. Logo only is the fix: the banner stands alone and the journal name is still read out to search engines and screen readers through the image’s alt text, so nothing is lost.

Pick Name only when the logo is a small emblem you would rather keep out of the hero, and Logo + Name when the logo is a mark without words. If no logo has been uploaded, the journal name is always shown.

Homepage Sections & Order

The journal homepage is built from independent sections. Each one can be shown or hidden, and the Editorial Board and Indexing strips can be positioned before any section you like.

Editor's Pick Hero

The hero at the top of the homepage features articles you hand-pick. There are no manual slides to write — you simply list the article IDs, and Atlas builds an elegant slider with each article's title and authors over a branded author cover.

Current Issue & Article Cards

Show the current issue with its branded cover, optionally followed by the most recent articles as cards. Article cards can display a thumbnail (cover image, or an auto-generated branded placeholder), the section badge, authors and a short abstract.

Journal Metrics

A compact statistics band with up to eight headline figures and a monthly-views sparkline chart.

Each metric has a numbered Name, Value and optional Delta (a small “+5%” style change indicator). For the sparkline, you can either type your own comma-separated numbers, or leave it empty and Atlas will chart your journal's real monthly views from OJS statistics.

Editorial Board Strip

Atlas can display a scrolling strip of editorial-board members pulled live from the Editorial Board Manager plugin. Choose where it appears — before any homepage section — or turn it off.

Indexing Strip

Show the indexes and databases your journal belongs to as a scrolling logo strip, pulled live from the Indexing Page Manager plugin.

Call to Action

A prominent banner near the bottom of the homepage to drive submissions or any goal you choose. It has an eyebrow line, a title, a short paragraph and up to two buttons (each with its own label and link).

Launch Mode (new journal)

Brand-new journals with no published articles yet can look empty. Launch Mode replaces the normal homepage with a polished “coming soon” landing — an introduction, aims & scope, a call for papers, and up to five “getting started” link cards.

Each “getting started” card has an editable title, description and link, so you can point authors to guidelines, policies, the editorial team, and more.

Publisher Landing Page

When several journals run under one OJS site, the site home is a publisher landing page: a centered publisher name, an optional logo, a short “about” introduction, and a grid of all your journals. Journal-only features (hero, metrics, launch mode…) do not appear here — the site level keeps its own, simpler set of options.

Logo Placement

If you upload a site logo (Site Settings → Appearance → Logo), choose how it appears on the publisher landing:

Journals Grid & Stats

Control how the journal cards are laid out and what they show.

Article Detail Page

The article reading page uses an editorial layout: a wide title area, author cards, the section/type tag at the top right, and a spacious, page-width abstract below. Two author-related details can be turned on or off from the theme settings.

ORCID iDs on the article page

An author’s ORCID appears as a small icon next to their affiliation. This is not a theme setting — Atlas reads what OJS has stored and picks one of three appearances automatically.

Article Cards & Clickable Images

Throughout issue lists and search results, article cards present a cover (or branded placeholder), title, authors and quick links. Both the title and the cover image open the article, so readers can click whichever they reach for first.

Issue Page & Section Filters

An issue's table of contents shows its articles as a single, filterable list of cards — just like the homepage — rather than splitting them into separate blocks grouped under section headings. Each card carries its own section badge, and the issue's sections become filter tabs across the top.

Article Number

Some journals identify an article by an Article Number (elocation-id) instead of a page range — e.g. e0231470, P2.16, 051101. Atlas supports the Article Number generic plugin: when an article has an Article Number assigned, the theme shows it in place of the page range everywhere it would normally print pages.

Where it appears

• Article cards — in issue tables of contents and search results (“Art. no. …” instead of pages).
• Article detail page — the meta tag at the top (“Art. no. …” instead of pages).
• How to Cite — the Article Number replaces pages in every format the theme builds: APA “Article e0231470”, IEEE “Art. no. e0231470”, plus MLA, Chicago, Harvard, Vancouver, BibTeX and RIS.

License & Copyright

Atlas reads each article's license and copyright from the publication itself, not just the journal default. This means it stays correct when you set per-article or per-issue licenses (for example with the Advanced Licenses Manager).

• The Creative Commons badge reflects the article's own license (e.g. CC BY 4.0).
• The copyright holder and year come from the publication's metadata.
• If an article has no license set, the badge is simply omitted.

Most Viewed

Atlas adds a Most Viewed page that ranks articles by real download/view statistics over the last 120 days. Link to it from your menu using the path mostviewed.

Footer

The footer has up to four content columns (each with a title and free content) plus a bottom bar with left and right areas for copyright, credits or links.

Social Media Links

Add the full URLs for any of these and an icon appears automatically (empty fields show nothing):

Icons render in the header (and on the publisher home, in the top bar) and in the footer. The RSS feed icon appears in the footer only.

Multilingual i18n

Atlas ships with full English, Türkçe, Arabic, Spanish, Ukrainian and European Portuguese translations and respects OJS's per-language settings. For right-to-left languages such as Arabic, the interface automatically switches to an RTL layout. Text fields such as the announcement, CTA and launch content are entered per language, so each locale shows its own wording. Additional languages can be supplied as standard OJS locale files.

Changing a text

To change a wording the theme shows (a label, a button text) without touching the theme files, use PKP's Custom Locale plugin (Settings › Website › Plugins › Plugin Gallery). Find the text, enter your own wording for each language and save. The change is stored in the journal's files directory, not in the theme folder, so a theme update does not erase it. Atlas texts have keys that start with plugins.themes.atlas.. Do not edit the theme's own locale files: updates replace them.

Multi-Journal Installations

Atlas is context-aware. Every option is stored per journal, so each journal can have its own colors, fonts, hero picks and sections. Enabling Atlas on one journal never affects another, and a multi-journal license also unlocks the publisher landing page at the site level.

• Per-journal colors, fonts and layout
• Site-level (publisher) settings are separate from journal settings
• Activating Atlas on one journal leaves others untouched

Customizing without breaking accessibility

Atlas gives you a lot of freedom: colors, fonts, footer HTML, images, animated sections and keyboard shortcuts. Each of these can quietly make your journal harder to use for some readers. This section tells you what to check.

Colors and contrast

• The accent color appears as text (links, small labels) and as a fill (buttons, pills), in both light and dark mode. Atlas adjusts it where it has to: text drawn in the accent color is darkened or lightened until it reaches 4.5:1 against the page in each mode and surface tone, and text placed on an accent fill switches between white and near-black. The link color and the primary color are adjusted the same way where they are used as text; on primary-color buttons and covers the text color is chosen for contrast, and a dark overlay is added under cover text when the color is light.
• Because of this, a very bright or very dark color can show up as a noticeably different shade in text: a light yellow becomes an olive text color on light backgrounds, a navy becomes a lighter blue in dark mode. The settings screen shows these shades: under each color field, a contrast report lists the shade used for text (and, for the accent, for borders of hovered and selected controls) on each surface tone in light and dark mode, with its contrast ratio. The report follows the last saved color, so save and reload the page after changing a color. A ⚠ next to “the colour itself” means buttons and highlights in that color stand out little from the page; if that shade does not suit your brand, choose a mid-tone.
• The keyboard focus ring no longer uses the accent color: it is a dark outline inside a light halo (the other way round in dark mode), so it shows on any background. If you restyle focus in your own CSS, keep an outline of at least 2 pixels that stands out by 3:1, and do not remove it.
• Colors you set in your own CSS or footer HTML are not adjusted. Check them with a contrast checker against the light surface (close to white) and the dark surface (close to black) of the surface tone you use: 4.5:1 for text, 3:1 for focus indicators and icons.
• Never rely on color alone to carry meaning (for example "items in red are required").

High contrast (forced colors)

• Some readers use Windows High Contrast or a similar mode, where the browser replaces your colors with the reader's own. Backgrounds and fills disappear; text, borders and outlines stay.
• Atlas marks its selected and current states (language, filters, views, the current slide) and its icon-like controls so they still show. If you add your own buttons, tabs or badges in custom CSS or footer HTML, do not show a state with a background color alone: add a border, an underline or a different weight.
• To check, turn on a contrast theme in Windows (Settings › Accessibility › Contrast themes), or in Chrome's developer tools under Rendering › "Emulate CSS media feature forced-colors".

Keyboard shortcuts

• Ctrl+K (⌘K on a Mac) opens the command palette, and Alt+Shift+D (⌥⇧D) switches between light and dark mode; neither clashes with browser shortcuts.
• The single-key shortcut "/" for the palette is off by default (theme settings › “/” key opens the command palette). A single-key shortcut can fire by accident for people who use speech input or sticky keys, which is why WCAG requires a way to turn it off. Turn it on only if your readers ask for it.

Fonts

• Choose typefaces that are easy to read at small sizes: a generous x-height, open letter shapes, distinct I, l and 1.
• Avoid thin weights (300 and lighter) for body text and small labels.
• If your interface uses Cyrillic, Arabic or other scripts, make sure the font covers them; otherwise the browser mixes in a fallback font.
• The self-hosted and system font modes keep your visitors' data away from third parties; they do not change legibility.

Content you add to the footer (HTML)

• Put links in a list (<ul><li>), and write link text that makes sense on its own ("Author guidelines", not "click here").
• Atlas underlines links inside running text (the footer's free-text field, page content, announcements). If you restyle links in custom CSS, keep the underline or another marker that does not depend on color.
• If you add headings, keep them in order; do not pick a heading level for its size. Atlas's own footer column titles are level-2 headings.
• Every image needs an alt attribute (see below). Icons that only decorate need aria-hidden="true".
• If a piece of text is in another language, mark it: <span lang="tr">…</span>.
• Do not embed media that plays automatically.

Images and alternative text

• The rule: the alternative text says what the image adds. If the name or title is already written right next to the image, the image adds nothing to read, so its alternative text is empty (alt=""); otherwise the name is read twice.
• What Atlas does on its own: the journal logo beside the journal name, index logos shown with their names and editorial board photos have alt=""; a logo shown without the name keeps the name as its alternative text.
• Issue covers and journal thumbnails: Atlas uses the alternative text you enter in OJS (the issue's cover image, the journal thumbnail) and leaves it empty otherwise, because the issue number or journal name is written next to the cover. If a cover carries information of its own, describe it there ("Cover of Volume 3, Issue 2: photograph of a coastal research station").
• Logos you add yourself: the alternative text is the name of the organization ("Scopus"), not "logo" — or alt="" if the name is written next to it.
• Decorative images: alt="".
• Avoid images of text; if you must use one, repeat the text in the alternative text.

Motion

• The homepage slider advances every few seconds. It stops while the pointer is over it or a keyboard user is inside it, and it has a pause button. Keep the number of slides small and slide texts short.
• The indexing strip and issue timeline scroll continuously. Each has a pause button, and they stop when a keyboard user moves into them. If your audience includes people who find motion distracting, you can still turn these sections off or place them lower on the page.
• Atlas keeps the slider, the strips, decorative cover animations, the status dot and the command palette's opening still for visitors who have turned on "reduce motion" in their operating system, and does not scroll the page smoothly for them.

Tips & Best Practices