The OJS site
2 Managing your site’s appearance
This chapter covers the different elements of OJS that affect the appearance and layout of your site. This chapter complements the information presented in the PKP guide Designing Your Journal and in the Website Settings section of Learning OJS 3.3; this chapter links to the relevant sections from those guides throughout.
OJS uses responsive web design, which means that site elements will automatically rescale and rearrange to fit larger or smaller browser windows. You can see how this works on a computer by manually resizing your browser window. There is no mobile version of the OJS website: the site automatically optimizes for viewing according to the browser size. This chapter uses “large browser window” to refer to the experience a user would have on a computer with a maximized browser window or a large tablet; it uses “small browser window” to refer to the experience a user would have on a phone, a small tablet, or a computer with a small browser window.
There are five ways you can affect the overall look and feel of your OJS site:
General settings
Some elements that appear on the site are common to all journals, regardless of theme. These are controlled via Website Settings > Appearance > Setup and Website Settings > Appearance > Advanced.
The elements controled via Website Settings > Appearance > Setup are:
- Logo: an image that will appear in the header of any page on your site.. If you do not use a logo, the title of your journal will appear here as text.
- Journal thumbnail: this setting is not used for YDJ journals and is not necessary for your journal.
- Homepage Image: an image that will appear on the homepage of your site, unless the Homepage Background Image toggle (described below) is used.
- Page Footer: text or other content that will appear on the footer of any page on your site.
- Sidebar: sidebar blocks will be discussed in a separate section on this page.
The elements controled via Website Settings > Appearance > Advanced are:
- Journal style sheet: this setting will be discussed in a separate section on this page.
- Favicon: upload a favicon for your journal.
- Additional Content: text or other content that will appear at the bottom of the content page of your homepage only.
You can read more about Appearance Setup and Advanced Appearance settings in Learning OJS 3.3.
Theme and theme settings
Many elements of the OJS website are controlled by theme and the theme settings. These are configured through Website Settings > Appearance > Theme. When using the Default Theme, these settings are:
- Typography: font combinations used on the site.
- Colour: the colour of the site header.
- Journal Summary: toggle whether the Journal Summary appears on the homepage.
- Header Background Image: toggle whether the homepage image (if applicable) appears as the background of the header or in the main content pane.
YDJ prefers that participating journals use the Default Theme for two reasons:
- The Default Theme has been audited for accessibility and simplifies journals’ requirement to comply with the Accessibility for Ontarians with Disabilities Act (AODA), whereas other themes may present accessibility issues, and
- Themes other than Default are not always updated with the core OJS software and may not render or function properly when YDJ upgrades your journal to a new version of the software.
If you wish to use or try out different themes for your journal, please contact the Digital Publishing Librarian. Themes are implemented as plugins and you will not be able to implement them without assistance. YDJ cannot customize themes or fix any problems with non-Default themes that may arise.
You can read more about Theme settings in Learning OJS 3.3 and about Theme Features and Design Elements in Designing Your Journal. If you have access to development expertise, you can read about creating or modifying themes in the PKP Theming Guide.
Navigation menus
There are two navigation menus in the OJS Default Theme: the User Navigation Menu and the Primary Navigation Menu. Both menus are configured via Website Settings > Setup > Navigation. These menus may be rearranged; items may also be added or removed.
The User Navigation Menu contains a login link when site visitors are logged out or, when logged in, links related to their OJS user account. It appears at the top right of all OJS site pages when viewed in a large browser window; in a small browser window, these links are accessible via the hamburger menu at the top of the page.
The Primary Navigation Menu contains links to the public-facing site content, including About the Journal, Submissions, and Archives. It appears at the bottom of the site header on all OJS site pages when viewed in a large browser window; in a small browser window, these links are accessible via the hamburger menu at the top of the page alongsite the User Navigation Menu links.
You can edit each menu by rearranging, adding, and removing menu items. Be careful when removing menu items, lest you make important parts of the website inaccessible to readers. Adding a new Navigation Menu Item creates a new page on the OJS site that can be added to a menu.
You can read more about Navigation settings in Learning OJS 3.3.
Sidebar blocks
Blocks are flexible content containers that can appear to the right of the main content pane on any OJS page (on a large browser window) or below it (on a small browser windows). Blocks are managed via the Sidebar settings at Website Settings > Appearance > Setup, where you can reorder, activate, or deactivate blocks.
Several blocks are activated by default in OJS. Several plugins will also create blocks that can be managed via the Sidebar settings. One of these plugins is the Custom Block Manager, which allows you create custom block content. Learn more about Adding custom blocks (right sidebar) elsewhere in this guide.
Stylesheets
You can customize the deisgn of your OJS site by adding a .css file to Journal style sheet, which is accessed via Website Settings > Appearance > Advanced. You can read more about stylesheets in the Create a Stylesheet section of Designing Your Journal.
YDJ cannot customize stylesheets or fix any problems with custom stylesheets that may arise. If your custom stylesheet causes accessibility problems, we will require you to edit your stylesheet; if the accessibility problems are serious enough, we may have to remove the stylesheet unilaterally in order to comply with AODA requirements.
