CSS code problem (re: navigation bar and sidebar)

• 

  brackfamily · Member · Apr 5, 2009 at 12:03 am

  • Copy link
  • Add topic to favorites

  Hi all! It’s me again!

  Here is my blog: http://brackfamily.wordpress.com I have been successful in putting up my own layout, but a few things are missing and I can’t figure out what I’m doing wrong.

  First, if you’d like to take a look at what the final layout is supposed to be, I downloaded the vintage polka dots theme from here: h t t p : / / freeblogthemes . notjustamama . com/ 2008/08/vintage-polka-dots/ You can see that there is supposed to be a navigation bar underneath the header with tabs for “home” “archive”, etc. Unfortunately, I cannot get that bar to show up on my blog. Also, I’m having a hard time with the sidebars showing up properly. I guess I’m not too concerned if I can’t get the green sidebar on the far right, but it would be nice. Lastly, I can’t figure out where in the code to change the color of the words in the sidebar (my description and the catergory titles). Right now, they are white and you can’t see them. I’d like to change it to dark brown or black.

  If anyone is so inclined to take a look at the code and help me, I would be so very very appreciative! Otherwise, I’ll have to go searching for a new theme and start from scratch, and that thought is very discouraging.

  Here’s the code I have so far:

  * {
  margin:0;
  padding:0;
  }

  body {
  background:#F6EFCA url(‘http://img.photobucket.com/albums/v203/brack0609/bg.gif’) repeat;
  font-size:12px;
  color:#F6EFCA;
  font-family:”Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
  }

  img {
  border:1px #8B4513;
  }

  a {
  color:#E1DA7B;
  text-decoration:none;
  }

  a:hover {
  color:#E1DA7B;
  text-decoration:underline;
  }

  a:visited {
  color:#E1DA7B;
  }

  #wrapper {
  display:block;
  width:900px;
  position:relative;
  background:#E1DA7B url(‘http://img.photobucket.com/albums/v203/brack0609/contentBg2.gif’) repeat-y;
  border-left:2px dotted #8B4513;
  border-right:2px dotted #8B4513;
  margin:0 auto;
  }

  #header {
  width:900px;
  background:#E1DA7B url(‘http://img.photobucket.com/albums/v203/brack0609/header2.gif’) top center no-repeat;
  height:200px;
  margin-top:0;
  color:#92764F;
  border-bottom:1px solid #8B4513;
  }

  .title {
  color:#fff;
  padding:5px 5px 5px 20px;
  }

  #Nav {
  display:block;
  }

  #content {
  width:535px;
  float:left;
  color:#F6EFCA;
  padding:20px;
  }

  #sidebarRight {
  width:135px;
  float:right;
  color:#000;
  background:#E1DA7B;
  padding:20px;
  }

  * html #sidebarRight {
  width:135px;
  }

  #sidebarLeft {
  width:135px;
  float:right;
  color:#000;
  padding:20px;
  }

  * html #sidebarLeft {
  width:135px;
  }

  #footer {
  clear:both;
  width:871px;
  background:#92764F;
  color:#F6EFCA;
  text-align:left;
  height:33px;
  border-bottom:1px solid #000;
  border-top:1px solid #000;
  padding:8px 8px 12px 21px;
  }

  #footer a {
  color:#afb65b;
  text-decoration:underline;
  border-bottom:none;
  }

  ul#Nav {
  list-style:none;
  width:900px;
  float:left;
  background:#92764F;
  font-family:”Lucida Grande”, Lucida, Arial, sans-serif;
  font-size:14px;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  margin:0;
  padding:0;
  }

  ul#Nav li {
  float:right;
  border-left:1px solid #fff;
  }

  ul#Nav li.first {
  border-left:none;
  }

  ul#Nav a {
  display:block;
  float:left;
  line-height:25px;
  text-decoration:none;
  color:#fff;
  padding:0 1.45em;
  }

  ul#Nav a:hover {
  background:#F4B77E;
  text-decoration:none;
  }

  ul#Nav li.current_page_item a {
  color:#fff;
  background:#F4B77E;
  text-decoration:none;
  }

  .post {
  margin-bottom:20px;
  }

  blockquote {
  color:#000;
  border-left:5px solid #92764F;
  background:#e1da7b;
  font-size:11px;
  font-family:”Lucida Grande”, Lucida, Verdana, Arial, Helvetica, sans-serif;
  margin:0 30px 20px;
  padding:10px 10px 4px;
  }

  p {
  margin-bottom:15px;
  line-height:1.6em;
  }

  p a {
  text-decoration:none;
  }

  p a:hover {
  text-decoration:underline;
  }

  p.center {
  text-align:center;
  }

  .postmeta {
  border:1px solid #E1DA7B;
  font-size:10px;
  padding:3px;
  }

  .postmeta a {
  border-bottom:none;
  }

  .postmeta a:hover {
  border-bottom:none;
  }

  .small {
  font-size:10px;
  }

  code {
  font:12px ‘Courier New’, Courier, Fixed;
  }

  h1 {
  font-size:20px;
  letter-spacing:-.8px;
  text-align:left;
  font-weight:normal;
  margin-bottom:8px;
  font-family:”Century Gothic”, “Trebuchet MS”, “Lucida Grande”, Lucida, Arial, sans-serif;
  }

  h1.title {
  color:#92764F;
  font-size:45px;
  letter-spacing:-2.5px;
  font-weight:normal;
  padding:10px 10px 10px 109px;
  }

  .description {
  color:#92764F;
  font-size:25px;
  letter-spacing:-2.5px;
  font-weight:normal;
  padding:10px 10px 10px 145px;
  }

  h4 {
  font-weight:normal;
  font-size:10px;
  color:#F4B77E;
  margin:-5px 0 10px;
  padding:0;
  }

  html>body .post ul {
  margin-left:0;
  list-style-image:url(‘images/bullet.png’);
  padding:0 0 10px 30px;
  }

  html>body .post li {
  margin:7px 0 8px 10px;
  }

  .post ol {
  margin:0;
  padding:0 0 0 35px;
  }

  .post ol li {
  margin:0;
  padding:0;
  }

  #searchform {
  display:inline;
  float:left;
  text-align:left;
  margin:0 20px;
  padding:10px 0 0;
  }

  #searchform #s {
  width:160px;
  background:#fff5ee;
  border:1px solid #8b4513;
  color:#000;
  font-size:11px;
  font-family:”Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
  margin:0 0 5px;
  padding:4px;
  }

  #searchIcon {
  color:#000;
  display:inline;
  padding:2px;
  }

  h2 {
  font-size:28px;
  letter-spacing:-.8px;
  text-align:center;
  text-transform:uppercase;
  font-weight:normal;
  color:#F4B77E;
  border-bottom:1px #F4B77E solid;
  margin-bottom:10px;
  margin-top:10px;
  font-family:”Segoe UI”, “Trebuchet MS”, “Lucida Grande”, Lucida, Arial, sans-serif;
  padding:10px;
  }

  #sidebarRight h2 {
  color:#92764F;
  border-bottom:10px #92764F solid;
  }

  #sidebarRight a {
  color:#92764F;
  text-decoration:none;
  }

  #sidebarRight a:hover {
  background:none;
  color:#F4B77E;
  text-decoration:underline;
  }

  #sidebarLeft a {
  color:#92764F;
  text-decoration:none;
  }

  #sidebarLeft a:hover {
  background:none;
  color:#F4B77E;
  text-decoration:underline;
  }

  #sidebarLeft a:visited {
  color:#F4B77E;
  }

  .sidebarIcon ul,.sidebarIcon ol {
  font-size:11px;
  margin:0 0 1em;
  }

  .sidebarIcon ul {
  list-style-image:url(‘images/tag.png’);
  list-style-position:inside;
  }

  .sidebarIcon li {
  margin:0 0 .2em;
  }

  .sidebarIcon ul li ul,.sidebarIcon ul li ol,.sidebarIcon ol li ul,.sidebarIcon ol li ol {
  margin:.5em 0 .5em 5px;
  }

  .sidebar ul,.sidebar ol {
  font-size:11px;
  margin:0 0 1em;
  }

  .sidebar ul {
  list-style-type:none;
  }

  .sidebar li {
  margin:0 0 .6em;
  }

  .sidebar ul li ul,.sidebar ul li ol,.sidebar ol li ul,.sidebar ol li ol {
  margin:.5em 0 .5em 5px;
  }

  #footer p {
  font-family:”Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  text-align:left;
  letter-spacing:-.1px;
  margin-bottom:0;
  }

  #footer a:hover {
  color:#5c7c9a;
  background:none;
  border-bottom:none;
  }

  #icons {
  display:inline;
  margin-top:-30px;
  float:right;
  text-align:right;
  }

  #footerIcons {
  color:#000;
  display:inline;
  float:right;
  padding:2px;
  }

  img.post {
  border:1px solid #000;
  float:right;
  margin:10px;
  padding:5px;
  }

  img.center {
  display:block;
  margin-left:auto;
  margin-right:auto;
  border:1px solid #000;
  padding:5px;
  }

  img.alignright {
  border:1px solid #000;
  background:#fff;
  display:inline;
  margin:10px;
  padding:5px;
  }

  img.alignleft {
  border:1px solid #000;
  display:inline;
  margin:8px;
  padding:5px;
  }

  .alignright {
  float:right;
  }

  .alignleft {
  float:left;
  }

  .navigation {
  display:block;
  text-align:center;
  margin-top:10px;
  margin-bottom:60px;
  }

  .postspermonth {
  list-style:none;
  padding-left:25px;
  margin:5px 0 10px;
  }

  #commentform input {
  width:170px;
  border:1px solid #49647d;
  margin:5px 5px 1px 0;
  padding:2px;
  }

  #commentform textarea {
  width:500px;
  border:1px solid #49647d;
  font-family:”Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  margin:2px;
  padding:5px;
  }

  #commentform #submit {
  float:right;
  border:1px solid #49647d;
  font-family:”Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
  margin:0;
  }

  .commentlist li,#commentform input,#commentform textarea {
  font-size:11px;
  }

  .commentlist li {
  font-weight:bold;
  list-style:none;
  margin:10px 0 3px;
  padding:5px 10px 3px;
  }

  .commentlist cite,.commentlist cite a {
  font-weight:bold;
  font-style:normal;
  font-size:1.1em;
  }

  .commentlist p {
  font-weight:normal;
  line-height:1.5em;
  text-transform:none;
  margin:10px 5px 10px 0;
  }

  #commentform p {
  font-family:”Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
  margin:5px 0;
  }

  .commentmetadata {
  font-weight:normal;
  font-size:10px;
  font-family:”Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
  display:block;
  margin:0;
  }

  .alt {
  margin:0;
  padding:10px;
  }

  .commentlist {
  text-align:justify;
  padding:0;
  }

  .nocomments {
  text-align:center;
  margin:0;
  padding:0;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  waves88 · Member · Apr 13, 2009 at 9:13 am

  • Copy link

  nocomments {
  text-align:center;
  margin:0;
  padding:0;
  }