Problem styling HTML Galley OJS 3.0

@adm_sub,

It seems that for HTML Galley Plugin the version.xml file hasn’t been updated for a long time. Anyway, it should be the version that goes with OJS 3.1.2 release, e.g.: ojs/plugins/generic/htmlArticleGalley at stable-3_1_2 · pkp/ojs · GitHub

If it’s the one, can you check PHP logs ones more?

Hello! I am relatively new to the OJS game and trying to get up to speed on the proper way to format my HTML galleys so that they are wrapped in the OJS styling. So far, besides broken image links I need to fix, it’s working beautifully on mobile and on other smaller screen sizes, but on desktop, everything below the title and back button provided by OJS gets squished to the left instead of taking up the full screen. I have inspected the code and tried to find the culprit but am coming up empty handed. Any ideas on how to fix this? Here is a link to my tester article: View of Third Space as Decolonial Con/Text: Okinawa’s American Champurū | Transnational Asia

UPDATE: I figured it out. The default CSS had some odd restrictions on width for the media calls. I fixed it by inserting this code into the html body:

<style>@media (min-width: 992px) {
    body {
        max-width: 100%;
        margin: auto;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    body {
        max-width: 100%;
        margin: auto;
    }
}
@media (max-width: 767px) {
    body {
        padding-left: 5px;
        padding-right: 5px;
    }
}</style>

Hi @aszymczyk,

Just want to note that your approach has a side effect - links in the header (inside the iframe) don’t work as they should, at least on my environment.

The links seem to be working fine for me so far. Maybe it’s a difference in our themes?

I’ve looked at the instance available by the link you provided. When I trying to navigate from the HTML galley page by the links in the header, e.g., by pressing archives or the current link, the actual page loads but URL stays the same. I’d move anything except the HTML galley itself out from the iframe.

I mean, I would avoid including the parts of the site markup, like header or footer, inside the HTML galley file, so they are displayed inside the iframe on the front-end, as per your example.

Oh, I see! I’m not sure how I would display the site header, footer, and the sidebar without including the site markup in the html galley file. I know I could upload my own CSS file, but I’d still need the content somewhere? I think I’ve cobbled together a solution. I’ve added a target="_parent" attribute to all of my external hyperlinks which seems to do the trick. Admittedly, this might be a clunky solution. If you have a more elegant one, I’m happy for the advice! My skill level is somewhere around “knows just enough to be dangerous.” :slight_smile:

It’s possible to create a child theme and override HTML galley template.

great data! always solving things, thanks for sharing solutions