[Ojs 3] Costumize child theme (footer etc)

Software Support
1

Dear @NateWr and all,

First, I want to put the brand content to the bottom-center, so I can add any information to the left and right side.
I tried this code,

.pkp_brand_footer {
float:bottom;
position; center;
width: 30%;
padding-bottom:10px;
padding-top: 50px;

But it puts the brand content to the bottom-left under left footer content.

Second, how I add another footer content to be placed in the right side after successfully placing brand content to the bottom-center ?

Here is my journal http://jurnalbeta.ac.id

2

I don’t think you’ll be able to accomplish the layout you want without either editing the template file or doing some really painful CSS gymnastics.

If you want to put some of the .pkp_footer_content on the left and some on the right, you’ll need to nest this content in sibling elements and set the appropriate floats. So the content might look like this:

<div class="footer-left">
  <div><strong><small>Editorial Office:</small></strong></div>
  <div><small><img src="/public/site/images/admin/location.png" alt="">&nbsp;&nbsp; Gedung B Fakultas Ilmu Tarbiyah dan Keguruan </small></div>
  <div><small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Universitas Islam Negeri (UIN) Mataram</small>  </div>
  <div><small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Jln. Gajah Mada 100 - Jempong Baru - Mataram 83116</small></div>
  <div><small><img src="/public/site/images/admin/Gmail1.png" alt="">&nbsp; jurnalbeta@gmail.com</small></div>
</div>
<div class="footer-right">
  <!-- Any other content you want to appear -->
</div>

You can then target this with CSS like this:

.pkp_footer_content {
  float: none;
  width: 100%;
  clear: both;
}

.pkp_footer_content .footer-left {
  float: left;
  width: 50%;
}

.pkp_footer_content .footer-right  {
  float: right;
  width: 50%;
}

That will get your content left and right. But with floats you can’t then inject the brand logos into the middle of that. You’d need to modify the footer template to display it between two divs instead of after them, which won’t work with the footer content feature under Settings > Website > Appearance, because it only offers a single HTML blob.

The easiest thing to do would just be to display the brand stuff below your left and right content. You can easily center it there and won’t need to do anything tricky.

On a separate note, when you’re making these changes, beware of how they effect the view on small screens like mobile devices. You need to use media queries to apply your horizontal layouts only on larger screens. For example, this is what your footer looks like on a small mobile screen now:

3

Thanks a lot @NateWr for the consideration.
Yups, the footer looks bad at mobile.

4

Hi @NateWr
I have changes the footer so that it looks better in mobile. I have two questions here,

  1. What css codes refer to the following background? I want to change the background. I tried using inspect element but could not find the codes

image

  1. I want to change the color of the ojs footer picture to white in order to adjust with the background. I tried the following codes in css but nothing change

img {
color: white;
}

http://jurnalbeta.ac.id/index.php/betaJTM

5

Hi @kawahyu,

  1. Try:
#navigationPrimary ul {
  background: #595959;
}
#navigationPrimary [aria-expanded="true"]:before {
    border-bottom-color: #595959;
}
  1. You can’t change the color of an image. An image contains the color information baked into it. I’d recommend changing the background color of the area the image sits on, so it matches the off-page background of that theme:
.pkp_brand_footer {
  background: #e6e6e6;
}
6

Thanks a lot @NateWr

7

Hi @NateWr
Is there anyway for child theme to display journal summary in journal homepage as in boostrap theme?

image

8

Sorry for many questions
image

How to make title Licence and Journal Stats in Additional Content automatically follow sidebar title?
I tried using codes div class=“title” but it doesn’t work

9

You’ll need to override the indexJournal.tpl page template to add the journal summary.

How to make title Licence and Journal Stats in Additional Content automatically follow sidebar title?
I tried using codes div class=“title” but it doesn’t work

Can you share a link where you’d like to change this?

10

Thanks @NateWr
Here is my journal, Licence and Journal Stats are in additional content
http://jurnalbeta.ac.id/index.php/betaJTM

I take a look at indexJournal.tpl in theme/boostrap/page. I see codes

{if $journalDescription}
…
…
…

I tried to add them in template/frontend/page/indeJournal.tpl

image
image842Ă—290 14.4 KB

How do I customize them?

11

@varshilmehta
http://jmri.org.in/index.php/jmri/index has a great modification for the indexJournal.

12

It looks like you’re modifying the HTML code of the content you’re putting into the Additional Content area. Try the following HTML pattern for titles and content:

<div class="pkp_block">
  <div class="title">My title</div>
  <p>content...</p>
</div>
1 Like
13

The color can also be modified from the * .tpl files, for example footer.tpl from the path:

journal / plugins / themes / bootstrap3 / templates / frontend / components