Changing menu and background colors

  • Resolved vistastang

    (@vistastang)


    9 years, 9 months ago

    I’m trying to change the background colors of the menu, the main page and the “designed by” area(from white to black.) Tried a bunch of different css codes in threads on the forum but none seem to work in my child theme. Just seems to stay white. Here’s my coding as it stands.

    Pic of website, working offline
    Menu and main page
    https://i1142.photobucket.com/albums/n605/a123sxu/screenshotbackground1_zps66c737aa.jpg
    Designed by area
    https://i1142.photobucket.com/albums/n605/a123sxu/screenshotbackground2_zpsd04bbf54.jpg

    /* Menu Colors */
/* Adjust Menu colors - Normal */
.navbar .nav > li > a, .navbar .nav > li > a:first-letter {
color:          #000000;
text-shadow:    none;
}
/* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
color:          #000000;
text-shadow:    none;
}
/* Adjust Menu colors - Active */
.navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a:first-letter,
.navbar .nav > li.current-menu-ancestor > a:first-letter {
color:         #000000;
text-shadow:    none;
}

/* Controls Current Menu Text Color */
.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
color:          #000000;
}

/* Removes shadow around menu box */
.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
}

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background:none
}

/* Main Page Background Colors - bottom around circles */
body {
  background: none repeat scroll 0 0 #000000;
  color: #5A5A5A;
  padding-bottom: 0;
}

#main-wrapper {
    background-color: #000000;}

.container[role="main"] {
background-color: #000000;

body{
background: black;
}
header.tc-header {
background: black;
}

/* Round Circles Background Colors Main Page */
.round-div {
border: 104px solid black;
}
.navbar .nav > li > a { color: #000000; }
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover { color: #39c6f4; }
}

/* header background color - trim of menu area */
header.tc-header {
min-height: 45px;
background: #000000;
border-bottom: 10px solid #000000;
border-top: 5px solid #000000;
} 

/* Main background color change first #, 2nd # controls circle text color */
body {
  background: none repeat scroll 0 0 #000000;
  color: #FFFFFF;
  padding-bottom: 0;
  }
Viewing 6 replies - 1 through 6 (of 6 total)

  • This will change the “Designed by” area to black:

    /* Change Background, Border, Font/Color as needed  */
footer#footer .colophon {
background:     none repeat scroll 0 0 #000000;
border-top:     0px solid #000000;
color:          #000000;
padding:        0;
}

    (change border-top pixels to whatever size you want that area to be)

    This will make the header background black:

    }
header.tc-header {
background-color: black ;
}

    These work 100% as we are currently using this code for our site.

    Thread Starter vistastang

    (@vistastang)

    thanks ibogo. the “designed by” code worked perfect!

    the header background code still didn’t work though.

    Thread Starter vistastang

    (@vistastang)

    ended up having to use an override to get the rest to work.

    Oh I think the reason the second code didn’t work is because it should be:

    }
header.tc-header {
background-color: black;
}

    On the first code the semicolon “;” should not be spaced after “black”.

    Hey , off topic but could i have the code to make you menu bar like that one.

    Its exactly what im looking for!

    Thanks

    Hi!
    Can I somehow put a picture in the background instead of a color?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing menu and background colors’ is closed to new replies.