Bootstrap CSS in header is causing alot of issues

[ramm4]

Folks,
New to VBulletin, sort of to CSS, been scratching my head since September over this. I'd love some help. I am modifying the Default Skin, with the sole intent that it looks exactly like the other parts of my website.

To do this, I added some pretty basic Bootstrap CSS to the header template. Now, some odd things are occurring. I have a feeling it has to do with the Bootstrap CSS messing around with VB5 CSS.

First, screen shots:


Register Page Blank (see attachment)
Search Button Pushed Down (see attachment)
Topic Button Pushed Down (see attachment)


Now, here's the Bootstrap CSS I added in the Header template



<!-- css -->
<link href="https://fonts.googleapis.com/css?family=Handlee|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="http://localhost/project/css/bootstrap.css" rel="stylesheet" />
<link href="http://localhost/project/css/bootstrap-responsive.css" rel="stylesheet" />

<link href="http://localhost/project/css/style.css" rel="stylesheet" />

<!-- Theme skin -->
<link href="http://localhost/project/color/default.css" rel="stylesheet" />





Now, for the menu:



<!-- start header -->
<header>
<div class="top">
<div class="container">
<div class="row">
<div class="span6">
<p class="topcontact">Welcome</p>
</div>
<div class="span6">
<ul class="social-network">
<li><a href="https://www.facebook.com" data-placement="bottom" title="Facebook"><i class="icon-facebook icon-white"></i></a></li>
<li><a href="https://www.instagram.com/" data-placement="bottom" title="Instagram"><i class="icon-camera icon-white"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row nomargin">
<div class="span4">
<div class="logo">
<a href="index.php"><img src="http://localhost/project/img/logo1.png" alt="" /></a>
</div>
</div>
<div class="span8">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav">
<li class="dropdown">
<a href="index.php"><i class="icon-home"></i> HOME</a>
</li>

<li class="dropdown">
<a href="#"><i class="icon-globe"></i> COMMUNITY <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="about.html">Register for Free</a></li>
<li><a href="about.html">Browse the Forums</a></li>
</ul>
</li>
<li >
<a href="about.html"><i class="icon-info-sign"></i> ABOUT</a>
</li>
<li>
<a href="contact.html"><i class="icon-phone"></i> CONTACT</a>
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</div>
</div>
</header>
<!-- end header -->


That's it! I can't imagine the above is causing these odd issues. Not to mention, the user can't login (when they hover over "login", the input fields appear, then dissapear right away).

Any help, is extremely appreciated.

Rob

[TheLastSuperman]

Don't add in css that way, I mean you can but for example you should be adding in the css to css_additional.css template in the style via style manager then adding in your new <div> classes to whichever templates you wish.

It sounds like something in your local css files you've included is overwriting the default css, you should view a normal default style and compare that css to the css you've added, if any have identical names they could be interfering with each other. I've had to work with third-party included css in the past for the NFL but in the end would usually add my own overwrites as best possible to the additional css template but by controlling the css and including it in the correct template you won't have any problem adjusting values only if the definition name you added is the same as one that already exist (by default). Also bear in mind if you try to overwrite any default definitions and aren't quite sure which css template it's in you can add the same definition name to css_additional.css and in the code just use !important to overwrite the default value, example:

body {
background:#ffffff url(images/mycustombackground.png) no-repeat center fixed !important;
}

#breadcrumbs, #content {
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}

#header img, .site-logo {
opacity: 100 !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */
}

.mycustomcsshere {
background-color:#f5f5f5;
border: 1px solid #dbdbdb;
color:#333333;
font-size:1em;
font-family: 'Handlee', cursive;
}


I tend to use !important quite a bit as you can tell :p.

[ramm4]

Ok, I wish I could give you a million internet points. Doing exactly what you said, about adding the additional css into the proper template (and not 'header' or 'footer'..) corrected the majority of the problem. I also had one conflicting CSS entity which I just ended up removing, which solved the rest.

Thank you, thank you, thank YOU!