Move announcements below table of contents on homepage

Software Support
,
1

Hi,

I’m new to editing CSS and was wondering if anyone could provide advice on how to move the Table of Contents up on the homepage and move all the latest announcements below it? Is this possible to do by simply editing the journal’s stylesheet?

We are using the default theme of OJS3 - journal is here.

Many thanks in advance for any guidance!

-Emily

2

Hello Emily,

Unfortunately, I don’t think this is something that can be done reliably using CSS alone - the HTML div container for announcements itself would probably need to be moved under the div container for current issue information. Depending on your hosting situation and your ambition, you might want to try editing the HTML/Smarty templates, but it requires access to the backend (read more here).

3

Thanks Emma - I think that’s outside of my comfort-level for the moment and I don’t have access to the back-end. But it’s good to have an understanding of how one would go about it if it becomes a major need in the future - for now it is just a nice-to have. Thanks!

4

This is possible using CSS flexbox. For example we move the additional_contents section before the table of contents in several of our journals, e.g. https://www.psychoanalyse-journal.ch , without having to change the template and to reorder the div elements.

Have a look at flexbox there: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The order can be changed e.g. by adding these CSS flexbox elements to body.less

// Change order with flex
.page_index_journal {
display: flex;
flex-direction: column;
}

.cmp_announcements {
flex: 1;
order: 2;
}

.current_issue {
order: 1;
}

.additional_content {
order: 3;
}

3 Likes
5

Brilliant - that does the trick!! Thanks a bunch for this tip.

6

Thank you for your Message,

I’ll check this and will come back with news

See you

7

Thanks A Lot friend, Your advice is exactly that I was needing, I could change the order only with css flexbox,

KR

1 Like