Here is a quick video that shows an easy way to create sidebars that are styled with multiple images using Catalyst as your theme framework. It’s pretty quick and straight forward so I won’t add a lot of text here. Below the video is the CSS code I used.
Stylish sidebars even Internet Explorer users will see, with Catalyst
That’s the most important part! Any developer can use the latest and greatest features of CSS3 and create this same effect with multiple background images. But that would leave Internet Explorer users out and probably seeing no sidebar at all. So here’s the fix that will have you looking like a genius for working around this problem.
The CSS:
#sidebar-1-wrap {
background: white url(images/sidebar-tutorial-1-top.jpg) top center no-repeat;
padding-top: 111px;
}
#sidebar-1 {
background: white url(images/sidebar-tutorial-1-bottom.jpg) bottom center no-repeat;
padding-bottom: 111px;
}
#sidebar-1 .widget {
background: white url(images/sidebar-tutorial-1-middle.jpg) bottom center repeat-y;
margin-bottom: 0;
}
Tips:
- Setting the #sidebar-1 .widget bottom margin to zero prevents a space from appearing between each widget where there would be no background. If your widgets are too close together, set the padding-bottom to create the necessary visual space.
- I had set my sidebar width in Dynamik Options > Widths to 20 pixels smaller than my background image width to give the effect of a 10 pixel padding on each side.
- There are many more ways to style the sidebar, widget areas and widget titles in Dynamik Options > Sidebars.
- Don’t have Catalyst? See what you’re missing! Get it here…
You? rock