PKP Theming Guide

<!DOCTYPE html> <html lang="en-US"> <title>PKP Theming Guide</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="og:title" content="PKP Theming Guide" /> <meta property="og:site_name" content="PKP Docs"> <meta property="og:url" content="https://docs.pkp.sfu.ca/pkp-theming-guide/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/pkp-theming-guide/en/README.md"> Edit this page </a> or <a href="https://pkp.sfu.ca/documentation-feedback/"> make a suggestion </a> </div> <h1 id="pkp-theming-guide"> PKP Theming Guide </h1> <p>The PKP Theming Guide is an introduction to building custom themes for Open Journal Systems 3.0+ and OMP 1.2+. It is written for web developers who wish to tailor the look and feel of their journal or press with custom PHP, HTML and CSS code.</p> <p>This guide is a living document that will grow and adapt over time. It is based on initial work undertaken during the PKP Sprint Fall 2016, and benefits from feedback and contributions from people like you.</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/pkp-theming-guide/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="summary">Summary</h1> <ul> <li><a href=".">Introduction</a></li> <li><a href="what-is-a-theme">What Is a Theme?</a> <ul> <li><a href="css-less">CSS/LESS</a></li> <li><a href="html-smarty">HTML/Smarty Templates</a></li> <li><a href="theme-setup">Theme Setup & Configuration</a></li> </ul> </li> <li><a href="child-themes">Child Themes</a></li> <li><a href="template-variables">Common Template Variables</a></li> <li><a href="theme-api">Theme API</a></li> <li><a href="theme-options-api">Theme Options API</a></li> <li><a href="publication-versions">Publication Versions</a></li> <li><a href="security">Security</a></li> <li><a href="theme-backend">Theming the Editorial Backend</a></li> <li><a href="themes">Themes</a> <ul> <li><a href="theme-default">Default Theme</a></li> <li><a href="theme-bootstrap3">Bootstrap3 Theme</a></li> <li><a href="theme-classic">Classic Theme</a></li> <li><a href="theme-healthsciences">Health Sciences Theme</a></li> <li><a href="theme-immersion">Immersion Theme</a></li> <li><a href="theme-manuscript">Manuscript Theme</a></li> <li><a href="theme-pragma">Pragma Theme</a></li> </ul> </li> <li>Advanced Techniques <ul> <li><a href="advanced-custom-data">Passing Data to Templates</a></li> </ul> </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

PKP Theming Guide