CODEWITHSUNDEEP
csstwitter-bootstrap
user2012953
user2012953

Reputation:

set banner background color

I am running a play framework (with scala) tutorial and have the css set as per what is mentioned. I get white background to top banner while tutorial gets dark background. I am new to css and couldn't debug the reason for the color difference.

main.css is

body { color:black; }
body, p, label { font-size:15px; }
.label { font-size:13px; line-height:16px; }
.alert-info { border-color:transparent; background-color:#3A87AD;
color:white; font-weight:bold; }
div.screenshot { width: 800px; margin:20px; background-color:#D0E7EF; }
.navbar-fixed-top .navbar-inner { padding-left:20px; }
.navbar .nav > li > a { color:#bbb; }

.screenshot > .container { width: 760px; padding: 20px; }
.navbar-fixed-top, .navbar-fixed-bottom { position:relative; }
h1 { font-size:125%; }
table { border-collapse: collapse; width:100%; }
th, td { text-align:left; padding: 0.3em 0;
border-bottom: 1px solid white; }
tr.odd td { }
form { float:left; margin-right: 1em; }
legend { border: none; }
fieldset > div { margin: 12px 0; }
.help-block { display: inline; vertical-align: middle; }
.error .help-block { display: none; }
.error .help-inline { padding-left: 9px; color: #B94A48; }
footer { clear: both; text-align: right; }
dl.products { margin-top: 0; }
dt { clear: right; }
.barcode { float:right; margin-bottom: 10px; border: 4px solid white; }

while body of the main view is

<head>
    <title>@title</title>
    <link rel="stylesheet" type="text/css" media="screen"
        href='@routes.Assets.at("stylesheets/bootstrap.css")'>
    <link rel="stylesheet" media="screen"
        href="@routes.Assets.at("stylesheets/main.css")">
</head>

<body>
    <div class="screenshot">

        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                <a class="brand" href="@routes.Application.index()">
                    @Messages("application.name")
                </a>
                </div>
            </div>
        </div>
        <div class="container">
            @content
            @debug()
        </div>
    </div>
</body>

this is how it is supposed to be there tutorial

and my page my page

I found this tutorial in book "play for Scala"

Upvotes: 0

Views: 717

Answers (2)

colinplusplus
colinplusplus

Reputation: 301

change <div class="navbar navbar-fixed-top"> to <div class="navbar navbar-inverse navbar-fixed-top">

Upvotes: 1

Cesar Fajardo
Cesar Fajardo

Reputation: 1

bootstrap.css is replacing the css main.css some labels, you have to do is put in the main.css in the body{color: black important;!}

Upvotes: 0

Related Questions