Bootstrap Theme Questions

NettoHikari

Hello, guys!

I have a relatively simple question for you guys. I recently set up Vanilla and it goes along quite nicely with the website I'm currently building by hand. I'm a experienced Java & .NET developer, but I never actually learned HTML, CSS, Javascript, PHP and so on, so I decided it would be time to catch up on that.

Well, I'm using the theme "Bootstrap" to match the look of my forums with the rest of my website. However, I can't remove the inverse effect from the navbar. I'm simply unable to find any CSS for that.

Feel free to take a look at my (currently pretty much empty) forums here: http://forum.bln.lv/
This is what it should look like (navbar): http://bln.lv/

Any help is appreciated. Greetings from Germany,

• N. Hikari

whu606

@NettoHikari

Welcome to the Vanilla community.

Using Firebug in Firefox (other element inspectors available) you can find the name of any css element that is being applied, and the file it is being called from.

In your 'correct' link, the css is being applied from bootstrap.min.css

.navbar-inner { background-color: #FAFAFA; background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2); background-repeat: repeat-x; border: 1px solid #D4D4D4; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); min-height: 40px; padding-left: 20px; padding-right: 20px; }

In your 'incorrect' dark example, the css rule is being called from http://forum.bln.lv/ line 4432

.navbar-inner { background-color: #2C2C2C; background-image: -moz-linear-gradient(center top , #333333, #222222); background-repeat: repeat-x; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset; min-height: 40px; padding-left: 20px; padding-right: 20px; }

Normally, changes to css go in your theme's custom.css file.

If you are editing the bootstrap theme, I'd guess you have made css changes outside bootstrap.min.css.

Tama

Add this to the end of the theme's custom.css file ( I'm pretty sure if you want to compile again, you could use less ( kasper is extending the css of the base bootstrap files ) to do this ). But this is quick fix.

.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  *zoom: 1;
}

The reason why the css is so chunky, is because of cross browser hacks ( -moz, -webkit ).

NettoHikari

Thank you very much for your answers! I modified the custom.css file, but it didn't have any effect. I will take a look at Firebug, thanks for the suggestion.

whu606

If you are using 2.1, then to see css changes applied you may need to add

$Configuration['Garden']['DebugAssets'] = TRUE;

to your config.php file.

NettoHikari

I'm currently using Vanilla 2.0.18.8. Should I update?

Tama

@NettoHikari 2.1 is currently in beta, you could update but there could be some bugs

You can always go to the theme's about.php and bump the version number in the ThemeInfo array. That should force refresh on most browsers.

I would also recommend you disable minify, as it can cause some issues with plugins.

NettoHikari

Alrighty, thanks for your comments. I will update to 2.1 soon, I think. There are some nice features in it I might wanna check out (native embedding and support for quote plugins).

I made some changes on default.master.tpl and it seems to have caused a refresh. Even though it is not perfectly fine, I should be able to do the rest myself (at least I hope so).

Thanks!

NettoHikari

Okay, I figured it out mostly. There's still some minor changes I need to make in order to make it look good. I still need to know how to make the theme use Boostrap's glyphicons instead of "inform-sprites.png". Does anyone have a clue?

Tama

Looked at your site and you could do with adding a responsive css statement

to get rid of the padding: 60px 0; on body when the navbar hides links .

@media (max-width: 979px) {
      body { padding: 0px; }
}