OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



Custom Stylesheets?

Are you an Editor, Author, or Journal Manager in need of help? Want to talk to us about workflow issues? This is your forum.

Moderators: jmacgreg, michael, vgabler, John

Forum rules
This forum is meant for general questions about the usability of OJS from an everyday user's perspective: journal managers, authors, and editors are welcome to post questions here, as are librarians and other support staff. We welcome general questions about the role of OJS and how the workflow works, as well as specific function- or user-related questions.

What to do if you have general, workflow or usability questions about OJS:

1. Read the documentation. We've written documentation to cover from OJS basics to system administration and code development, and we encourage you to read it.

2. take a look at the tutorials. We will continue to add tutorials covering OJS basics as time goes on.

3. Post a question. Questions are always welcome here, but if it's a technical question you should probably post to the OJS Technical Support subforum; if you have a development question, try the OJS Development subforum.

Custom Stylesheets?

Postby kris » Wed Nov 30, 2005 12:56 pm

Does anyone know of somewhere where it is possible to download pre-designed stylesheets that could be used with OJS? I'm just not literate enough with designing stylesheets of my own and I can't seem to get the look I'm hoping for...
kris
 
Posts: 26
Joined: Mon Apr 05, 2004 5:27 pm

Postby asmecher » Thu Dec 01, 2005 12:37 pm

Hi Kris,

Search the web for "Open Journal Systems" and you'll turn up a number of customized installations; many are still using version 1.x, but you'll find some using version 2.x that use custom stylesheets that should be compatible with a stock OJS installation. (It's good etiquette to ask permission and give credit if you incorporate someone else's work into your customized installation.)

As a few examples, see:
Regards,
Alec Smecher
Open Journal Systems Team
asmecher
 
Posts: 9214
Joined: Wed Aug 10, 2005 12:56 pm

Postby kris » Fri Dec 02, 2005 7:27 am

Thank you so much for the suggestion. I will definitely do a search and then email those individuals!

kris
kris
 
Posts: 26
Joined: Mon Apr 05, 2004 5:27 pm

OJS Templates and Design

Postby ramon » Mon Feb 13, 2006 8:55 am

Beware of some journals. It is always wise to check the source code to be sure it is really ojs.

For example, this http://petroleumjournalsonline.com/journals/ is actually running ojs under Joomla, a free CMS software...

However, similar things are possible just using css. Check out htmldog.com for many DHTML techniques just using HTML, CSS and very little Javascript
ramon
 
Posts: 940
Joined: Wed Oct 15, 2003 6:15 am
Location: Brasí­lia/DF - Brasil

Postby asmecher » Mon Feb 13, 2006 4:55 pm

Hi Ramon,

Actually, petroleumjournals is using OJS -- probably in conjunction with another package or two.

Regards,
Alec Smecher
Open Journal Systems Team
asmecher
 
Posts: 9214
Joined: Wed Aug 10, 2005 12:56 pm

Postby lljournal » Wed Mar 01, 2006 10:56 am

Hi.

