We are moving to Git Issues for bug tracking in future releases. During transition, content will be in both tools. If you'd like to file a new bug, please create an issue.

Bug 5827 - Page-specific classes would be useful for styling - Reading Tool templates - patch
Page-specific classes would be useful for styling - Reading Tool templates - ...
Status: NEW
Product: OJS
Classification: Unclassified
Component: Reading Tools
All All
: P5 enhancement
Assigned To: PKP Support
Depends on:
  Show dependency treegraph
Reported: 2010-08-27 13:28 PDT by Nick Freear
Modified: 2014-08-19 11:40 PDT (History)
3 users (show)

See Also:
Version Reported In:
Also Affects:

Patch to add context-based classes to reading tool pages. (934 bytes, application/octet-stream)
2010-08-27 13:28 PDT, Nick Freear

Note You need to log in before you can comment on or make changes to this bug.
Description Nick Freear 2010-08-27 13:28:36 PDT
Created attachment 3200 [details]
Patch to add context-based classes to reading tool pages.


It would be useful for me, and I'm sure others, if pages had contextual classes to assist styling (eg. different sized logos on some pages). I attach a patch to add classes to one of the outer elements on the reading tool header and the reading tool frame (rt.tpl). (As previously, the patch is against my SVN repository (OJS 2.3.1-2), but will hopefully be useful for the master Git.)

Index:  templates/rt/header.tpl
 {if !$pageTitleTranslated}{translate|assign:"pageTitleTranslated" key=$pageTitle}{/if}
-<div id="container">
+<div id="container" class="RT popup-page">
 <div id="header">

BTW, I'm currently converting the Journal of Interactive Media in Education to OJS,
Comment 1 Nick Freear 2010-09-01 04:33:57 PDT

I forgot to say, "please" can you look at this proposal...

And thank you for looking at #5825 quickly :)


Comment 2 Alec Smecher 2010-09-01 18:59:29 PDT
Hi Nick -- I'm not much of a CSS expert, but this solution looks a little messy to me. Are you writing up a single journal stylesheet to apply to both the main site and the RT pop-up view? I wonder if renaming the RT pop-up's container ID would be cleaner.
Comment 3 Nick Freear 2010-09-02 04:37:36 PDT
(In reply to comment #2)
> Hi Nick -- I'm not much of a CSS expert, but this solution looks a little messy
> to me...

Hi Alec,

Thanks for looking at this.

I didn't want to remove/replace IDs or classes, as this may break other people's themes. However, I'm OK if you want to try this - as long as the classes are on either the <html>, <body> or outermost <div>.

And I'm not sure about messy. If you look at for example the classes/IDs on the <body> element of a Moodle page, there are a lot. For example,
    <body class="course course-1 notloggedin dir-ltr lang-en_utf8" id="site-index">...
    <body class="mod-forum course-5 dir-ltr lang-en_utf8" id="mod-forum-discuss">...
    (http://moodle.org/ - Home page, and a forum discussion.)

This gives designers/developers a lot of control.
    (Later I may have a proposal for some classes on a link, eg. <a class="RT popup.." ..>, so #container may be a useful differentiator. Eg.
    #container.RT.popup-page {..}
    a.RT.popup {..}
And yes, I'm developing a theme plugin, with a single style-sheet for all pages.

Thanks again,

Comment 4 JQ Johnson 2011-10-25 23:01:52 PDT
I would like to add my voice to Nick's that this sort of change would make it much easier for journal managers who are not also site manager.   An alternative to adding a new class associated with the div#container would be to add a new ID associated with the body tag.  For instance, the templates could be modified to generate

<body id="index">
<body id="rt-popup-page">

Then the CSS author could simply conditionalize rules as applying only within a body.rt-popup-page, for instance

body.rt-popup-page container { whatever }

This is almost the same semantically as Nick's approach.

Note that although including such IDs in the popup page is a big step forward, it would be even better to modify core:common/header.tpl to specify an ID perhaps based on page title or something.  What I'd like to be able to do is, for instance, to apply styles to the components of the header on the journal index page differently from other site pages.
Comment 5 Alec Smecher 2011-10-26 09:50:18 PDT
We identify pages within OJS by their "page" and "operation" names -- these are the second and third parts of the URL after the "index.php". (The first identifies the journal in a multi-journal installation.)

How about including each of those three parts -- the journal, page, and operation -- in class names? e.g.:

<body class="journal-myJournal page-article op-view">

That way the CSS rule could select based on any or all of those levels.