html - Need Help Cleaning CSS Script / Overriding Bootstrap -
i'm not computer programmer, i've been assigned task of designing webpage. here's have:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>example</title> <!-- bootstrap --> <link href="file:///users/theresa/desktop/1page/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all"> <!---custom --> <link href="file://localhost/users/theresa/desktop/1page/custom.css" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-inverse"> <div class="navbar-header"> shastic </div> </nav> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">shastic</a> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">page 1-1</a></li> <li><a href="#">page 1-2</a></li> <li><a href="#">page 1-3</a></li> </ul> </li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> text</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> text</a></li> </ul> </div> </div> </nav> <div class="container" style="background: #f1f1f1;;"> <div class="row"> <div class="col-sm-3 col-md-3 col-lg-3" style="background-color:#f1f1f1;"> <h1 style=" font-weight: 300; font-size: 72px; color: #666666; margin-bottom: -22px;">01</h1> <h2 style="font-size: 26px; font-weight: 300; color: #666666; text-transform: uppercase; -webkit-font-smoothing: antialiased;">overview</h2> <p style="font-size: 12px; -webkit-font-smoothing: antialiased;"> jump same section in guide:</p> <a href="#" style="color: #0055cc; font-family: inherit; font-size:12px; -webkit-font-smoothing: antialiased; margin-right:-">web</a> | <a href="#" style="color: #0055cc; font-family: inherit; font-size:12px; -webkit-font-smoothing: antialiased; margin-right:-">homepage</a> </div> <div class="col-sm-9 col-md-3 col-lg-3" style="background-color:#f1f1f1; font-size: 20px; font-weight: 300; color: #666666;-webkit-font-smoothing: antialiased; display: block; margin-right:-10px; margin-top:50px; text-align: center;"> designs in guide cover visual treatment , interaction details mobile sso pages below top navigation bar. provide overview of how navigation works mobile sso pages. </div> <div class="ol-sm-3 col-md-6 col-lg-6" style="background-color:#f1f1f1; padding: 20px;"> <img src="file:///users/theresa/desktop/1page/images/iphone.png"><br> </div> </div> </div> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="file:///users/theresa/desktop/1page/bootstrap/js/bootstrap.min.js"></script> </body> </html> basically, html complicated because can't life of me figure out how override bootstrap's css (fonts,etc.) container section. problem i'm having can't change overall body background color white color.
here's css:
<!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <meta http-equiv="content-style-type" content="text/css"> </head> <body> <style> /* navbar */ .navbar.navbar-default { background-color: #0078b1; border-color: #e7e7e7; } .navbar.navbar-inverse { background-color: #003b6a; border-color: #003b6a; margin-bottom: -20px; padding-bottom: 20px; } .container-fluid{ background-color: #0078b1; font-family: 'open sans', sans-serif; font-size: 12px; -webkit-font-smoothing: antialiased; text-align: right; } /* title */ .navbar-default .navbar-brand { color: #fff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #0078b1; } /* link */ .navbar-default .navbar-nav > li > { color: #fff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff; text-decoration: underline; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #0078b1; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #fff; background-color: #0078b1; } /* dropdown , caret */ .navbar-default .navbar-nav > .dropdown > .caret { border-top-color: #fff; border-bottom-color: #fff; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #0078b1; border-bottom-color: #0078b1; background-color: #0078b1; } .navbar-default .navbar-nav > .open > .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #0078b1; border-bottom-color: #0078b1; } /* mobile version */ .navbar-default .navbar-toggle { border-color: #ddd; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ddd; } .navbar-default .navbar-toggle .icon-bar { background-color: #ccc; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > { color: #777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; } /*body*/ .container{background-color: #0078b1; font-family: 'open sans', sans-serif; font-size: 12px; -webkit-font-smoothing: antialiased; text-align: right;} </style> </body> </html> any appreciated. thank much.
change navbar color in twitter bootstrap 3
changing navbar color has been discussed in detail @ link
bootstrap comes light/dark options default - if want custom colour best read details in link above not duplicating info here.
<!-- light 1 --> <nav class="navbar navbar-default" role="navigation"></nav> <!-- dark 1 --> <nav class="navbar navbar-inverse" role="navigation"></nav>
Comments
Post a Comment