OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



Changing CSS

Are you responsible for making OJS work -- installing, upgrading, migrating or troubleshooting? Do you think you've found a bug? Post in this forum.

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

Forum rules
What to do if you have a technical problem with OJS:

1. Search the forum. You can do this from the Advanced Search Page or from our Google Custom Search, which will search the entire PKP site. If you are encountering an error, we especially recommend searching the forum for said error.

2. Check the FAQ to see if your question or error has already been resolved.

3. Post a question, but please, only after trying the above two solutions. If it's a workflow or usability question you should probably post to the OJS Editorial Support and Discussion subforum; if you have a development question, try the OJS Development subforum.

Changing CSS

Postby jayanta » Sun Jan 06, 2008 2:03 pm

I have made changes to styles/common.css to change certain aspects. But the changes do not take affect. Is this a cache issue? I did clear theme cache from the admin back end. When I view the associated CSS file through the CSSviewer (firefox) I do see the changes but no affect on the site itself. The site is http://osne.pragfoundation.net. Please help.
jayanta
 
Posts: 2
Joined: Sun Jan 06, 2008 1:55 pm

Re: Changing CSS

Postby jmacgreg » Sun Jan 06, 2008 2:14 pm

Hi Jayanta,

Changes made to the common.css stylesheet may actually be overridden by other subsequent site stylesheets. Specifically, there are separate stylesheets for the sidebars, as well as a theme stylesheet if a theme is enabled (found in plugins/themes/steel/steel.css in your case). I'm guessing that the steel theme's stylesheet is overriding the changes you are making.

What you may want to do is write a separate css file with your changes, and upload it. You can do this in two ways: Site-wide (log in as Site Administrator. go to User Home --> Site Settings, and upload a site style sheet at the bottom of that page); or journal-specific (log in as a journal's Journal Manager, go to User Home --> Setup, and on Step 5 of the Setup process you will find a style sheet upload option).

Cheers,
James
jmacgreg
 
Posts: 4190
Joined: Tue Feb 14, 2006 10:50 am

Re: Changing CSS

Postby jayanta » Sun Jan 06, 2008 2:45 pm

Thanks James.
But the parameters I changed in the common.css are not in the steel.css. So I thought the parameters not covered in the theme specific CSS are controlled by the common.css. For examples, what I changed in the common.css are the following, which are not there in the steel.css.
#headerTitle
font-weight: bold;
width: 900px;
#body
width: 900px;
margin: 0 auto;
Shall I just include these in steel.css to see the changes reflected.
Please clarify. New to OJS although have some experience with other CMS!
Jayanta
NB: I uploaded a journal specific CSS through the admin back end and the changes are reflected. Thanks again.
jayanta
 
Posts: 2
Joined: Sun Jan 06, 2008 1:55 pm

Re: Changing CSS

Postby jmacgreg » Sun Jan 06, 2008 3:03 pm

Hi Jayanta,

Both #headerTitle and #body appear in styles/rightSidebar.css, which would be the culprit in overriding your common.css changes. I would suggest uploading the following css rules as a stylesheet as per my previous instructions:

Code: Select all
#headerTitle   
{
        width: 900px;
}

#headerTitle h1
{
        font-weight:bold;
}

#body
{
        width: 900px;
        margin: 0 auto;
}


Cheers,
James
jmacgreg
 
Posts: 4190
Joined: Tue Feb 14, 2006 10:50 am

Re: Changing CSS

Postby smossbarger » Thu Feb 07, 2008 6:10 pm

I am encountering custom styling difficulties when I try to apply journal-specific and not global stylesheets.

This occurs when any plugins are enabled that come with stylesheets (Rounded Corners, Font Sizing, etc).

Difficulties raised include:

1) page load order: plugin stylesheets that load after the journal stylesheet break the journal stylesheet (it would make sense to load the per-journal stylesheet last by placing it last in the HEAD element of the page -- but read on...)

2) conditional style modifications in per-journal stylesheet: each plugin enabled may require redefinition of styles defined in the journal stylesheet, based on whether a plugin is loaded or not (this might be averted by only defining plugin styles to selectors written to the page that are specific to each plugin, possibly renaming selectors based on plugins enabled, and/or allowing post-plugin journal stylesheet rules to be applied following loading of each plugin stylesheet)

3) Javascript popups: journal stylesheet modifications affect popup styles in Journal Help or contextual role help, whether or not journal owners want theming to carry over to popups (maybe a different selector naming scheme for these "support" pages?)

Are any patches contemplated for these issues? Currently we have to rely on all kinds of nasty hacks involving post-load Javascript, conditional template code, etc. to apply per-journal, non-global markup and styling (involving using mandated institutional templates for internally managed journals and free-form styling for all other journals). As I'm primarily a programmer, it's currently quite time-consuming to figure out CSS solutions with all of the new plugins.

That said, we really love the plugin exposure/per-plugin enabling that comes with v2.2.

Thanks in advance for any suggestions you may have in the meantime, say for issue 1) above -- I would be happy to edit code, then undo the code and apply any patches if/when released. (Have to say it: OJS is a fantastic product.)

--Stephen
smossbarger
 
Posts: 11
Joined: Thu Nov 01, 2007 2:31 pm

Re: Changing CSS

Postby asmecher » Fri Feb 08, 2008 11:58 am

Hi Stephen,

This is a tricky one, as it's hard to find an approach that'll work smoothly for everyone. My suggestion would be to use the following approach: Try to override only the styles that need to be overridden in your per-journal CSS. This assumes the stock OJS stylesheet as a basis for your design, and if that's not a good assumption (i.e. if you're having to override every style that comes with OJS) it might be worth coming up with your own site-wide CSS.

This way the current order of CSS inclusion should work fine and shouldn't prevent you from a) coming up with clean designs while b) still keeping the functionality e.g. of the font sizer.

If I've missed a point in your message, please let me know!

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


Return to OJS Technical Support

Who is online

Users browsing this forum: No registered users and 5 guests