Professional Documents
Culture Documents
Table of Contents
Preface ............................................................................................................................. 1
Introduction ....................................................................................................................... 1
First Thing's First: The Look ................................................................................................ 2
Modifying the Journal Homepage Header ....................................................................... 2
Adding Homepage Content .......................................................................................... 3
Modifying the Journal Page Header ............................................................................... 3
The Journal Page Footer .............................................................................................. 3
Adding a New Navigation Bar Item ............................................................................... 4
Packaged Themes and Layout ....................................................................................... 4
Information for Librarians, Readers and Authors .............................................................. 6
Lists ......................................................................................................................... 6
Stylesheet Modifications ...................................................................................................... 7
Stylesheet Locations ................................................................................................... 7
Making Style Changes ................................................................................................. 8
Miscellany ....................................................................................................................... 10
Adding a Unique Image for Each Issue ......................................................................... 10
Announcements ........................................................................................................ 11
Adding a Multilingual Interface ................................................................................... 11
Adding a Splash Screen ............................................................................................. 12
Adding MP3 Support ................................................................................................. 13
Other Resources ............................................................................................................... 14
A. common.css ................................................................................................................. 14
Preface
Open Journal Systems is a research and development initiative of the Public Knowledge Project at the
University of British Columbia. Its continuing development is currently overseen by a partnership among
UBC's Public Knowledge Project, the Canadian Center for Studies in Publishing, and the Simon Fraser
University Library. For more information, see the Public Knowledge Project web site: http://pkp.sfu.ca.
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs License. To
view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/2.0/deed.en_CA or send a
letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
Introduction
As the global OJS community increases, the need to customize individual journals using our open source
software has become increasingly important. This document provides a brief overview of a few customizations to your OJS 2.x journal, including:
Changing the Header
Changing the Background Colour and Fonts
Adding a Unique Image for Each Issue
Keep in mind that the default header width is 820px, which would include both a logo and a title image,
if uploaded; uploaded images should be sized to fit reasonably well within these constraints.
Changing Themes
OJS 2.2 comes with a number of themes that you can use. These themes will change the site colours, but
will not affect layout. Follow these steps to switch your theme:
Log in as Journal Manager, and navigate to User Home --> Journal Manager --> Setup --> Step 5: The
Look.
Scroll down to step 5.6 Journal Layout.
Choose your new theme from the drop-down menu beside Journal Theme.
Scroll to the bottom of the page and click Save and Continue; your new theme should now be set.
You can find a list of themes, complete with images and download links, from http://pkp.sfu.ca/themegallery.
If you assign a block to the middle 'unselected' field, it will not appear on your site.
You can highlight more than one block to move at a time; and you can use the 'big arrow' buttons at the
bottom of the 'unselected' field to move items directly from one sidebar to another.
If a sidebar is empty, it disappears and the resulting free space is taken by the middle content block.
You have to scroll to the bottom of the page and click "Save and Continue" for your changes to be recorded.
Lists
By default, OJS limits the maximum number of items per page to 25, and the number of page links to 10.
You can edit this default under Step 5.8: Lists.
Although you can't see all 25 items in the following list example, you can see how the number of pages
has been limited to 10, event though this journal has published more than 250 articles. If a user clicks on
the 10th page link, the pages 5 thru 14 will be linked to from the bottom of the resulting page, while the
25 results for that page will be displayed.
Stylesheet Modifications
A newly installed version of OJS comes with a default style sheet, with an attractive choice of colours
and fonts. In addition, themes can be enabled to modify colours site-wide. If you want to make further
changes, however, you will have to create and upload your own stylesheet.
Notice the extensive colour changes made for Critical Studies in Improvisation (http://
www.criticalimprov.com/):
This journal accomplished most of the changes you see by uploading a new stylesheet.
Stylesheet Locations
OJS links to many different stylesheets at any one time. This is the typical order in which stylesheets are
called, if they are all enabled:
common.css: every journal uses this stylesheet, and it can be found in styles/; you can see the appendix
for the full stylesheet as well.
sidebar.css, leftSidebar.css, rightSidebar.css, and bothSidebars.css: these can be found within the styles
directory as well; they apply structural rules to the sidebars, if being used.
(themeName).css: if you have enabled a theme from Setup: Step 5.6, the theme's stylesheet will be called
next. The stylesheet for any particular theme comes from the theme title: the stylesheet for Classic Blue
is classicBlue.css, for example. These theme stylesheets can be found in plugins/themes/(themeName)/.
journalStyleSheet.css: if you upload your own stylesheet, OJS renames it to journalStyleSheet.css and
places it in your journal file directory (for example, in public/journals/1/journalStyleSheet.css for the
first journal created with that particular OJS install).
fontSize stylesheets: there are three user-switchable stylesheets that control site-wide font size -small.css, medium.css, and large.css. They can be found in plugins/blocks/fontSize/.
There are also location-specific stylesheets. These can be found in the styles/ directory:
articleView.css: called when an HTML article, abstract, or interstitial page is being viewed.
comments.css: called when comments are enabled and displayed.
help.css: used to style context-sensitive help pages that are displayed when a user clicks on "Journal
Help".
rt.ss: used to style the Research Tools sidebar, if enabled.
Changes made to one stylesheet can be overridden by another stylesheet. For example, since the fontSize
css files are last in the listed order, they are processed last by your browser, and their rules are applied last,
overriding every other stylesheet before it. This is good to keep in mind when it comes to troubleshooting.
So long as you don't edit the already-existing stylesheets, and keep to uploading your own modifications,
this shouldn't be a problem.
If you have some experience working with style sheets, you will be able to make extensive customizations
to the "look and feel" of your new journal.
Miscellany
Adding a Unique Image for Each Issue
Another interesting enhancement is to add a unique cover image to each issue of your journal. This, of
course, requires a sustainable source of artwork!
The journal Postcolonial Text (http://postcolonial.org/) makes good use of this feature in their version of
OJS:
These images are added when each issue is created by the Editor. There is also the option at the time of
issue creation to upload an issue-specific stylesheet, as well as an image caption.
10
Announcements
The front page of a journal can be used as a communication space with your readers, announcing new
information about your journal by using the included Announcements module. This module can be enabled
by the Journal Manager in Step 4.4: Journal Announcements, and will appear as a link in the Navigation
Bar, and optionally on the home page.
Only Journal Managers can add announcements. You can control how many announcements appear on
the home page, if any.
11
To do this, your Site Administrator will need to install Languages from the Site Management menu. From
here, the Site Administrator must install any available languages to use with the journal, check them off
as supported by the journal.
Second, the Journal Manager must activate the all of the languages you wish to support, under User Home
--> Journal Management --> Languages.
If more than one language is enabled, users will be able to use a drop-down menu on the sidebar to choose
a preferred journal-wide display language. There will also be the option of entering text in different languages where appropriate, such as throughout the Journal Setup process, and when authors submit an article for consideration.
12
This is done by simply creating an index.html file for the splash screen, and adding a link to the journal
home page. In this case, the link is labelled "enter site".
13
The audio files were recorded outside of the OJS system, but were uploaded as supplementary files, associated with each article. This was done by the Section Editor, in the Submissions Summary section. Other
types of files can be added, including video.
These could also be added by the author, as part of their submission process.
Other Resources
To find out more about OJS, please consult the following resources:
The Public Knowledge Project Homepage: http://pkp.sfu.ca/
OJS Documentation: http://pkp.sfu.ca/ojs_documentation
The Support Forums: http://pkp.sfu.ca/support/forum
A. common.css
/**
14
* common.css
*
* Copyright (c) 2003-2007 John Willinsky
* Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
*
* Site-wide shared stylesheet.
*
* $Id: common.css,v 1.47 2007/11/14 22:36:20 asmecher Exp $
*/
/**
* Common HTML elements
*/
body {
margin: 0;
padding: 0;
background-color: #FBFBF3;
color: #111;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
div {
line-height: 140%;
text-align: left;
}
table {
border: 0;
border-spacing: 0;
font-size: 1.0em;
}
form {
margin: 0;
}
a {
text-decoration: underline;
}
a:link {
color: #375;
}
a:active {
color: #253;
}
a:visited {
color: #375;
}
a:hover {
15
color: #253;
background: #CDC;
}
a.plain {
text-decoration: none;
}
ul {
margin: 0.25em 0 0.75em 0;
padding: 0 0 0 2.5em;
}
tt {
font-size: 1.25em;
}
label {
}
label.error {
color: #900;
}
input.textField, select.selectMenu, textarea.textArea, input.uploadField {
background-color: #F0F0E8;
color: #000;
font-family: Verdana,Arial,Helvetica,sans-serif;
border-top: 2px solid #666;
border-left: 2px solid #666;
border-bottom: 2px solid #E8E8E1;
border-right: 2px solid #E8E8E1;
font-size: 1em;
}
input.button {
padding-left: 0.5em;
padding-right: 0.5em;
background-color: #E8E8E1;
font-size: 1em;
}
input.defaultButton {
background-color: #375;
color: #FBFBF3;
font-weight: bold;
}
/**
* Main layout elements
*/
#container {
16
line-height: 125%;
text-align: center;
}
#header {
padding: 0;
margin: 0 auto;
background-color: #ABA;
text-align: center;
}
#headerTitle {
text-align: left;
margin: 0 auto;
padding: 0;
width: 800px;
}
#header h1 {
margin: 0 auto;
padding: 0.5em 0 0.25em 0;
font-family: Georgia,'Times New Roman',Times,serif;
font-weight: normal;
line-height: 1em;
}
#body {
width: 800px;
margin: 0 auto;
}
#footer {
min-height: 50px;
position: relative;
clear: both;
background-color: #ABA;
text-align: center;
}
#footerContent {
width: 800px;
margin: 0 auto;
}
#main {
padding: 0.5em 0em 2em 0em;
}
#main h2 {
margin: 0em 1em 0.5em 0em;
padding-top: 0.5em;
font-family: Georgia,'Times New Roman',Times,serif;
font-weight: normal;
}
17
#main h3 {
margin: 0em 1em 0.5em 0em;
padding-top: 0em;
font-family: Georgia,'Times New Roman',Times,serif;
font-weight: normal;
}
#navbar {
margin-right: 0;
padding-bottom: 0.5em;
border-bottom: 2px dotted #000;
}
#breadcrumb {
padding-top: 1em;
font-size: 0.7em;
}
#content {
margin: 0;
padding: 0;
padding-top: 0.5em;
font-size: 0.7em;
border-top: 2px dotted #000;
}
#content h3 {
margin: 0em 1em 0.25em 0em;
padding-top: 0.75em;
font-family: Georgia,'Times New Roman',Times,serif;
font-weight: normal;
font-size: 1.8em;
line-height: 1.35em;
}
#content h4 {
margin: 0em 1em 0.25em 0em;
padding-top: 0.75em;
font-family: Georgia,'Times New Roman',Times,serif;
font-weight: normal;
font-size: 1.5em;
}
#content h5 {
margin: 0em 1em 0.25em 0em;
padding-top: 0.75em;
font-weight: bold;
font-size: 1em;
}
/**
* Navigation bar
18
*/
#navbar a {
font-size: 0.65em;
letter-spacing: 0.05em;
}
#navbar a:link {
}
#navbar a:active {
}
#navbar a:visited {
}
#navbar a:hover {
}
/**
* Breadcrumbs
*/
#breadcrumb a {
text-decoration: none;
}
#breadcrumb a.current {
font-weight: bold;
}
/**
* Footer elements
*/
#footer div.debugStats {
font-size: 0.6em;
}
/**
* Additional text styles
*/
span.disabled, label.disabled {
color: #666;
}
a.action, a.file {
font-size: 0.85em;
text-transform: uppercase;
}
19
a.icon {
text-decoration: none;
}
a.icon img {
border: 0;
}
a.icon:hover {
background: none;
}
span.formRequired {
color: #333;
font-size: 0.9em;
}
span.instruct {
}
span.heading {
font-size: 0.85em;
text-transform: uppercase;
}
span.highlight {
border-bottom: 1px dotted #000;
}
.nowrap {
white-space: nowrap;
}
pre {
background-color: #F0F0E8;
color: #000;
font-size: 1.25em;
}
/**
* Table styles
*/
table.info {
}
table.info td {
padding: 0;
padding-bottom: 0.5em;
padding-right: 0.5em;
}
table.listing {
20
}
table.listing tr.highlight {
background: yellow;
}
table.listing td {
padding: 0.25em 0.5em 0.25em 0.5em;
}
table.listing tr.heading td, table.listing td.heading, table.info td.heading {
font-size: 0.85em;
text-transform: uppercase;
font-weight: normal;
line-height: 120%;
padding: 0.75em 0.5em 1em 0.5em;
}
table.listing tr.fastTracked {
background-color: #ABA;
}
table.info td.heading {
padding-left: 0;
}
21
}
table.data td {
padding-bottom: 0.25em;
}
table.data td.label {
padding-right: 1em;
}
table.data td.value {
}
table.data td.separator {
padding: 0.5em;
font-size: 0.1em;
line-height: 1%;
}
table.data td.heading {
padding-left: 0;
padding-right: 0;
}
table.nested tr {
padding: 0;
margin: 0;
}
span.nested {
padding: 0 4px 0 0;
font-size: 1.2em;
}
/**
* Form-specific elements
*/
span.formError {
color: #900;
font-weight: bold;
font-size: 1em;
}
ul.formErrorList {
color: #900;
}
/**
* Other organizational elements
*/
ul.menu {
22
margin: 0;
padding: 0;
}
ul.menu li {
margin: 0;
padding: 0;
padding-right: 1.5em;
display: inline;
}
ul.menu li.current {
font-weight: bold;
}
ul.menu a {
font-size: 0.85em;
text-transform: uppercase;
text-decoration: none;
}
ul.steplist {
margin: 0;
padding: 0;
list-style-type: decimal;
}
ul.steplist li {
margin: 0;
padding: 0;
font-size: 0.85em;
padding-right: 0.5em;
display: inline;
text-transform: uppercase;
}
ul.steplist li.current {
font-weight: bold;
}
ul.steplist a {
text-decoration: none;
}
ul.plain {
list-style-type: none;
padding-left: 1.5em;
}
div.separator {
width: 100%;
margin-top: 1em;
margin-bottom: 0.25em;
padding: 0;
23
24