Multiple Background Colors in Sidebar?

This will depend a little on whether you are going to display the sidebar content with widgets or whether you are going to hardcode it into the sidebar.php file.

Either way you will need to assign a background color and or background image to the sidebar’s elements. Depending on how you are displaying the sidebar content this could be list items, tables, divs or some other tag.

Let me know and I’d be glad to help ya out.

I’m trying to hardcode it into the sidepar.php file.

There are a lot of different ways you could do this. The site in question is using tables, which isn’t a great idea for non-tabular data. Instead you could use a list:

<div id="sidebar">
  <ul>
    <li class="item1">
      <h2>Your Title</h2>
      <p>Your content</p>
    </li>
    <li class="item2">
      <h2>Your Title 2</h2>
      <p>Your content 2</p>
    </li>
    <li class="item3">
      <h2>Your Title 3</h2>
      <p>Your content 3</p>
    </li>
  <ul>
</div>

You’ll need some CSS to now style these list items giving them the color and or graphics you want.

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

li.item1{
  background-color:red;
  }

  .item1 h2{
    background-color:dark-red;
    }

li.item2{
  background-color:blue;
  }

  .item2 h2{
    background-color:dark-blue;
    }

li.item2{
  background-color:green;
  }

  .item2 h2{
    background-color:dark-green;
    }

There is lots of other definitions you can use to format your sections and style your text, hopefully that will hep get ya going.

And I would put the CSS that defines the backgrounds in the stylesheet, correct?
Oh and what would these do?

li.item2{
  background-color:blue;
  }

  .item2 h2{
    background-color:dark-blue;
    }

li.item2{
  background-color:green;
  }

  .item2 h2{
    background-color:dark-green;
    }

I don’t get why there are 4 things to define the background color… Thanks for the help so far!

CSS

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

li.item1{
background-color:red;
}

li.item2{
background-color:blue;
}

li.item3{
background-color:green;
}

HTML

<div id=”sidebar”>

<li class=”item1″>
<h2>Your Title</h2>
<p>Your content</p>

<li class=”item2″>
<h2>Your Title 2</h2>
<p>Your content 2</p>

<li class=”item3″>
<h2>Your Title 3</h2>
<p>Your content 3</p>

</div>

In your example page each sidebar section had a graphic for the titles, like “The Graphics”, “The Games” and so on. By putting the titles in <h2></h2> tags you can add a background color or add a graphic as their background. I was just showing it to you with darker colors then the main section. With graphics it would look like:

.item1 h2{
    background:transparent url(images/sidebar-title-1.gif) top center no-repeat;
    }

This assumes you have an images folder inside your theme folder with the title graphics.

To add a background image, first create the image. After that, upload the image to a free server. You can read about using free hosts . We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL. Take note of the Image URL. See that when you enter this Image URL into your browser, you are able to view the image, instead of being prompted to download it.

————–

Tanyahalette

[sig moderated – read the Rules!]

Okay, churchthemer. I got an image and a background. But the text in <p>Your content</p> screws it up. The background color overlaps the image. I put a couple
‘s in <h2>Your Title</h2>, but I want it to go right under like a normal image. How do I fix this?

Soo….anyone know what to do?

If you paste a link to your site Ill have a look at the css for ya.

Link to the css:
https://sonicworld.net/site/wp-content/themes/stitched-10/style.css
Thanks

Any ideas?

first, try adding a “&nbsp ;” between your h2 tags. Remove the gap between the “;” and the “&nbsp”
second, if you know how high your images are, set that height for the h2 in your style.css

They are all 150px × 30px. How would I set the height? As in what code would I use to do that? Thanks

Is sonicworld.net your site or the site whose sidebar you’re trying to mimic?

If it’s not your site can we have link to your style.css or site in order to give you specific code?

To answer you height question you would add the property like this:

#sidebarleft h2 {
font-family: Arial, sans-serif;
color: #E8CFA9;
padding: 2px 8px 2px 8px;
margin-top:8px;
background:#480000 url(img/h2l.png) top right no-repeat;
border-bottom:1px solid #E8CFA9;
height:30px;
width:150px;
}

This assumes your sidebar is in a element with the id of “sidebarleft”

I got that id from the sonicworld css, so, if thats not your site your sidebar id maybe different.