Customizing Oj s

Customizing Your OJS Journal Table of Contents Pref Prefac acee .................................................................................................. ........................... 1 Intr Introd oduc ucti tion on ..................................................... ....................................................... ........... 1 First Thing's First: The Look ................................................................................................ 2 Modi Modify fyin ing g the the Jour Journa nall Home Homepa page ge Hea Heade derr ........ ...... ..... ...... ...... ..... ...... ..... ...... ...... ..... ...... . 2 Addi Adding ng Home Homepa page ge Cont Conten entt ...... ..... ...... ..... ...... ...... ..... ...... ..... ...... ...... ..... ...... ..... ...... ...... 3 Modi Modify fyin ing g the the Jour Journa nall Pag Pagee Hea Heade derr .......... ...... ...... ..... ...... ..... ...... ...... ..... ...... ..... ..... ...... .. 3 The The Jour Journa nall Page Page Foot Footer er ...... ..... ...... ...... ..... ...... ..... ...... ...... ..... ...... ..... ...... ...... ..... ...... .... 3 Adding a New Navigation Bar Item ............................................................................... 4 Packaged Themes and Layout ....................................................................................... 4 Inform Informati ation on for Librar Librarian ians, s, Reader Readerss and Author Authorss ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 6 List Listss ..................................................................................... .................................... 6 Styl Styles eshe heet et Modi Modifi fica cati tion onss ...... ..... ...... ...... ..... ...... ..... ...... ...... ..... ...... ..... ..... ...... ..... ...... ..... ...... .. 7 Stylesheet Locations ...................................................................................... ...................................................................................... ............. 7 Making Style Changes ................................................................................................. 8 Misc Miscel ella lany ny .............. ........................................................ ................................................. 10 Addi Adding ng a Uni Uniqu quee Imag Imagee for for Each Each Iss Issue ue ...... ..... ..... ...... ..... ...... ..... ...... ...... ..... ...... ..... ...... . 10 Anno Announ unce ceme ment ntss ...................................................... .................................................. 11 Adding a Multilingual Interface ................................................................................... 11 Addi Adding ng a Spla Splash sh Scre Screen en ..... ..... ...... ..... ...... ..... ...... ...... ..... ...... ..... ...... ...... ..... ...... ..... ..... 12 Adding MP3 Support ................................................................................................. 13 Othe Otherr Reso Resour urce cess ............................................... ........................................................ ........ 14 A. commo common. n.cs csss ................................................... ........................................................ ...... 14

Preface Open Journal Systems is i s a research and development develo pment initiative of the Public Knowledge Project at the University of British Columbia. Co lumbia. Its continuing developm ent is currently overseen by a partnership among UBC's Public Knowledge Knowledge Project, the Canadian C anadian Center for Studies in Publishing, and the Simon Fraser University Library. For more information, see the Public Knowl edge Project web site: http://pkp.sfu.ca. This work is licensed under u nder the Creative Commons Com mons Attribution-NonCommercial-NoDerivs Attribution-NonCommercial-NoDerivs License. To view a copy of this license, licen se, visit http://creativecommons.org/licens http://creativ ecommons.org/licenses/by-nc-nd/2.0/deed.en_CA es/by-nc-nd/2.0/deed.en_CA or send a letter to Creative Commons, 559 Nathan Abbott Abbott Way, Stanford, California 94305, USA.

Introduction As the global OJS community com munity increases, the need to need to customize individual journals using our open source software has become increasingly inc reasingly important. This document provides a brief overview of a few customizations to your OJS 2.x journal, jo urnal, including: • Chan Changi ging ng the the Header Header • Chan Changi ging ng the the Backgro Background und Colour and Fonts • Adding Adding a Unique Unique Image Image for for Each Each Issue Issue

1

Customizing Your OJS Journal

• Adding Adding Naviga Navigatio tion n Links Links • Provid Providing ing News News and and Updat Updates es • Integrati Integrating ng Blogs, Blogs, Wikis, Wikis, Forums Forums and and More • Adding Adding a Multiling Multilingual ual Interface Interface • Adding Adding a Spla Splash sh Screen Screen • Addi Adding ng MP3 MP3 Sup Suppo port rt

First Thing's First: The Look The Journal Manager can manipulate various aspects of the look of an OJS journal, without knowing very much in the way of css or HTML. There is a page devoted specifically to changing a journal's look, found under User Home --> Journal Manager --> Setup --> Step 5: The Look. The following instructions in this section all relate to this page.

Modifying the Journal Homepage Header Under Step 5.1: Journal Homepage Header, you can upload header images and logos, or otherwise edit the header text, for the journal's home page. You have to choose between using a text title or an image at the top of your homepage by toggling the radio button between each. Any text you enter under the Text Title will appear at the top of your home page; if you choose to use a title image instead, any banner image you upload here will appear in its place. You can also upload a logo, which will appear to the left of the title text or image.

Figure 1. Uploading a Homepage Header Image

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.

2


Figure 2. Homepage Header Image

Adding Homepage Content Under step 5.2: Adding Journal Homepage Content, you'll find you can add various different static and dynamic features to your journal's home page. Firstly, in the Journal Description text box, you can add a brief, 20-25 word description of your journal. You can then upload an image to be displayed on your home page. This can be anything, but common uses would be for issue covers. Then follows a checkbox for adding the journal's current table of contents to the main page. This will include links to the abstracts and articles. Finally, a larger input field will allow you to add more information. This is a good place to add general information that is not updated often. You can use limited HTML in this text box.

Modifying the Journal Page Header Section 5.3: Journal Page Header can be customized in the same fashion as Section 5.1 as explained previously; but in addition, there is the option of uploading an HTML version of the header. Whatever HTML you enter here will appear in the header block at the top of every journal page after the home page. This is handy if your journal has a secondary header image that you would like to use, for example.

