Designing Your Journal

<!DOCTYPE html> <html lang="en-US"> <title>Designing Your Journal - OJS|OMP|OPS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="og:title" content="Designing Your Journal - OJS|OMP|OPS" /> <meta property="og:site_name" content="PKP Docs"> <meta name="description" content="How to make your OJS journal attractive, accessible, and unique through customizing themes, creating CSS files, and selecting images and fonts"> <meta property="og:description" content="How to make your OJS journal attractive, accessible, and unique through customizing themes, creating CSS files, and selecting images and fonts"> <meta property="og:url" content="https://docs.pkp.sfu.ca/designing-your-journal/en/"> <link type="text/css" href="/css/book.css" rel="stylesheet" media="all"> <script defer src="/assets/js/smooth-scroll.polyfills.min.js"></script> <script defer src="/assets/js/fontawesome.min.js"></script> <body class="body--withSidebar"> <div class="bookHeader"> <button id="sidebarControl" class="bookHeader__sidebarControl"> <span class="fa fa-bars" aria-hidden="true"></span> <span class="fa fa-times" aria-hidden="true"></span> <span class="-screenReader">Toggle Menu</span> </button> <a class="bookHeader__logo" href="/"> <img src="/img/logo-on-white.png" alt="PKP Docs" class="bookHeader__logoImage"> </a> <div class="bookHeaderTools"> </div> </div> <div class="book"> <a href="#sidebar" class="-screenReader"> Jump to table of contents </a> <div class="book__page"> <div class="book__content"> <div class="book__improve"> <a href="https://github.com/pkp/pkp-docs/edit/main/designing-your-journal/en/README.md"> Edit this page </a> or <a href="https://pkp.sfu.ca/documentation-feedback/"> make a suggestion </a> </div> <h1 id="designing-your-journal"> Designing Your Journal </h1> <p>This guide gives advice and information on how to make your Open Journal Systems (OJS) journal attractive, accessible, and unique. It explains how to customize existing themes, create CSS files, and select images and fonts to suit your audience and content.</p> <p><a href="https://pkp.sfu.ca/ojs/">OJS</a> is an open source solution to managing and publishing scholarly journals online. It has a responsive, themable reader interface where publishers can display journal issues and articles and relay other information about the journal and its policies.</p> <p>OJS 3 comes prepackaged with a suite of themes and the ability to additionally select various design elements from a set of options to customize the look and feel of your journal site. Most themes allow you to select colours, upload logos and other images, and change fonts. For information about how to make these changes and add content to your site, see the <a href="https://docs.pkp.sfu.ca/learning-ojs/en/settings-website">Website Settings chapter in Learning OJS</a>.</p> <p>Advanced users who are familiar with CSS and want to personalize the look and feel of their journal site can upload their own stylesheets. This will allow you to override theme colours, fonts, and other design elements with options defined via custom CSS rules. This guide is primarily for these users. It also explains how to choose colour and typography, size images, develop a unique brand for your journal, and design an accessible site.</p> <p>For web developers who wish to tailor the look and feel of their journal or press by building a custom theme, see the <a href="https://docs.pkp.sfu.ca/pkp-theming-guide/en/">PKP Theming Guide</a>.</p> <p>We encourage publishers to use the theming options that are native to OJS, including those available in the plugin gallery. We recommend that those who choose to use a custom CSS file have experience with graphic design and CSS or use the services of a graphic designer or front-end developer. Customizing files when you lack design expertise and a full understanding of the implications is risky; however, we understand that not all publishers have the resources to access these services, so with this guide we offer information to help you make good design decisions and successful customizations.</p> <p>This guide has been written for users of OJS. However, PKP鈥檚 other software applications, <a href="https://pkp.sfu.ca/omp/">Open Monograph Press (OMP)</a> and <a href="https://pkp.sfu.ca/ops/">Open Preprint Systems (OPS)</a>, are similar to OJS and much of this information can also be applied to them. The guide also includes general information about journal site design and branding that can be applied to other publishing platforms.</p> <hr> <p>Copyright: Simon Fraser University holds the copyright for work produced by the Public Knowledge Project and has placed its documentation under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p> <p><a href="https://creativecommons.org/licenses/by/4.0/"><img src="https://licensebuttons.net/l/by/4.0/88x31.png" alt="Creative Commons Attribution 4.0 International" title="Creative Commons Attribution 4.0 International" /></a></p> <div class="book__footer"> <div class="book__improve"> <a href="https://github.com/pkp/pkp-docs/edit/main/designing-your-journal/en/README.md"> Edit this page </a> or <a href="https://pkp.sfu.ca/documentation-feedback/"> make a suggestion </a> </div> </div> </div> </div> <div class="book__sidebarScreen"></div> <div id="sidebar" class="book__sidebar"> <div class="book__summary"> <h1 id="table-of-contents">Table of contents</h1> <ul> <li><a href=".">Introduction</a></li> <li><a href="./branding">Branding Your Journal</a> <ul> <li><a href="./branding#colours">Colours</a></li> <li><a href="./branding#typography">Typography</a></li> <li><a href="./branding#images">Images</a></li> </ul> </li> <li><a href="./theme-features-design-elements">Theme Features and Design Elements</a> <ul> <li><a href="./theme-features-design-elements#introduction">Introduction</a></li> <li><a href="./theme-features-design-elements#images">Images</a></li> <li><a href="./theme-features-design-elements#colours-and-fonts">Colours and Fonts</a></li> <li><a href="./theme-features-design-elements#other-features">Other Features</a></li> <li><a href="./theme-features-design-elements#unique-features-to-be-aware-of-for-specific-themes">Unique Features for Specific Themes</a></li> <li><a href="./theme-features-design-elements#note-about-accessibility">Note About Accessibility</a></li> </ul> </li> <li><a href="./inclusive-and-accessible-theming">Inclusive and Accessible Theming</a> <ul> <li><a href="./inclusive-and-accessible-theming#accessibility-of-themes">Accessibility of Themes</a></li> <li><a href="./inclusive-and-accessible-theming#colour">Colour</a></li> <li><a href="./inclusive-and-accessible-theming#alternative-text-for-images">Alternative text for images</a></li> <li><a href="./inclusive-and-accessible-theming#descriptive-urls">Descriptive URLs</a></li> <li><a href="./inclusive-and-accessible-theming#page-structure">Page structure</a></li> <li><a href="./inclusive-and-accessible-theming#checking-your-website-for-accessibility">Checking your website for accessibility</a></li> </ul> </li> <li><a href="./creating-stylesheet">Creating a Stylesheet</a> <ul> <li><a href="./creating-stylesheet#identifying-elements-of-css">Identifying elements of CSS</a></li> <li><a href="./creating-stylesheet#create-a-basic-css-file-using-the-default-template">Create a basic CSS file using the default template</a></li> </ul> </li> <li><a href="./resources">Additional Resources</a></li> </ul> </div> <div class="book__backToHub"> <span class="fa fa-long-arrow-alt-left" aria-hidden="true"></span> <p>Back to <a href="/">all documentation</a>.</p> </div> <div class="book__spacer"></div> </div> </div> <div class="book__footerWrapper"> <div class="siteFooter"> <nav class="siteFooter__container"> <div class="siteFooter__top"> <div class="siteFooter__nav"> <div class="siteFooter__navHeader"> Contact Us </div> <p>Have a question or suggestion about PKP鈥檚 documentation and user guides? <a href="https://pkp.sfu.ca/documentation-feedback/">Use our documentation contact form</a>.</p> <p>If your message is not about documentation, please use the general <a href="https://pkp.sfu.ca/contact-us/">contact form</a>.</p> </div> <div class="siteFooter__nav"> <div class="siteFooter__navHeader"> Community </div> <p><a href="https://pkp.sfu.ca/documentation-interest-group/">Documentation Interest Group</a></p> <p><a href="/contributing/en/">Contributing Documentation</a></p> <p><a href="/translating-guide/">Translating Guide</a></p> <p><a href="https://forum.pkp.sfu.ca">Community Forum</a></p> </div> <div class="siteFooter__nav"> <div class="siteFooter__navHeader"> About </div> <p><a href="https://pkp.sfu.ca">Public Knowledge Project</a></p> <p><a href="https://pkpservices.sfu.ca/">PKP|Publishing Services</a></p> </div> <div class="siteFooter__logo"> <a href="https://pkp.sfu.ca"> <img src="/img/logo-on-grey.png" alt="Public Knowledge Project"> </a> <p>The Public Knowledge Project is a Core Facility of Simon Fraser University</p> <p>888 University Drive, Burnaby, B.C., Canada V5A 1S6</p> <p>We respectfully acknowledge that SFU occupies the unceded traditional territories of the Coast Salish peoples of the Musqueam, Squamish, and Tsleil-Waututh Nations.</p> </div> </div> <div class="siteFooter__bottom"> <p class="footer-copyright"><span class="terms-text"><a href="https://www.sfu.ca/contact/terms-conditions.html" target="_blank">TERMS & CONDITIONS</a> © SIMON FRASER UNIVERSITY.</span><span class="copyright-text"><img src="/img/creativecommons.svg" alt="Creative Commons logo" /><img src="/img/attribution.svg" alt="Attribution icon" /><a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">CC-BY 2.0</a></span><span class="footer-copyright-separator"> | </span><span class="ab-link">Website by <a target="_blank" href="https://www.affinitybridge.com">Affinity Bridge</a></span></p> </div> </div> </div> </div> <script type="text/javascript">/** * Toggle the sidebar open/closed */ (function() { var sidebar = document.getElementById('sidebar'); var sidebarControl = document.getElementById('sidebarControl'); var isOpen = false; var sidebarOpenClass = ' -sidebarIsOpen'; if (!sidebar || !sidebarControl) { return; } // Toggle sidebar function toggle() { if (isOpen) { document.body.className = document.body.className.replace(new RegExp(sidebarOpenClass, 'g'), ''); } else { document.body.className = document.body.className + sidebarOpenClass; } isOpen = !isOpen; } sidebarControl.addEventListener('click', toggle); })(); </script> <script type="text/javascript">/** * Initialize smooth scrolling to anchor links * * See: https://github.com/cferdinandi/smooth-scroll */ (function() { function init() { if (typeof SmoothScroll === 'undefined') { setTimeout(init, 500); } else { var scroll = new SmoothScroll('a[href*="#"]', {easing: 'easeInOutCubic', offset:80}); } } init(); })(); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-130558797-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-130558797-1'); </script>  <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:2436159,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script>  <script type="text/javascript"> var _paq = _paq || []; _paq.push(["setDocumentTitle", document.domain + "/" + document.title]); _paq.push(["setCookieDomain", "*.docs.pkp.sfu.ca"]); _paq.push(["setDomains", ["*.docs.pkp.sfu.ca"]]); _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u = (("https:" == document.location.protocol) ? "https" : "http") + "://" + "matomo.publicknowledgeproject.org/pkp/"; _paq.push(["setTrackerUrl", u + "piwik.php"]); _paq.push(["setSiteId", "40"]); var d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0]; g.type = "text/javascript"; g.defer = true; g.async = true; g.src = u + "piwik.js"; s.parentNode.insertBefore(g, s); })(); </script>  </body> </html>

CINXE.COM

Designing Your Journal - OJS|OMP|OPS