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

In the past, I used Flexible Squares as the base for my customized layouts, but recently switched over to Expressive. For the most part, I like Expressive better, but there's one thing I was able to do in FS that I can't seem to figure out here. In the sidebar, I'd like to use images for the section headers (links, tags, mini-calendar, etc.) rather than text. I know it's possible in other styles, but none of the coding in Expressive seems to lend to using images. The difference here seems to be that, back when I was using Flexible Squares, I was creating an entire new layout layer, and was able to add in the images directly to that layer. With this layout, I'm not doing anything to the base layer, just adding custom CSS and a theme layer. Could this be the problem?

If I can't do it, it's not a huge deal. Mostly I just wanted to be able to have the header image font in more of the layout, and since I'm pretty sure you can't embed fonts in LJ and use the font for the subject heading (I'd love that, though!), using sidebar header images is the only other way I can think of. I might also make images for the link bar, since I see there's already a tutorial up for that.

Thanks in advance for your help!

Tags:

Comments

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.

I thought about the background thing, but wouldn't that then make it the same background for every header? What I'm wanting to do is have a different image for each sidebar heading, that say "Links," "Tags," etc. If I could specify a different background for each sidebar section, then that would work fine, but I didn't think that was possible.

The problem with the font is that the one I'm using isn't one most people will have on their computer, so I can't just name it in the css like I would Arial or Verdana. (It's called Honey Script) The only way to be sure it would be visible on any computer is to make it an image.

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?

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:

I've looked through the Expressive code, but there's nothing like that in there, that I can find. The closest I can find is this (this one's part of the tags list code)

open_module("categories", $title, "");

Each section has it's own open_module command, so would I put that section in the theme layer and hcnage "$title" to the url for my image, the way I did in the flexible squares layout? Or would that kind of code not work in a theme layer?

Thanks again for your help. I hope all of that made sense! (I also hope the coding posts right. If not, I'll edit.)

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 <img> element if the image URL is defined, or print the title if it doesn't. You'll have to edit the URLs so that they point to your images.

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: