OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



styling article lists and html version

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.

styling article lists and html version

Postby idunnsem » Tue May 18, 2010 6:41 am

We would like to display our articles with icon and HTML versions (similar to how International Journal of Design does it http://www.ijdesign.org/ojs/index.php/I ... ue/view/23 ). How do we set that up? I have looked though the settings and got that it is in the Galley section that the HTML is done, but I still have some questions:
1. will the html version of the article adapt the journals css if nothing else is uploaded?
2. if we want to have other styles on the html versions, is this uploaded as supp.files for every article?
4. and can videos to be viewed inside the html versions as well be added as supplementary files?
5. and how do we upload and mark what we want as the articles icon?

thank you in advance for helping out. much appreciated!
idunnsem
 
Posts: 2
Joined: Tue May 18, 2010 2:03 am

Re: styling article lists and html version

Postby jmacgreg » Thu May 20, 2010 10:21 am

Hi Idunn,

1. will the html version of the article adapt the journals css if nothing else is uploaded?


Yep!

2. if we want to have other styles on the html versions, is this uploaded as supp.files for every article?


Not as supplementary files, but as separate article css files during the galley edit process. Unfortunately, you can't currently specifically upload one file for all articles via the OJS interface; but you could always modify styles/articleView.css manually.

4. and can videos to be viewed inside the html versions as well be added as supplementary files?


Yes -- you can either upload videos separately and link to them in the HTML, or upload them as supplementary files and link to them via HTML, using the following syntax: viewtopic.php?f=8&t=2917.

Other links of interest: viewtopic.php?f=2&t=3215; http://pkp.sfu.ca/wiki/index.php/Embedd ... S_and_OCS; viewtopic.php?f=8&t=5956.

5. and how do we upload and mark what we want as the articles icon?


You can upload a "cover" for each article by logging in as an Editor, going to each submissions' Summary page, and editing the submission's metadata. You'll find a "Cover" section there.

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

Re: styling article lists and html version

Postby idunnsem » Wed May 26, 2010 4:51 am

thankyou! this works well... except for the right side bar. when you read a submissions summary or html version it does not list the anchors, as International JOurnal of Design, and it appears as a frame with scrollbar....see attachment

Picture 53.png
example error
Picture 53.png (105.5 KiB) Viewed 1365 times

ps! css is a default OJS one

see example below where right side bar contains anchors and displays proparly
Attachments
Picture 57.png
example where right side bar contains anchors and displays proparly
Picture 57.png (199.14 KiB) Viewed 1365 times
idunnsem
 
Posts: 2
Joined: Tue May 18, 2010 2:03 am

Re: styling article lists and html version

Postby jmacgreg » Fri May 28, 2010 4:45 am

Hi Idunn,

The International Journal of Design has extensively modified their Reading Tools frame/bar -- you could always ask them what they did to get that effect. Otherwise, you may want to play with the frame width in the templates.

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

Re: styling article lists and html version

Postby jbustos » Wed Aug 18, 2010 6:58 pm

hi,
how to setup the TOC to show the articles with alternating backgrounds (white-blue for odd-even articles)?
I´ve been looking at the common.css to change the properties of the TOC but do not know how to do the alternating coloring
thanks
jaime
Attachments
IJMHEUR.JPG
IJMHEUR.JPG (138.87 KiB) Viewed 1214 times
jbustos
 
Posts: 4
Joined: Mon Aug 02, 2010 10:09 am

Re: styling article lists and html version

Postby jmacgreg » Fri Aug 20, 2010 8:12 am

Hi Jaime,

That doesn't look like an OJS journal to me. To do what you want to do would require some fairly significant code changes, probably -- you would have to find a way to iterate between subsequent ToC entries; assign each row a particular class type (eg. <tr class="even">, <tr class="odd">) and then add some css to style those rows how you want. Definitely doable, but maybe a bit tricky. Give it a shot; and let us know if you need any pointers.

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

Re: styling article lists and html version

Postby jbustos » Mon Aug 23, 2010 12:41 pm

Hi James,
thanks for the tips ...
i´ve implemented it ...
you need to define the two groups of classes for the fields in the table of contents (one with color background). They are defined in the "common.css" file. You can create a new style sheet and add it in the section "Home > User > Journal Management > Journal Setup > Journal Layout" (5.6).

The style sheet (newstylesheet.css) should look like:

table.tocArticle td.tocTitle {
width: 70%;
height: 100%;
font-style: bold;
background-color:#EAF2D3;
}

table.tocArticle td.tocTitle2 {
width: 70%;
height: 100%;
font-style: bold;
background-color:white;
}

here you need to define the classes for all the fields in the table row: td.tocGalleys2, td.tocAuthors2, td.tocPages2

Next, you need to modify the "issue.tpl" template to implement the use of alternating format classes inside the loop (foreach) that displays the rows of the table.
You need to use a dummy variable "flag" switching from 0 to 1 accordingly with even/odd pages. Using an "if-else" you can decide what format class to use.
The new "issue.tpl" should look like:

... code for display of header of TOC, including two "foreach" instructions
{if $flag==0}
{assign var=flag value=1}
<td class="tocTitle">
.... other code for displaying different fields of the current row of the TOC for odd row numbers
{else}

{assign var=flag value=0}
<td class="tocTitle2">
.... other code for displaying different fields of the current row of the TOC for even row numbers
{/if}

I´m attaching a sample of the new look of the TOC. I could not attach the "css" and "tpl" files

thanks again
Jaime
Attachments
RevICHIO.JPG
the new look of the TOC
RevICHIO.JPG (106.72 KiB) Viewed 1185 times
jbustos
 
Posts: 4
Joined: Mon Aug 02, 2010 10:09 am

Re: styling article lists and html version

Postby jmacgreg » Wed Aug 25, 2010 9:43 am

Hi Jaime,

That looks great! And thanks a lot for sharing -- I'm sure others will find your post useful.

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


Return to OJS Editorial Support and Discussion

Who is online

Users browsing this forum: kopi and 3 guests