Jason G. Designs

CSS Fixes- Sidebars

I was considering if I should save all of the new CSS fixes for the final tutorial or use them in this one. I decided to include them here, so we will have a more complete looking website by the end of this tutorial. We will set the sizes for our list items in the sidebar, customize our posts and more.

• The first thing we must do is get everything looking consistent in each browser- specifically in Firefox (a standards browser) and Internet Explorer 7. If you are on Windows, open your index.php page in both browsers. Other OS readers can open any two browsers as most of the other browsers are standards compliant. I will only use the above mentioned browsers in this tutorial. Starting from the top, we can erase the padding and margins around the search box in the sidebar-2 div. Open your style.css file in your text editor and type this below the sidebar style rule:

• }
  
  /* sidebar 2 */
  #sidebar-2 ul {
  margin: 0;
  padding: 0;
  }

• Next, we want to get rid of the bullet next to the top level list items in both the sidebar and sidebar-2. Since this is a shared rule, we can target both sidebars by adding this below the closing sidebar curly brace:

• /* sidebar */
  #sidebar {
  width: 251px; /* width is set minus the 20px padding, according to the CSS box model */
  padding: 20px; /* add padding */
  float: left;
  }
  
  #sidebar ul, #sidebar-2 ul {
  list-style-type: none;
  }

This gets rid of all of the list bullets, but don’t worry, we will add in our icon bullet items later.

• If you have the labels image with our design handy, you will see that all of the lists items and their levels are aligned left. We will take care of that in the following style rule:

• padding: 20px; /* add padding */
  float: left;
  }
  
  #sidebar ul {
  margin-left: 0; /* IE 7 */
  padding-left: 0;
  }
  
  #sidebar ul, #sidebar-2 ul {

• Next, we can add the list item decorations. Type this after the previous style rule:

• #sidebar ul li li {
  list-style-image: url(images/redpixelbullet.png);
  }
  
  #sidebar ul li li li {
  list-style-image: url(images/arrowbullet_red.png);
  }
  
  #sidebar ul li li li li {
  list-style-image: url(images/arrowbullet_gray.png);
  }

Let’s push the ul list items to the right to line up with the titles:

• #sidebar ul {
  margin-left: 0; /* IE 7 */
  padding-left: 0;
  }
  
  #sidebar ul ul {
  margin-left: 18px;
  }
  
  #sidebar ul ul ul {
  margin-left: 0;
  }

Now, we can style the text and links in the list items by targeting the whole sidebar div and adding link styles. We will style the titles separately:

• #sidebar {
  width: 251px; /* width is set minus the 20px padding, according to the CSS box model */
  padding: 20px; /* add padding */
  float: left;
  font: bold 12px/18px Georgia, "Times New Roman", "Nimbus Roman No9 L"/*Linux*/, serif;
  }
  
  #sidebar a {
  text-decoration: none;
  }
  
  #sidebar a:visited, #sidebar a:link {
  color: #FFB273;
  }
  
  #sidebar a:active, #sidebar a:hover {
  color: #FFFFFF;
  }

• Next, we need to add the image behind each widget title. At the very bottom of the style sheet, add the following:

• /* classes and ids */
  .widget-title {
  background: url(images/button.png) no-repeat;
  width: 160px;
  height: 40px;
  padding: 12px 0 0 12px;
  color: #FF7400;
  }

Now that we added in our widget title background images, you may notice that our titles are too close to the end of the list items above them. Let’s fix that. Go back to the #sidebar ul rule and add the following beneath it:

• #sidebar ul li {
  padding-bottom: 20px;
  }

Add this to the #sidebar ul li li style rule:

• #sidebar ul li li {
  list-style-image: url(images/redpixelbullet.png);
  padding-bottom: 0;
  }

Tags for this post: Blue Green Blast, Firefox, Internet Explorer 7, Themes, WordPress

Page: 1 2 3 4 5 6 7