Setup
Getting Started
Follow these steps to install and activate the NIVO theme on your OJS 3.3 installation.
Installation Steps
Download the Theme Package
After purchase, download the .tar.gz theme package from your account at ojs-services.com.
Upload via Plugin Manager
In your OJS dashboard, navigate to Settings → Website → Plugins → Upload A New Plugin. Select the .tar.gz file and click Upload.
Activate the Theme
Once uploaded, go to Settings → Website → Plugins → Theme Plugins. Find NIVO Theme and check the box to enable it.
Activate Your License
Enter your license key in the theme settings panel to unlock all premium features and receive future updates.
Configure the Theme
Go to Settings → Website → Appearance and scroll down to the NIVO Theme settings panel. Configure colors, fonts, layout, and all sections described in this guide.
Setup Checklist
- Upload and activate the NIVO theme plugin
- Enter your license key
- Set your primary brand color
- Choose light or dark mode
- Select a font family
- Configure the hero section
- Set up the about section with editor details
- Add your social media links
- Customize the footer columns
- Upload a hero background image (optional)
Appearance
Primary Color
The primary color defines the visual identity of your journal. It is applied globally across the entire theme to create a consistent brand presence.
🎨 Default Color
The default primary color is #DC2626 (a bold, professional red). You can change it to any hex color via the color picker in the theme settings.
Where Primary Color Applies
The primary color affects the following elements throughout the theme:
Primary Color Application
Article Title Here
→ Read More (Link Color)
PDF
DOI
- Navigation bar — active links and hover states
- Buttons — primary action buttons, submit buttons
- Links — all hyperlinks across the site
- Badges — PDF, DOI, Open Access badges
- Borders — active card borders, focus states
- Hero section — feature badge accents
- Footer — link hover colors
Appearance
Theme Mode (Light / Dark)
NIVO supports both light and dark visual modes. Switch between them from the theme settings panel. The selected mode applies globally to all pages.
☀ Light Mode
Background: #FFFFFF • Text: #111827
☽ Dark Mode
Background: #111827 • Text: #F3F4F6
Dark Mode Color Reference
| Element | Light Mode | Dark Mode |
|---|
| Page Background | #FFFFFF | #111827 |
| Card Background | #F9FAFB | #1F2937 |
| Text Primary | #111827 | #F3F4F6 |
| Text Secondary | #6B7280 | #9CA3AF |
| Borders | #E5E7EB | #374151 |
| Navbar | #FFFFFF | #111827 |
💡
Your primary accent color remains the same in both modes. It provides consistent branding regardless of the theme mode selected.
Appearance
Container Width
Control the maximum width of your journal's content area. Choose from three preset widths to match your design preferences and readability goals.
Narrow — 960px
Best for text-heavy journals
Standard — 1200px (Default)
Recommended
Wide — 1400px
Best for multi-column layouts
Appearance
Font Family
Choose from 9 carefully selected Google Fonts. The selected font is applied to all text across the journal, including headings, body text, and navigation.
Sans-Serif Fonts
Inter
Sans-Serif
The Quick Brown Fox
A modern typeface designed for computer screens, offering excellent legibility at small sizes.
Roboto
Sans-Serif
The Quick Brown Fox
A neo-grotesque typeface with mechanical skeleton and friendly curves for natural reading rhythm.
Open Sans
Sans-Serif
The Quick Brown Fox
An open-source humanist sans-serif with upright stress and open forms for clarity.
Poppins
Sans-Serif
The Quick Brown Fox
A geometric sans-serif with clean circular shapes, giving a modern and fresh appearance.
Nunito
Sans-Serif
The Quick Brown Fox
A rounded sans-serif with balanced terminals, warm and approachable for academic publishing.
Raleway
Sans-Serif
The Quick Brown Fox
An elegant sans-serif with thin weight strokes, ideal for titles and elegant journal designs.
Serif Fonts
Lora
Serif
The Quick Brown Fox
A well-balanced contemporary serif with roots in calligraphy, creating a story-telling feel.
Merriweather
Serif
The Quick Brown Fox
Designed specifically for screen readability with a slightly condensed style and large x-height.
PT Serif
Serif
The Quick Brown Fox
A transitional serif with humanist terminals, providing a classic academic appearance.
Layout
Homepage Article Columns
Choose how articles are displayed on the homepage. Select between a single-column or two-column layout for article cards.
1 Column (Full Width)
Articles stack vertically
2 Columns (Grid)
Articles in a 2-column grid
💡
Each article card displays: title, author name(s), and DOI (if available). On mobile, both options automatically collapse to a single column.
Layout
Issue Page Columns
Configure the article listing layout on individual issue pages. Unlike the homepage, the issue page also supports a 3-column layout.
Homepage Sections
Logo / Banner
Your journal logo can be displayed in two strategic locations across the theme. The logo is uploaded via OJS at Settings → Website → Appearance → Logo. OJS automatically serves the correct logo for each language if multiple locale versions are uploaded.
How to upload: Go to Settings → Website → Appearance and upload your logo under the Logo field. Supported formats: PNG (recommended, supports transparency), JPG, GIF.
Display Options
In theme settings, the Journal Logo Display option lets you choose where the logo appears:
| Option | Description |
|---|
Do not show logo | Logo is not displayed anywhere (default) |
Top header bar | Logo appears on the left side of the top bar, before the ISSN badges |
Hero section | Logo appears above the journal title in the hero area |
Both | Logo is shown in both locations simultaneously |
Option 1 — Top Header Bar
The logo is placed at the far left of the top bar, followed by the ISSN badges, then the search box and user menu.
Top Bar with Logo
🖼 LOGO
ISSN: 0000-0000
e-ISSN: 0000-0000
Login
Register
Submit your article
Max size: 60px height × 350px width
Option 2 — Hero Section
The logo appears centered above the journal title inside the hero area. This is ideal for wide banner-style logos.
Hero with Logo
JOURNAL LOGO
Journal Title
Subtitle / Description
Open Access
Peer Review
International
Max size: 200px height × 1200px width (homepage) / 120px height × 800px width (inner pages)
Recommended Logo Size
You upload one single logo in OJS (Settings → Website → Appearance → Logo). The same logo file is used everywhere — the theme automatically scales it down to fit each area. The table below shows the maximum dimensions allowed in each location:
| Display Location | Max Height | Max Width | Notes |
|---|
| Top Header Bar | 60px | 350px | Logo is scaled to fit within these limits |
| Hero (homepage) | 200px | 1200px | Same logo, displayed larger |
| Hero (inner pages) | 120px | 800px | Same logo, slightly smaller than homepage |
How scaling works: The logo keeps its original aspect ratio. If the logo is wider than tall, the width limit is reached first and the height adjusts proportionally (or vice versa). For example, a 1000×200 px logo in the top bar will display as 300×60 px.
Best practice: Upload your logo at the largest size you need (e.g. 1200×200 px for a wide banner). The theme will scale it down for smaller areas. Use transparent PNG format for best results, especially for the hero area where it overlays the background image. JPG is also supported but does not allow transparency.
Homepage Sections
Hero Section
The hero is the first thing visitors see. It can use either a solid color background or an uploaded background image. It showcases your journal's name, tagline, and featured highlights.
Hero Layout
Hero Section Wireframe
Journal of Science & Technology
International Peer-Reviewed Open Access Journal
✓ Open Access
✓ Peer Review
✓ International
eISSN: 2345-6789
pISSN: 1234-5678
Background Modes
Color Background
Journal Title
Uses heroBackgroundColor
Default: #2A486D
Image Background
Journal Title
Upload via Settings → Website → Setup → Homepage Image
Upload your image in OJS: Settings → Website → Appearance → Setup → Homepage Image
Hero Settings
| Setting | Description | Default |
|---|
heroBackgroundColor | Solid background color for the hero section | #2A486D |
Homepage Image | When hero background type is set to Image, the theme uses the image uploaded at Settings → Website → Appearance → Setup → Homepage Image. If no image is uploaded, the hero falls back to the selected background color. | None |
heroFeature1 🌐 ML | First feature badge text (e.g., "Open Access") | Open Access |
heroFeature2 🌐 ML | Second feature badge text (e.g., "Peer Review") | Peer Review |
heroFeature3 🌐 ML | Third feature badge text (e.g., "International") | International |
💡
Hero feature badges are multilingual. Switch the language in the admin panel to provide translations for each language your journal supports.
Homepage Sections
About Section (Show About Section)
When enabled, this section displays your journal's description alongside an editor information card on the homepage. Toggle it on or off with the showAboutSection setting.
About Section Wireframe
About the Journal
Read More →
Dr. Jane Smith
Editor-in-Chief
University of Oxford
Editor Card Settings
| Setting | Description |
|---|
editorName 🌐 ML | Editor's full name (e.g., "Dr. Jane Smith") |
editorRole 🌐 ML | Editor's role (e.g., "Editor-in-Chief") |
editorInstitution 🌐 ML | Editor's affiliated institution |
editorPhotoUrl | URL of the editor's photo. See Editor Photo section below for details. |
Editor Photo
The editor's photo appears in a circular frame inside the About Section card. There are two ways to set it:
Method 1: Editor Photo URL (Recommended)
In theme settings, paste the image URL into the Editor Photo URL field. The easiest way to get a URL without FTP:
- Go to Settings → Workflow → Publisher Library
- Click Add Item and upload the editor's photo
- Check the "Public Access" checkbox and click Save
- Click Edit on the uploaded file — a public download link will appear at the bottom of the dialog
- Copy this link and paste it into the Editor Photo URL field in theme settings
The theme settings panel also includes a direct → Open Publisher Library link for quick access.
Method 2: editor.jpg via FTP (Legacy)
Upload the photo as editor.jpg to public/journals/{journalId}/editor.jpg via FTP. The theme automatically detects and displays it. This method is kept for backward compatibility with existing installations.
Priority: If both methods are used, the URL method takes priority. If the URL field is empty, the theme falls back to looking for editor.jpg in the public folder. If neither exists, a gray placeholder is shown.
Recommended size: 200 × 200 px (square). The image is displayed in a circular frame, so square images work best. Keep file size under 100KB for fast loading.
Homepage Sections
Show About Journal on Homepage
This special feature is designed for new journals that have not yet published any articles. When enabled, it displays the "About the Journal" text from your journal settings directly on the homepage.
About Journal on Homepage (For New Journals)
⚠
Important: This section only appears when it is enabled AND your journal has no published articles yet. Once you publish your first issue, the homepage will automatically switch to showing articles instead, regardless of this setting.
Homepage Sections
Journal Metrics
Display key journal metrics in a visually appealing grid on the homepage. Up to 8 metrics can be configured, and any metric left empty will be automatically hidden.
Metric Settings
Each metric has a name field and a value field. Configure them in the theme settings:
| Name Field | Value Field | Default Name | Default Value |
|---|
metricName1 | metricValue1 | Impact Factor | 5.2 |
metricName2 | metricValue2 | SJR Quartile | Q1 |
metricName3 | metricValue3 | CiteScore | 4.8 |
metricName4 | metricValue4 | H-Index | 68 |
metricName5 | metricValue5 | Acceptance Rate | 85% |
metricName6 | metricValue6 | Days to Review | 14 |
metricName7 | metricValue7 | Total Citations | 2.1K |
metricName8 | metricValue8 | MIAR Rating | A |
✓
Leave both the name and value empty for any metric you do not want to display. The grid will automatically adjust to show only configured metrics.
Homepage Sections
Most Viewed Articles
Showcase the most popular articles on your homepage. Configure how many articles to display and the time period for calculating views.
Settings
| Setting | Options | Description |
|---|
mostViewedCount |
481620
| Number of articles to display |
mostViewedDays |
30 days100 days365 days
| Time period for counting views |
Most Viewed Articles Section
Most Viewed Articles
Article & Pages
Article Details Page
Customize what information appears on individual article pages. Toggle view counts and open access badges for a cleaner or more informative layout.
Article Detail Page Wireframe
Article Title Goes Here
Author A, Author B, Author C
Abstract
PDF
HTML
👁 Article Views
2,456
showViewCount: ON
🔓 Open Access
showOpenAccessBadge: ON
Settings
| Setting | Default | Description |
|---|
showViewCount | On | Show total article view count on the article sidebar |
showOpenAccessBadge | On | Show the open access badge/indicator for open access articles |
Layout
Archive Page Layout
Choose how past issues are displayed on the archive page. Switch between a visual grid of issue covers or a more traditional list view.
Grid Layout (Default)
Visual cover thumbnails
List Layout
Vol 2, No 1 (2024)
Published: Jan 2024
Vol 1, No 2 (2023)
Published: Jul 2023
Vol 1, No 1 (2023)
Published: Jan 2023
Compact vertical list
Layout
Last Articles Count
Control how many articles from the latest issue are displayed on the homepage.
⚙ Setting: lastArticlesCount
Default value: 10
This determines the maximum number of articles shown from the current issue on the homepage. If the issue contains fewer articles than the configured value, all articles will be displayed.
5
10
15
20
25
Homepage Article Order
Choose how articles are sorted in the "Latest Articles" section on the homepage.
⚙ Setting: homepageArticleOrder
Default value: By publish date (latest first)
| Option | Description | Best For |
|---|
By publish date | Articles are sorted by their publication date, with the most recently published article appearing first. | Journals with continuous publication or rolling submissions — newest content always appears at the top. |
By issue table of contents order | Articles follow the exact order defined by the editor in the issue's Table of Contents (drag & drop order in the admin panel). | Journals that carefully arrange articles by section or importance within each issue. |
Tip: Journals that publish articles as soon as they are accepted (continuous/rolling publication) should use "By publish date" so that the latest accepted article always appears first. Journals that publish complete issues at specific dates may prefer "By issue table of contents order" to maintain the editorial arrangement.
Global
Multilingual Support
Many NIVO theme settings support multiple languages. Look for the 🌐 ML badge next to any setting that can be translated.
Fields with Multilingual Support
- Hero Feature badges (heroFeature1, heroFeature2, heroFeature3)
- Editor information (editorName, editorRole, editorInstitution)
- All 4 footer column titles and content
- Footer bottom content
- Metric names (metricName1 through metricName8)
How to Add Translations
Language Toggle in Admin Panel
Footer Title 1 🌐 ML
About the Journal
Click each language tab to enter the translated content
Select the Language
In the theme settings, look for the language tabs above each multilingual field. Click the language you want to edit.
Enter the Translation
Type or paste the translated content for that specific language.
Repeat for Each Language
Switch between language tabs and fill in all available languages. The theme will automatically display the correct language based on the visitor's selected language.
Global
Multi-Journal Support
NIVO theme fully supports OJS multi-journal installations. When activated at the site level, the theme provides a unified portal for all hosted journals with dedicated site-level settings.
Site-Level Homepage
The site homepage displays all journals in a 2-column grid layout. Each journal card shows the cover image, title, ISSN numbers, and three action buttons.
Site Homepage Layout
SITE LOGO / BANNER
Home
Journals
About Us
For Authors
Contact
● ● ●
Site Title
Site description text appears here. This content is set in
Administration → Site Settings → About.
Cover
Journal 1
ISSN: 0000-0000
e-ISSN: 0000-0000
View Journal
Current Issue
Submissions
Cover
Journal 2
ISSN: 0000-0000
e-ISSN: 0000-0000
View Journal
Current Issue
Submissions
Cover
Journal 3
ISSN: 0000-0000
e-ISSN: 0000-0000
View Journal
Current Issue
Submissions
Cover
Journal 4
ISSN: 0000-0000
e-ISSN: 0000-0000
View Journal
Current Issue
Submissions
Site-Level Theme Settings
When the theme is activated at site level, only global settings are shown in the admin panel. Journal-specific options (hero section, editor info, metrics, article columns, etc.) are hidden because they are configured individually within each journal.
| Setting | Level | Description |
|---|
| Primary Color | Site + Journal | Main accent color used across the theme |
| Theme Mode | Site + Journal | Light or Dark mode |
| Container Width | Site + Journal | Page width: Narrow, Standard, or Wide |
| Font | Site + Journal | Typography selection |
| Site Logo Display | Site only | Show site logo in navbar or as top banner |
| Social Media URLs | Site + Journal | Facebook, X, Instagram, LinkedIn, YouTube |
| Footer Columns 1–4 | Site + Journal | 4 customizable footer columns (HTML) |
| Footer Bottom | Site + Journal | Bottom line text (HTML) |
| Hero, Editor, Metrics, etc. | Journal only | These settings are per-journal |
Site Logo Options
The site logo is uploaded in Administration → Site Settings. The theme offers two display positions:
| Option | Description | Max Size |
|---|
Navbar | Small logo on the left side of the navigation bar | 40px h × 350px w |
Top banner | Full-width banner row above the navbar, white background | 200px height, full width |
Custom pages at site level: You can add custom pages (e.g., About, Contact, Help) through Website → Navigation Menus. These pages automatically use the full container width without a sidebar, matching the site-level layout.
Resources
Tips & Best Practices
Get the most out of your NIVO theme with these recommendations.
| Image | Recommended Size | Format |
|---|
| Journal Logo (top bar) | max 60px h × 350px w | PNG (transparent) or JPG |
| Journal Logo (hero) | max 200px h × 1200px w | PNG (transparent) or JPG |
| Hero Background | 1920 x 600 px (minimum) | JPG (optimized, < 500KB) |
| Editor Photo | 200 x 200 px (square) | JPG — upload as public/journals/{id}/editor.jpg |
| Issue Cover | 400 x 560 px | JPG or PNG |
| Journal Logo | 200 x 60 px (max height) | PNG (transparent) |
| Favicon | 32 x 32 px or 64 x 64 px | PNG or ICO |
Classic Red
Primary: #DC2626 + Light mode
Professional Blue
Primary: #2563EB + Light mode
Green + Dark
Primary: #059669 + Dark mode
Modern Purple
Primary: #7C3AED + Light mode
| Journal Type | Recommended Font | Why |
|---|
| Modern / Technical | Inter or Roboto | Clean, highly readable at all sizes. Best for STEM journals. |
| Academic / Traditional | Merriweather or Lora | Serif fonts convey authority and academic tradition. Ideal for humanities and social sciences. |
| Creative / Arts | Poppins or Raleway | Geometric sans-serifs with a modern, fresh feel. Great for design and arts journals. |
| General Purpose | Open Sans or Nunito | Versatile and approachable. Works well for multidisciplinary journals. |
| Classic / Formal | PT Serif | Transitional serif with a professional, established feel. Suitable for law and medicine. |
- Optimize hero background images before uploading (use TinyPNG or Squoosh)
- Keep editor photos under 100KB
- Use JPG format for photographic images, PNG for logos with transparency
- Set a reasonable
lastArticlesCount (10 is optimal for most journals)
- Use the
mostViewedDays setting wisely — shorter periods update faster
Haven't purchased the NIVO theme yet?
See it in action with our live demos or get your copy today.
Social Media Links
Add your journal's social media profile URLs. Icons appear in both the navigation bar and the footer. Leave a field empty to hide that particular icon.
facebookUrltwitterUrlinstagramUrllinkedinUrlyoutubeUrl