Custom or editing Theme

Hello, i am new to OJS, i wanted to create a new theme, or edit an existing theme.
And i was looking for some kind of guide, if exists.
I know little about html and CSS, and very little of PHP.
Can anyone give me some directions how i cam make this.

Thks in advance

what i do is i download and study the stylesheet from establish journal and modified it. you view some custom journal style sheet here sample of journal.

what i do is i saved the webpage and upload the journal style sheet file in the ojs setup and saved my ojs. then i delete the journalstylesheet file. and edit the style sheet offline.

i have zero knowledge on html or php or css. just trial and error.

For some excellent tutorials in HTML and CSS, I strongly recommend w3schools.

Thks mohd and ctgraham for the answers. Yes i know that site its very good.

i tried with the browser inspecter elements, but despite i saw all the html i want to edit, i cant find the pages where this code is inserted.

And if i knew that, i could do what i want. The CSS files help but only a little.

Note that most “theme” plugins in OJS 2.4.x really just make CSS changes (for the most part), so if you want to change HTML, you’re probably looking beyond theming.

The general strategy to trace a page in OJS is:

  • Look at the url’s PATH_INFO (the part after index.php)
  • The first component is the journal or site path
  • Look for the next component of that path under the “pages” directory
  • Examine that index.php to find the handler include and function call for the third part of the path
  • Watch for more includes, which translate to additional classes on the system
  • Ultimately find a template call, which leads us to a file in the templates directory.

For example, how is the url ojs2/index.php/myJournal/user/profile handled?
###user/profile is found in pages/user

###profileHandler::profile() includes profileForm

###profileForm attaches to user/profile.tpl

###find it by name under “templates”

You also have to watch out for plugins, which alter the display and add content but won’t be in the above workflow, and for calls into the shared library (lib/pkp).

If you have a particular change you want, post it here and we might be able to point you in the right direction.

Thks Ctgraham,

Despite i used the method you described, i couldnt find what i wanted to edit. Unfortunally my php knowledge its not enought.
What i wanted to change, was to move the both help links(ojs and journal) to the footer or bottom of the main from the main page when OJS is loaded. And put the nav bar (Home, about, login, register, search) above the Header title.

The footer and header is in the shared library (./lib/pkp/…):

Note where the header embeds the navbar:

You’ll find that back in the OJS application:

Many thks ctgraham, it helped me a lot.
step by step i am undestanding how it works.

Hi, this is a example theme that replace original templates, so you can customise more deeply the ojs look (you just need to copy your templates in the templates folder following the structure)