I was working on the design of the new LLJournal (http://ojs.gc.cuny.edu/index.php/lljournal). Virtually you can customize everything in the OJS, but of course some CSS knowledge is needed. I would recomend to visit an internet contest on css design on this page:

http://www.csszengarden.com.

It was inspiring for me, and there you can download the css file that applys for each design. It's all about how to change the design of the same html file (designers cannot touch the html, but only work on css).

Something important that needs to be taken on account when designing an OJS site, is that the original css (common.css) keeps working unless you rewrites it completely (or you delete it from the server). Anyway, we kept some of its definitions.

If you are interested in our css file, here is the path:

http://ojs.gc.cuny.edu/public/journals/ ... eSheet.css

Regards,
lljournal
 
Posts: 2
Joined: Mon Jan 02, 2006 3:59 pm

Postby silurius » Tue Mar 07, 2006 12:20 pm

I'm still getting up to speed on OJS (and CSS for that matter) so would appreciate a brief walkthrough on the "appropriation" process. Here's my current thinking:

1. Identify OJS site using a CSS I like.
2. Get permission to adapt a version of their CSS.
3. Grab CSS (Firefox plugin or whatever).
4. Edit CSS as needed (giving credit where credit is due).

This is where my understanding stops. If I upload the new CSS via "5.6 Journal Style Sheet" on the "Customizing the Look" page, I assume it removes common.css from the picture. So is that all that needs to be done? where do additional CSS files fit in here? I don't intend to anything incredibly fancy at this stage.

Thanks.
silurius
 
Posts: 10
Joined: Tue Mar 07, 2006 12:11 pm

Postby asmecher » Tue Mar 07, 2006 12:40 pm

Hi silurius,

Stylesheets are loaded in the following order:
  • common.css site-wide stylesheet
  • Journal stylesheet (as per Setup, step 5), if viewing a journal
  • Issue-specific CSS, if viewing an issue
  • Article-specific CSS, if viewing an article
For example, when viewing an article, all of the above are loaded if they're available -- common.css, the journal's custom stylesheet, the stylesheet for the issue the article appears in, and finally the article's stylesheet, in that order.

The site-wide common.css stylesheet is always loaded, but because it's loaded first, any styles defined in it will be overridden by styles with the same name in, for example, the journal stylesheet. Therefore you should be able to customize the look and feel as selectively as you want, without needing to modify or remove the common.css file.

Regards,
Alec Smecher
Open Journal Systems Team
asmecher
 
Posts: 9214
Joined: Wed Aug 10, 2005 12:56 pm

Postby silurius » Tue Mar 07, 2006 1:12 pm

asmecher wrote:Hi silurius,

Stylesheets are loaded in the following order:
  • common.css site-wide stylesheet
  • Journal stylesheet (as per Setup, step 5), if viewing a journal
  • Issue-specific CSS, if viewing an issue
  • Article-specific CSS, if viewing an article
For example, when viewing an article, all of the above are loaded if they're available -- common.css, the journal's custom stylesheet, the stylesheet for the issue the article appears in, and finally the article's stylesheet, in that order.

The site-wide common.css stylesheet is always loaded, but because it's loaded first, any styles defined in it will be overridden by styles with the same name in, for example, the journal stylesheet. Therefore you should be able to customize the look and feel as selectively as you want, without needing to modify or remove the common.css file.

Regards,
Alec Smecher
Open Journal Systems Team
Thanks for the speedy feedback, Alec!

So if I understand correctly, if I am browsing a given OJS site in Firefox I would (via Firefox webdev ext):

(assuming they simply modified the default "articleView.css", "comments.css", "common.css", "help.css" and "rt.css")

1. Browse to main OJS page and view CSS to view "common.css"
2. Browse to an article page to view their "articleView.css"
3. Browse to a help page to view their "help.css"
4. Not sure about "comments.css" or "rt.css"

Once customized (and authorized by original developer) I would then have the option of overwriting these CSS files in my \style folder? I assume this bypasses the need to use Setup, step 5.
silurius
 
Posts: 10
Joined: Tue Mar 07, 2006 12:11 pm

Postby asmecher » Tue Mar 07, 2006 3:40 pm

Hi silurius,

If you find an installation of OJS with a layout that you like, view the source of the page and find out what stylesheets are listed in the header; depending on the approach used by the Journal Manager or system administrator, the changes from a stock OJS installation could take place in any of them. Generally speaking, if the changes aren't made in common.css, they'll be made in one of the stylesheets uploaded via the OJS user interface. These aren't stored in the styles directory; they're stored in the public files directory.

The additional stylesheets in the styles directory (articleView.css, comments.css, help.css, and rt.css) aren't likely to have been modified, but if they have been, you can access them using the steps you outlined above. These stylesheets are used in a few specific places within the system; they contain styles that aren't used widely enough to justify their inclusion in common.css.

Regards,
Alec Smecher
Open Journal Systems Team
asmecher
 
Posts: 9214
Joined: Wed Aug 10, 2005 12:56 pm

Multiple CSS Journals

Postby ramon » Wed May 10, 2006 9:30 am

Hello ALL,

I've been testing OJS2.1, for the future release of Ibict's Scientific Journal Portal, and came across a little problem with css.

When loading a different style sheet to a specific journal, some styles are getting mixed, font-sizes (I use %) get overriden and mixed, making a mess of the layout.

If I change/use the same style sheet in common.css, replacing the original with my own, it works fine.

Should my css have all the styles for all 5 css files?

Any ideas?
ramon
 
Posts: 940
Joined: Wed Oct 15, 2003 6:15 am
Location: Brasí­lia/DF - Brasil

Postby asmecher » Wed May 10, 2006 11:02 am

Hi Ramón,

It helps to consider OJS's layout as the "default" and any custom styles as fine-tuning. It's best to override OJS's styles only when required.

This can be a little more complicated depending on the web design tools you're using or in situations where you're importing preformatted articles into OJS from another system; you may need to override more of the styles.

Regards,
Alec Smecher
Open Journal Systems Team
asmecher
 
Posts: 9214
Joined: Wed Aug 10, 2005 12:56 pm


Return to OJS Editorial Support and Discussion

Who is online

Users browsing this forum: Bing [Bot], Yahoo [Bot] and 1 guest