The Journal Page Footer You can enter text/HTML information into the text box under Step 5.4: Journal Page Footer, which will appear at the bottom of every page. It may be useful to enter simple journal contact and copyright information here, or possibly the journal's ISSN number(s).

3


Adding a New Navigation Bar Item Under Section 5.5: Navigation Bar, you can add a Navigation Bar link to the current set at the top of every journal page. This can be an in-site link (for example, linking directly to a Submission page), or an external link (linking to a journal sponsor's w ebsite). An interesting use of additional navigation links is to add a blog or wiki for your journal, allowing for more interaction with your readers, and the development of an online community. For example, if your OJS site is at http://mysite.com/ojs and you have an associated blog at http:// mysite.com/blog, you can add a link to that blog from the navigation bar

Figure 3. Adding a Navigation Bar Item

Packaged Themes and Layout Under Step 5.6: Journal Layout, you have the option of switching between provided themes, uploading your own stylesheet, and moving journal blocks around. Uploading your own stylesheet will be dealt with later, as it this function can become a little bit more complex.

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.

Figure 4. Changing Themes

4


You can find a list of themes, complete with images and download links, from http://pkp.sfu.ca/themegallery.

Enabling the Left Sidebar and Moving Blocks A new OJS install has a typical default structure: it has a header space, a central content area, and a right sidebar. Sidebar content is organized into structural 'blocks', and these blocks can be moved from left to right sidebars, or even disabled. You'll notice that under step 5.6 Journal Layout, there are fields for both the left and right sidebar, and one for unselected items. There are also a number of blocks, including a "Developed by" block, a help block, etc. These blocks start in the right sidebar field by default, but can be moved to the left by highlighting the block to be moved and clicking the left-and-right arrows until the block is where you want it. Blocks can also be organized vertically within the sidebars, by highlighting the block to be moved and clicking either of the up and down arrows. In the following two images, you can see blocks being moved from the right to left sidebars, and the ensuing results on the journal home page:

Figure 5. Customizing the Sidebar Layout

Figure 6. Sidebar Layout Results

5


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.

Information for Librarians, Readers and Authors By default, OJS displays very open and general information for librarians, authors and readers on the right sidebar. You can edit this information under Step 5.7: Information.

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.

Figure 7. Changing the List length

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.

Figure 8. Lists Example

6


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/):

Figure 9. Colour Changes

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/.

7


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.

Making Style Changes If you take a look at common.css, you'll notice that is has been broken down into the following sections: • Common HTML elements • Main layout elements • Navigation bar • Breadcrumbs • Additional text styles • Table styles • Form-specific elements • Other organizational elements For basic changes, you'll want to find the element you want to change in common.css, examine the properties and values that have been defined, and then make a stylesheet that reflects the property and value changes you want to make. For example, to change the body background colour and font, find the body entry (it is the very first one in common.css):

Example 1. CSS Example body { margin: 0; padding: 0; background-color: #FBFBF3; color: #111; font-family: Verdana,Arial,Helvetica,sans-serif; }

To change your site's background colour and default text, enter and save the following text as a new file, and then upload it in Step 5.6 as a journal stylesheet:

8


Example 2. CSS Example body { background-color: white; font-family: "Times New Roman", serif; }

This will override the first example's background-color and font-family values. With just a few simple stylesheet changes, you can begin to make your OJS site your own.

Example 3. Uploading a new stylesheet for Newfoundland and Labrador Studies body { background-color: white; font-family: "Times New Roman",serif; } #header { background-color: #554b1a; border-bottom: 1px solid black; }

When you combine a journal header, the reorganization of some sidebar blocks, and a customized stylesheet, the results can be quite noticeable.

Figure 10. Results of Uploading a Stylesheet

9


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:

Figure 11. Issue Cover Art

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 styleshe et, as well as an image caption.

10


Figure 12. Customizing an Issue

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.

Figure 13. Enabling Announcements

Adding a Multilingual Interface OJS supports several languages, such as English, French, Spanish, and Portuguese. Translations are also underway for more languages in the near future. This allows your readers to have all of the links, text, and help files in their own language. You can make your journal unilingual in any of the languages supported by OJS, or you can make your journal multilingual, by activating a drop-down language selector.

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.

Adding a Splash Screen Another way to add some artistic appeal to your journal is by adding a splash screen, which appears before users are taken to the journal. Cosmos and History (http://www.cosmosandhistory.org) provides a very nice example of this:

Figure 14. Cosmos and History Splash Screen

Which leads, in turn, to their main page:

12


Figure 15. Cosmos and History Main Page

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".

Adding MP3 Support An innovative customization from The International Review of R esearch in Open and Distance Learning (http://www.irrodl.org/) is the addition of audio versions of their articles, using MP3 files:

13


Figure 16. mp3 Functionality

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; }

table.listing td.nodata, table.info td.nodata { text-align: center; font-style: italic; } table.listing td.headseparator { border-top: 1px dotted #000; font-size: 0.1em; line-height: 1%; } table.listing td.endseparator { border-top: 1px dotted #000; font-size: 0.25em; line-height: 10%; } table.listing td.separator, table.info td.separator { border-top: 1px dotted #DDDDD0; font-size: 0.1em; line-height: 1%; } table.data { } table.data tr {

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


border-bottom: 1px dotted #000; font-size: 0.5em; line-height: 25%; } div.progressbar { background-image: url(../templates/images/progbg.gif); background-repeat: no-repeat; height: 27; width: 505; z-index:1; }

24

Customizing Oj s

Recommend Documents