Backrgound images in sidepanels

General rule of thumb: if you came up with the idea to do X, Y, and Z, 1) of course it’s possible, and 2) there are probably thousands of other people who either have done it or also want to do it. ??

I was looking at your site, and it’d be my recommendation to breakup the left and right sidebar elements into their own specific <div> elements. I’m not sure if those are entirely plugin-driven or just part of a template file. So, for example, in the big #leftcol <div>, put all the parts of the calendar into a #calendar <div>. Right now it’s a million pieces all floating around, and for what you ultimately want to achieve, organizing like this will save you time and hassle. Anyway, moving on…

A solid line around a box (with square edges) would be the easiest thing to do. So, assuming you put all of the calendar elements into a containing <div> called #calendar, you would put this in your CSS stylesheet:

#calendar {
     border: 1px solid #ff9933; /* bright orange */
}

For elements that are likely to have a fixed width and/or height (such as a calendar), putting a background image would be okay. For that you would:

#calendar {
     background-image: url(path/to/your/image.jpg);
}

For elements where the width and/or height are unknown (such as the Archive box which will expand as months go by), I wouldn’t recommend a background image. Having a solid background color is preferable.

#calendar {
     background-color: #e5e5e5; /* light grey */
}

Rounded corners becomes a bit more tricky because it will involve images (c’mon CSS3…), but it’s still doable. I would give the #calendar <div> 3 child <div> elements: #calendar-top, #calendar-content, and #calendar-bottom. For the top and bottom you could set the background-image property in your CSS (as shown above).

So, for example, the top and bottom images could have rounded edges with a thin orange border, and the #calendar-content <div> could be dealt with entirely through CSS:

#calendar-content {
     border-left: 1px solid #ff9933;
     border-right: 1px solid #ff9933;
     border-top: none; /* this is implied */
     border-bottom: none; /* this is implied */
     background-color: #ffffff;
}

Hope that helps!

Certainly does start to help yes, The sidebars are mostly plugin driven. If I go and edit the sidebar.php will it mess anything up becaus ethey were entered via plugin?

Also to have rounded boxes, where do I tell it to to use images with rounded corners for the top and bottom line?

Oh and thanks for your help so far ??

Rather then edit sidebar.php, which I’m assuming just calls to a function that will include the plugin, just go straight to the source. Look in your /plugins/ directory and open the appropriate PHP file(s).

For the rounded boxes, as previously stated, you’d create 3 child <div> elements under the parent <div> element. So the structural hierarchy would be:

-- #calendar (parent)
  |_ #calendar-top (child)
  |_ #calendar-content (child)
  |_ #calendar-bottom (child)

After that, it’s entirely CSS to control what it looks like:

#calendar-top {
     height: 100px;
     width: 100px;
     background-image: url(path/to/your/image/calendar-top.gif);
     background-repeat: none;
}

#calendar-content {
     border-left: 1px solid #ff9933;
     border-right: 1px solid #ff9933;
     border-top: none; /* this is implied */
     border-bottom: none; /* this is implied */
     background-color: #ffffff;
}

#calendar-bottom {
     height: 100px;
     width: 100px;
     background-image: url(path/to/your/image/calendar-bottom.gif);
     background-repeat: none;
}

ok Thanks again. I’ll have a go and see how I do. ??