Manuscript child theme - display an image alongside announcement on home page

Software Support
1

Hi @NateWr,

How do I add an image to be displayed alongside the announcement right below the navigation menu on the home page?

I love this child theme. Thank you.

Paul

2

Hi @Paul_Chen,

OJS doesn’t yet support images for announcements, so the theme has nothing to display.

3

Hi @NateWr ,

Good morning. I think I didn’t make myself clear about this. With this child theme, there is an empty box between the first announcement and the right sidebar on the home page (see the image). I thought I saw an image there on some of the example screen shots. I tried to find the related screen shot this morning but I couldn’t find any. If that box is not for image, what is it for?

02

Thank you.

Paul

4

Hi @Paul_Chen,

That box on the right will show more announcements when more exist. You can see an example in the screenshots on theme’s release announcement:

You may be thinking of the image that appears above the announcements. You can add this under Settings > Website > Appearance > Homepage Image.

5

Hi Paul
You can view one installation with annoucements (2, default presentation)
http://linguamatica.com/index.php/linguamatica

6

@NateWr and @Carlos_Ferreira,

Thank you for your assistance. I now understand what that box is for.

Paul

7

@NateWr,

I noticed large top and bottom padding (white space between texts and the borders) in the announcement boxes. How do I modify the margins? I tried but couldn’t find the right elements.

Thank you!

Paul

8

Hi @Paul_Chen,

If you share a link to the site where you’d like to change things I can probably suggest some quick CSS code.

9

Hi @NateWr ,

Here is the link: http://abepublishing.org/ojs311/

Thanks.

Paul

10

Hi @Paul_Chen,

This will reduce the white space above and below the announcements within the component:

.pkp_page_index .cmp_announcements .more, .pkp_page_index .cmp_announcements h2 + .obj_announcement_summary {

    padding-top: 40px;
    padding-bottom: 40px;

}

You can change 40px up or down to get the spacing you like.

11

@NateWr,

It worked at first but when I added something else to reduce the line spaces between article listings, the whole website seems to have lost all the styles even after I removed the css file. I thought uploading customization css is a non-invasive approach. Could you help me figure out what went wrong? Thank you very much!

Paul

12

Link to this results in HTTP error 500:

http://abepublishing.org/ojs311/index.php/ijabe/$$$call$$$/page/page/css?name=stylesheet

This page isn’t working
abepublishing.org is currently unable to handle this request.
HTTP ERROR 500

13

Hi @Paul_Chen,

That page looks like you don’t have control over the domain name. You’ll need to follow that up with your web host.

If you share the CSS code you’ve adjusted I’ll take a look. Writing malformed CSS code can cause a fatal error in the LESS compiler, which can lead to no CSS file existing. That sounds like what probably happened when you didn’t see any styles. Having access to your server’s error log will give you a clear error message to fix this.

14

@NateWr,

I suspect domain isn’t an issue as I am running multiple instances of OJS on the same host. This installation in question is a testing one.

I am also not sure if the css code is doing anything to the problem because the problem remains even after I deleted the css file. It seems the process of adding customization css altered something in the database. Here is the css code I used initially. It worked. Then I added a few lines following this example (I don’t have those lines anymore.). At first it didn’t produce any difference. After a few attempts, the problem occurred.

.navbar-header .navbar-brand {
   // height: 200px;
		font-size: 26px;
		}
		
.pkp_page_index .cmp_announcements .more, .pkp_page_index .cmp_announcements h2 + .obj_announcement_summary {

    padding-top: 25px;
    padding-bottom: 25px;

}

Thank you.

15

Hi @Paul_Chen,

I don’t see anything at first glance. You’ll need to check your PHP error log to see if you’re getting an error message.

If you’ve made modifications directly to the Manuscript theme files, you may want to reinstall the theme. Generally, it’s not recommended that you change the files directly. You can create a Child Theme to add styles, or you can upload a .css file under Settings > Website > Appearance if you prefer. Either way, it’s easier to revert changes that cause problems like this.

16

@NateWr,

Thanks for response. I checked the PHP error log. There is error when I loaded the page.

I didn’t not make any changes to the theme files while this was happening. I did upload .css file using the method you described. I am using the Manuscript child theme you developed. So I don’t know what could go wrong. I will probably replace the entire theme folder with original one. But I am still curious what went wrong.

By the way, for custom css, is it possible in the next version/build that custom css can be entered directly through web interface instead of uploading css file? This is how is done in many content management system.

Thank you again.

Paul

17

I replaced default and it didn’t work. I then replaced defaultManuscript and it worked. I put the old defaultManuscript back. It also works. So I don’t know what is going on. Could be cache related issue.

1 Like