Twitter Bootstrap Question posted in

How to change background color of single page using CSS – twitter bootstrap

I was wondering if someone show me how I can change the background color of ONLY my index.jsp page using twitter bootstrap? I’ve tried changing the body-background color, but it never changes for the index page. It always changes the color for my other pages I’ve created, I don’t know why. If someone can show me how to change the background color to only BLACK I would be very grateful. Thanks 🙂

I went ahead and cleaned up my code and am trying again from scratch. I’ve posted my index.jsp and CSS code here for reference.

index.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Database Project</title>   

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <spring:url value="/webjars/bootstrap/3.2.0/css/bootstrap.min.css" var="bootstrap"/>
  <spring:url value="/webjars/jquery/1.11.1/jquery.min.js" var="jquery"/>
  <spring:url value="/webjars/bootstrap/3.2.0/js/bootstrap.min.js" var="bootstrapJS"/>
  <spring:url value="/resources/css/index.css" var="indexCss"/>

  <link href="${bootstrap}" rel="stylesheet"/>
  <link href="${indexCss}" rel="stylesheet"/>
</head>

<body>          
  <!--<div class="container">
    <form action="test" method="post">
      <input type="Submit" name="Submit">
    </form>
  </div>-->
  <div class="site-wrapper">
    <div class="site-wrapper-inner">
      <div class="cover-container">
        <div class="masthead clearfix">
          <div class="inner">
            <h3 class="masthead-brand">Test</h3>
              <nav>

              </nav>
          </div>
        </div>
        <div class="inner cover">
          <h1 class="cover-heading">test Web-App</h1>
          <p class="lead">Add or view your stuff below.</p>                  
          <p><form action="books" method="post" ><input type="Submit" value="Books" name="Submit" class="btn btn-lg btn-default"></form></p>
          <p> <form action="movies" method="post" ><input type="Submit" value="Movies" name="Submit" class="btn btn-lg btn-default"> </form></p>
          <p><form action = "music" method = "post"><input type ="Submit" value = "Music" name = "Submit" class ="btn btn-lg btn-default"></form></p>
          <p><form action = "contacts" method = "post"><input type ="Submit" value = "Contact" name = "Submit" class ="btn btn-lg btn-default"></form></p>
        </div>


        <img class="visible-xs img-responsive src="C:/Users/test/Documents/CODING/JobProjects/Hibernate Projects/EntertainmentApp/src/main/webapp/resources/images/title.jpg"/>
        <img src="resources/images/title.jpg" class="img-fluid" alt="Responsive image">

        <div class="container">
    <form action="test" method="post">
      <input type="Submit" name="Submit">
    </form>
  </div>
        <div class="mastfoot">
          <div class="inner">
            <p>Created by <a href="test">test</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="${jquery}"></script>
  <script src="${bootstrapJS}"></script>        
</body>
</html>

CSS page:

.entertainmentDisplay {
    margin-top: 20%;
    margin-left:25%;
    margin-right: 25%;
}

.bottomColor {
    color: #282828 ;
}

a,
a:focus,
a:hover {
  color: #fff;
}



.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; 
  background-color: #fff;
  border: 1px solid #fff;
  margin: 5px;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  color: #333;
  text-shadow: none; 
  background-color: #fff;
  border: 1px solid #000000;
  margin: 5px;
}


/*
 * Base structure
 */
html,
body {
  height: 100%;
  background-color: #989898 ;
}
body {
  color: #fff;
  text-align: center;
  /*text-shadow: 0 1px 3px rgba(0,0,0,.5);*/
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
  display: inline;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}


/*
 * Header
 */
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}

.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,.75);
  border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }
  .masthead-nav {
    float: right;
  }
}


/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
}


/*
 * Affix and center
 */

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
}

table.zebra-style {
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    text-align:left;
    margin-bottom:25px;
    border: 2px solid black;
}
table.zebra-style th {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 8px;
    background:#666;
}
table.zebra-style td {
    color: black;
    padding: 8px;
    font-size:14px;
}
table.zebra-style tr.odd {
    background:#f2f2f2;
}
Tags:

2

Answers


  1. 0

    You need to write a selector which matches the body element of that page, but not of other pages.

    At the moment, there is nothing unique about that body element, so you need to change the HTML first.

    Add a class or an ID. Then use that in your selector.

    Login or Signup to reply.
  2. 0

    Change body color:

    Inline CSS have higher priority than the external CSS.

    New:

    <body style="background-color:#000000;">

    Additionally, you may use !important to prioritize it even higher.

    Old:
    bgcolor(deprecated)

    <body bgcolor="#000000;">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search