styling article lists and html version

[idunnsem]

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!

[jmacgreg]

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

[idunnsem]

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

example error

Picture 53.png (105.5 KiB) Viewed 1134 times

ps! css is a default OJS one

see example below where right side bar contains anchors and displays proparly

[jmacgreg]

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

[jbustos]

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

[jmacgreg]

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

[jbustos]

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

[jmacgreg]

Hi Jaime,

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

Cheers,
James