Customize bootstrap theme ojs 3.1 (Header, etc)

Software Support
1

Dear all,

  1. Can the header of Ojs be displayed like this forum’s?
    If we scroll down, it follows

  2. How to change Register and Login color in Bootsrap theme without affceting other nav bar items? http://ulumuna.or.id
    I have tried but could not find proper css position

@israel.cefrin @anupent

2

Hi @kawahyu

  1. Edit your template theme, find header element with class="navbar" and add navbar-default navbar-fixed-top to class. E.g.: <header class="navbar navbar-default navbar-fixed-top">

  2. You may format those A HREF itens with CSS through ul#navigationUser li a selector (in this specific case).
    E.g.:
    ul#navigationUser li a {color: red;} /* don't code CSS in online, it is just a example :) */

You may see it in action in this link: Fixed Top Navbar Example for Bootstrap

OJS3 themes are built upon BootStrap Framework, that way mostly features found in BootStrap3 documentation should work with a minimum code adjustment in OJS theme files.

Regards,
Israel Cefrin
Public Knowledge Project Team

2 Likes
3

Thanks a lot @israel.cefrin
image

  1. What css codes to change galley background?
  2. How to customize Abstract views in a box like DOI?

I have tried myself but could not find the proper css codes

4

Hi @kawahyu

In some cases you need adjust your theme to BootStrap components that are built in with OJS3 themes.
What you are asking is related to panel components of CSS framework, see here:
https://getbootstrap.com/docs/3.3/components/#panels

Regards,
Israel Cefrin
Public Knowledge Project Team

1 Like
5

Hi all, @israel.cefrin @anupent
I added the following codes through css:

.media {
border-radius: 5px;
padding: 10px 10px 10px 10px;
}

It customizes some items; Announcement, Archive, Article summary.
I want to change the Announcement look, without border.
What is the specific css refer to it?

Thanks a lot

6

Can you be more specific on what exactly you are looking for. Please include link to your website along with what you want to accomplish.

Regards,

7

http://ulumuna.ac.id
I want to omit or customize the Announcement page. What css codes refer to it? I used .media {…} which customize other items

8

If you want to omit the announcements, you can simply unselect the checkbox in
settings → website → announcements.

If you want to customize, I may help you if you ask me any specific questions.
image

9

Thanks for your fast response. I am sorry for not specifying what I want to do. Here it is

image
image625×515 114 KB

I used the css below

.media {
border-radius: 5px;
padding: 10px 10px 10px 10px;
}
which changes some items look: Announcement, Article Details and Archive. I want to omit the border around the Announcement but could not find the exact css. What is css codes to do it?

10

Hi @kawahyu,

Your website http://ulumuna.or.id is too slow, mate and
http://ulumuna.ac.id is not available.

Can you try this:

section.cmp_announcements.media {
     border: none;
}

Regards,

1 Like
11

Thanks.
Yup, it is about server. We asked to change the server to our server provider

12

Saludos me podrías indicar como lograste el estilo de tu sitio. Estoy usando theme bootstrap.
Gracias

13

Halo Pak Kawayhu,

Salam kenal. Saya mau bertanya kalau mau mengganti header dgn logo bagaimana caranya ? Terimakasih

14

Dear @NateWr

Is it possible to display the articles in the current issue as a simple card? It is like @Vitaliy did in http://ojsdemo.e-medjournal.com/index.php/oldGregg/index (without image)

Thanks

@anupent

15

Hi @kawahyu,

I have not tried myself, but you can study @Vitaliy theme and journal home page and have an idea from there.

Basically you need to add support for bootstrap 4, and customize your template for current issue. Maybe @Vitaliy can help you more with how to proceed.

Best regards,

16

Bootstrap 3 also has some similar design patterns you can use: thumbnails with custom content
and panels.

17

I am trying to understand latest articles by @Vitaliy here https://github.com/Vitaliy-1/oldGregg/blob/master/templates/frontend/pages/indexJournal.tpl to adapt in bootstrap3/indexJournal.tpl at master · NateWr/bootstrap3 · GitHub

Any hint to start with? @NateWr

18

Most of back-end work is done in this method: https://github.com/Vitaliy-1/oldGregg/blob/master/OldGreggThemePlugin.inc.php#L209

1 Like
20

Estoy usando la versión 2.4.8.
Como puedo modificar la interfaz como por ejemplo el menú principal, agregar un pie de pagina.

21

Hola, @Elizabeth_Beltran
No entiendo español. Obtuve esto de traductor de google.
Nunca (casi nunca) he usado 4.8.
La temática se ha vuelto fácil a partir de OJS 3 en adelante y tengo alguna idea de tematizar con esta versión más nueva. No estoy seguro de cómo funciona el tema en la versión anterior.
Lo siento compañero.

atentamente,