OJS 3 bootstrap child theme

OJS 3.02 PhP 5.5

I’ve made my own child theme using bootstrap 3 based on flatly. It is called IJICTA

Like many here I’m trying to resize my logo and to sort out the menu placement.
What I would like to do now is to get the menu to align to the bottom of the logo, not the top of the logo. As the logo gets larger the menu keeps moving up. To see what is happening look at ijicta.org

And yes the logo likes quite poor, but it is serving its purpose for this testing. I appreciate the bootstrap 3 themes, now trying to work out a few of the alignment issues. Any hints more than welcome :slight_smile:

modifications include
/plugins/themes/bootstrap3/bootstrap-themes/ijicta/ijicta.less

&-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}

/plugins/themes/bootstrap3/styles/bootstrap.less

.navbar-brand-logo img {
max-height: 200%;
width: auto;
}

/plugins/themes/bootstrap3/BootstrapthreeThemePlugin.inc.php
added to init()

$this->modifyStyle(‘default’, array(‘addLessVariables’ => ‘@navbar-height:200px;’));

Hi @MarkAGregory,

I’d caution against using the absolute positioning technique that you’re using for the logo. As you can see in this screenshot, it causes problems when viewing the site on a smaller screen, like a tablet.

First, I’d recommend reverting the styles in ijicta.less and the changes made to styles/bootstrap.less. Then I’d set the @navbar-height to 100px intead of 200px as you’ve done.

Then add the following to your ijicta.less file:

.navbar-collapse {
  padding-top: 20px;
}

That may or may not go to plan. You may need to adjust the padding to get it centered based on how tall you want the navbar to be.

Hi, it did not go as planned as the logo is now higher, on the left and the same size - it is unacceptable.
What I’ve done.

  1. returned /plugins/themes/bootstrap3/bootstrap-themes/ijicta/ijicat.less back to original
  2. returned styles/bootstrap.less back to original
  3. set /plugins/themes/bootstrap3/BootstrapthreeThemePlugin.inc.php
    added to init()

$this->modifyStyle(‘default’, array(‘addLessVariables’ => ‘@navbar-height:100px;’));

  1. added the following to /plugins/themes/bootstrap3/bootstrap-themes/ijicta/ijicat.less

.navbar-collapse {
padding-top: 20px;
}

One of the major issues is the massive size of the search box compared to the logo and the menu font. Is there a way to match the search box and text to what’s happening on the other side?

Hi @MarkAGregory,

It doesn’t look like the @navbar-height change is taking effect. Try the following to increase the size of the logo in your custom ijicat.less file:

.navbar-brand {
    height: 100px;
}

If you don’t like the size of the form elements in the theme, you’ll need to use CSS to change those in your custom theme. You an learn more about input groups in Bootstrap3 here:

That did not appear to work either. It would be useful if anyone else working on themes might be able to shed some light on how to fix this issue. Any assistance welcome.

Hi @MarkAGregory,

Is CSS successfully loaded?
Are you familiar with CSS priority rules? You can add !important property to check if your selector in not forking because of priority.

Hi Vitaliy,

how would I do this for the navbar-brand code mentioned earlier?

.navbar-brand {
       height: 100p !important;
}

Something like that (keep in mind, that I don’t know names of you html elements). But I don’t recommend to use this for production purpose, only for testing.