You are viewing the PKP Support Forum | PKP Home Wiki

[HOWTO] Load different CSS for each page.

OJS development discussion, enhancement requests, third-party patches and plug-ins.

Moderators: jmacgreg, btbell, michael, bdgregg, barbarah, asmecher

Forum rules
Developer Resources:

Documentation: The OJS Technical Reference and the OJS API Reference are both available from the OJS Documentation page.

Git: You can access our public Git Repository here. Comprehensive Git usage instructions are available on the wiki.

Bugzilla: You can access our Bugzilla report tracker here.

Search: You can use our Google Custom Search to search across our main website, the support forum, and Bugzilla.

Questions and discussion are welcome, but if you have a workflow or usability question you should probably post to the OJS Editorial Support and Discussion subforum; if you have a technical support question, try the OJS Technical Support subforum.

[HOWTO] Load different CSS for each page.

Postby mbria » Fri Dec 28, 2012 4:21 am


If you ever developed a theme for OJS you already noticed it could be a little tricky.

PKP guys are refactoring html structure and css files and it task will be easier soon (OMP it's the reference every OxS will follow) but also with the improvement, there will be some situations you will like to load an specific CSS file in an specific ojs page (pe: Help pages? Home? Archive? ArticleView?...)

Is this possible? Of course... you just need to overwite your "activate" method in you /plugins/themes/yourtheme/YourThemePlugin.inc.php.

Sounds difficult? No worry, just edit the file I mention and modify the "activate" function with the following code:

Code: Select all
    function activate(&$templateMgr) {
      if (($stylesheetFilename = $this->getStylesheetFilename()) != null) {
          //Loads theme's base stylesheet:
          $path = Request::getBaseUrl() . '/' . $this->getPluginPath() . '/' . $stylesheetFilename;

          // Getting info about the loaded page.
          $context = Request::getCompleteUrl();

          //Loads help.css in help pages.
          if (strpos($context,'help/') !== FALSE) {
            $path = Request::getBaseUrl() . '/' . $this->getPluginPath() . '/' . 'help.css';

          //Loads articleView.css in article's page.
          if (strpos($context,'article/view') !== FALSE) {
            $path = Request::getBaseUrl() . '/' . $this->getPluginPath() . '/' . 'articleView.css';

Don't forget to create help.css and ariticleView.css files (in your theme's root folder).

Posts: 352
Joined: Wed Dec 14, 2005 4:15 am

Re: [HOWTO] Load different CSS for each page.

Postby asmecher » Fri Dec 28, 2012 11:37 am

Hi Marc,

Thanks for writing this up!

Alec Smecher
Public Knowledge Project Team
Posts: 10015
Joined: Wed Aug 10, 2005 12:56 pm

Re: [HOWTO] Load different CSS for each page.

Postby mbria » Fri Dec 28, 2012 12:36 pm

Happy to help. ;-)
Posts: 352
Joined: Wed Dec 14, 2005 4:15 am

Return to OJS Development

Who is online

Users browsing this forum: No registered users and 1 guest