Images as sidebar headers

[pjferret]

I'm not sure what I want to do is possible, but I figured if anyone knew, it would be you guys

Comments

[av8rmike]

Many of the system themes have images in the sidebar headers as backgrounds. All you should have to do is add a background-image rule to your existing .widget-header{} section. If your images already contained the text for the headers and you wanted to remove the existing text, that would be a little harder.
However, I'm not understanding your last paragraph. You can change the font of the sidebar headers the same way you'd change any other font, unless I'm not getting what you're asking for.

[pjferret]

Thanks for your quick response. I'm sorry if I didn't explain myself more clearly

[av8rmike]

Each of the widgets has its own CSS class, so you would have to do something like this:
.calendar-widget .widget-header {
background-image: url(http://IMAGEURL);
}etc. for each of the widgets. It's a bit of a pain, but it's doable. However, since you want to remove the text too, it may be easier to do it through the theme layer anyway. Do you have an example of the code you used for your Flexible Squares layout?

[pjferret]

Ohh! I didn't realize that. Okay, that will work, then. I don't mind messing with the theme layer to remove the text if that's what needs to be done. It's still easier than my old method of doing an entire layout layer for every new layout!

For the Flexible Squares layout, I adjusted the layout layer code to add in the images, so they're all over the place. This is the one for the mini calendar:

function print_sidebar_calendar()
{
var string calendar;
var Page p = get_page();
var YearMonth m = $p->get_latest_month();
var string month = $m->month_format();
if($m.has_entries) {
$calendar = """
""";
var YearWeek[] theWeeks = $m.weeks;
foreach var YearWeek w ($theWeeks) {
$calendar = $calendar + "";
var YearDay[] theDays = $w.days;
var int pre = $w.pre_empty;
if($pre > 0) {
$calendar = $calendar + """ foreach var YearDay d ($theDays

[av8rmike]

OK, this is going to seem a little unusual, but I think it's the simplest way to accomplish what you want. Rather than modify each of the module printing functions in turn to add an image, we'll modify the open_module() function, which as you saw is called by each module. The new function will contain links to each of the images you want to use, print the

[pjferret]

You're awesome! That worked perfectly, with one exception: because I have more than one category of links, it applied the links header image to each one. But I managed to find a workaround. In case the question comes up again, this is what I did:

I took out the line for the typelist in the images part you gave me above, so it would still print text. Then I found the open_module command in the base layer and added in the command to print my links header image before starting the links list:

function print_module_links(string title) {
var Page p = get_page();
var UserLink[] links = $p.linklist;
if (size($links) < 1 or not $*linklist_support) { return; }

var bool box_open = false;
if (not $links[0].is_heading) {
open_module("typelist", $title, "");
$box_open = true;
}

print """