WordPress › Support » Multiple Background Colors in Sidebar?

Turbohog
Member
Posted 1 year ago #

I want to make this sidebar on the left in wordpress:
http://sonicworld.net/site/oldindex.php
But I can't figure out how I could get multiple background colors like that. Does anyone know how?

churchthemer
Member
Posted 1 year ago #

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.

Turbohog
Member
Posted 1 year ago #

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

churchthemer
Member
Posted 1 year ago #

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.

Turbohog
Member
Posted 1 year ago #

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!

cvsraghava
Member
Posted 1 year ago #

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>

churchthemer
Member
Posted 1 year ago #

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.

tanyahalette
Member
Posted 1 year ago #

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!]

Turbohog
Member
Posted 1 year ago #

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?

Turbohog
Member
Posted 1 year ago #

Soo....anyone know what to do?

churchthemer
Member
Posted 1 year ago #

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

Turbohog
Member
Posted 1 year ago #

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

Turbohog
Member
Posted 1 year ago #

Any ideas?

mores
Member
Posted 1 year ago #

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

Turbohog
Member
Posted 1 year ago #

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

churchthemer
Member
Posted 1 year ago #

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.

mores
Member
Posted 1 year ago #

remember &nbsp needs a semicolon after it.

Turbohog
Member
Posted 1 year ago #

Thanks Mores and Churchtemer. I got it to work...buut...the links are about 9 px below the images, and I'd rather them be around 4/5...like in Sonic World. (Yes, it is my site, I'm just upgrading to Wordpress) Thanks.
Edit: Also...see the affiliate section? How could I do that on wordpress?
It didn't work when I put the code into the sidepar.php. Thanks again!

mores
Member
Posted 1 year ago #

I see you got it to work - just reduce the height and everythign bumps up :)

You might want to add a "margin-bottom:10px;" or something to "sidebar ul" to get some spacing between the individual colors.

Turbohog
Member
Posted 1 year ago #

Ok I got that working too. :) Any ideas about the affiliate section? Thanks

mores
Member
Posted 1 year ago #

You mean with the mouse-over thingie? You forgot the necessary javascript.
It should work like your old site ... just put this

<SCRIPT LANGUAGE="JAVASCRIPT">
if (document.images) {
image1 = new Image
image2 = new Image
image3 = new Image
image4 = new Image
image5 = new Image
image6 = new Image
image7 = new Image
image8 = new Image

image1.src = "http://www.sonicworld.net/site/images/blank.jpg"
image2.src = "http://www.sonicworld.net/site/images/ee.jpg"
image3.src = "http://www.sonicworld.net/site/images/tsw.gif"
image4.src = "http://www.sonicworld.net/site/images/sd.gif"
image5.src = "http://www.sonicworld.net/site/images/saa.png"
image6.src = "http://www.sonicworld.net/site/images/tss.gif"
image7.src = "http://www.sonicworld.net/site/images/sh.gif"
image8.src = "http://www.sonicworld.net/site/images/sonicretro.png"

}
</SCRIPT>

right above the affiliate section. Make sure to adapt the image paths to fit the new site structure.

WordPress.org

Forums

Multiple Background Colors in Sidebar? (21 posts)

Topic Closed

About this Topic

Tags

Code is Poetry