OJS 3: small logo in bootstrap theme

How i could customize logo using bootstrap theme?
It looks small

Hi @kawahyu,

You can increase the size of the logo in the Bootstrap theme with the following CSS code:

.navbar-brand {
  height: 100px;
}

You’ll notice that this can throw off the alignment of the nav menu and other things. Are you comfortable working with a Child Theme to extend the theme with custom code? If so, you’ll want to override the LESS variable @navbar-height.

For instance, if you’ve loaded up your own child theme, the following example would override the @navbar-height variable:

public function init() {
    $this->modifyStyle('default', array('addLessVariables' => '@navbar-height:100px;'));
}

Hi @kawahyu,
in which file excactely this modification should be made as there is many CSS files in OJS?

.navbar-brand {
  height: 100px;
}

Hi @vebaev,

The easiest way to add small bits of CSS code like this is to add a journal-specific CSS file under Settings > Website > Appearance > Journal Style Sheet. This file isn’t overwritten every time there’s an update to the application, so it’s the safest place to put small CSS changes.

If you plan to make a bunch of CSS changes, the best way to do this is with a child theme.

2 Likes

Hi,

I tried to increase the size of the logo in the Flatly theme with your code but nothing happened:

.navbar-brand {
height: 100px;
}

I added a journal-specific CSS file under Settings > Website > Appearance > Journal Style Sheet.

What else should I do?

Post a link to your site so that others can check to see if the new CSS code is being loaded.

Is this:

http://studio.ojs.lat/ojs302/index.php/rici/index

Thank you in advance for any help you can provide.

Looks like it’s a specificity issue. Try increasing the specificity with this code:

.navbar-header .navbar-brand {
    height: 100px;
}

Great,

Works!

Thanks @NateWr!

1 Like

Try this navbar - Bootstrap 4 Simple Navbar with hover Example