How to include bootstrap in other themes

Software Support
1

Hello everyone .
Im new to OJS 3 and i was wondering if there is a way to include/load Bootstrap in default-manuscript theme ? been reading and playing with codes for hours and no luck .
is there any easy way to do this by adding few lines to the theme ?

2

You can look as example at this my repository. I have combined here Bootstrap and JQuery UI in default manuscript theme. But there is additional modification of templates, which you probably will not want to apply: GitHub - Vitaliy-1/defaultManuscript: default Manuscript theme for use with jatsParser plugin

3

sounds Awesome ! is there any online example or demo of this ?

4

worked like a charm ! Thanks !

5

Hey is there any way that I can change the navigation menu for the mobile screen and just have a menu button for that?
what file should I edit?

6

The easy way is to apply bootstrap to your theme and modify your header appropriately: Components · Bootstrap

7

not so easy ,hahaha
I mean i need to know where to start ? what file should i look into

8

Maybe not easy, but as I am aware - the easiest. There is no need to deal with javascript.

You need to copy this file from you OJS installation: pkp-lib/header.tpl at 27e07db99343939197a32a19d7bc215ae682a5d2 · pkp/pkp-lib · GitHub
into according theme plugin directory:
defaultManuscript/templates/frontend/components at master · Vitaliy-1/defaultManuscript · GitHub

Then find there the code for the navigation menu and replace it by bootstrap tags. As example, this part of code from bootstrap link:

<ul class="dropdown-menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li role="separator" class="divider"></li>
  <li><a href="#">Separated link</a></li>
  <li role="separator" class="divider"></li>
  <li><a href="#">One more separated link</a></li>
 </ul>

should be transformed into:

<ul class="dropdown-menu">
  <li>
    <a href="your link here">
	About the Journal
    </a>
  </li>
   <li>
     <a href="your link here">
      Editorial Team
     </a>
   </li>	
   etc...	
 </ul>
9

I recommend to perform all manipulations with the code on your local machine with the test environment firstly.

10

Thanks Vitaliy ! im gonna start playing with it !