?

Log in

No account? Create an account

Previous Entry | Next Entry

Images as sidebar headers

  • Aug. 19th, 2008 at 11:58 AM
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?

Here's an example of an old layout that had images as sidebar headers: http://pjferret.livejournal.com/?s2id=13778326 And this is the layout I'm currently working with: pjferret.

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!

Comments

( 6 comments — Leave a comment )
av8rmike
Aug. 19th, 2008 05:14 pm (UTC)
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
Aug. 19th, 2008 05:25 pm (UTC)
Thanks for your quick response. I'm sorry if I didn't explain myself more clearly.

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.

Here's an example of an image I'm wanting to use: http://img.photobucket.com/albums/v220/pjferret/journal/summary.jpg There's one for each section, with the applicable header text in the Honey Script font.

Again, thanks for taking the time to help.
av8rmike
Aug. 19th, 2008 05:35 pm (UTC)
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
Aug. 19th, 2008 06:00 pm (UTC)
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 = """<div class="sbarbody"><table class="calendar" align="center">""";
        var YearWeek[] theWeeks = $m.weeks;
	foreach var YearWeek w ($theWeeks) {
            $calendar = $calendar + "<tr>";
            var YearDay[] theDays = $w.days;
            var int pre = $w.pre_empty;
            if($pre > 0) {
                $calendar = $calendar + """<td colspan="$pre" valign="top">&nbsp;</td>""";
            }
            foreach var YearDay d ($theDays) {
                if ($d.num_entries) {
                    $calendar = $calendar + """<td valign="top" class="sbarcalendarposts"><a href="$d.url">$d.day</a></td>""";
                } else {
                    $calendar = $calendar + """<td valign="top" class="sbarcalendar">$d.day</td>""";
                }
            }
            $calendar = $calendar + "</tr>\n";
        }
        $calendar = $calendar + "</table></div>";
    }
    $month = """<div class="sbarbody"><ul class="sbarlist"><li class="sbartitle"><img src="http://img.photobucket.com/albums/v220/pjferret/journal/cal.jpg"><br><br><center>$month</center></li></ul></div>""";
    if ($calendar != "") { 
        print $month;
        print $calendar;
    }
}


And this one's for the links:

function print_sidebar_linklist() 
{
    var Page p = get_page();
    if (size $p.linklist <= 0) 
    {
        return;
    } 
    elseif (not $*linklist_support) 
    {
        return;
    }
    
    var string list = "";
    foreach var UserLink l ($p.linklist) 
    {
        if ($l.title) {
            if ($l.is_heading) 
            {
                $list = $list + """<center><li class="sbartitle2">$l.title</li></center>""";
            } 
            else 
            {
                $list = $list + """<li class="sbaritem"><a href="$l.url">$l.title</a></li>""";
            }
        } 
        else 
        {
            $list = $list;
        }
    }
    
    var string list_title = "";
    if ($*text_sidebar_links != "")
    {
    $list_title = """<li class="sbartitle"><img src="http://img.photobucket.com/albums/v220/pjferret/journal/links.jpg"></li>""";
 	}
 	else 
 	{
	 	$list_title = "";
 	}   
    print_sidebar_box($list_title, $list);
}


These are the original lines of code that I altered, if it helps:

if ($calendar != "") {
        print_sidebar_box("<li class='sbartitle'>$month</li>", $calendar, "sidebar_calendar");
    }


and for the links:

    var string list_title = ($*text_sidebar_links != "") ? "<li class='sbartitle'>$*text_sidebar_links</li>" : "";
    print_sidebar_box($list_title, $list, "sidebar_linklist");


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.)
av8rmike
Aug. 19th, 2008 07:20 pm (UTC)
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.
function open_module(string intname, string title, string headlink_url, bool nocontent) {
    var string{} header_images = {
                "about-me" => "http://aboutmeimg",
                "archive" => "http://archiveimg",
                "categories" => "http://categoriesimg",
                "calendar" => "http://calendarimg",
                "syndicate" => "http://syndicateimg",
                "customtext" => "http://customtextimg",
                "typelist" => "http://typelistimg",
                };

    if (not $nocontent) {
        println """<div class="$intname-widget widget">""";
        println """<div class="widget-inner">""";
        if ($header_images{$intname} != "") {
            println """<img src="$header_images{$intname}" alt="$title" title="$title" />""";
        } else {
        if ($title != "") {
            println """<h3 class="widget-header">""";
            if ($headlink_url != "") { print safe """<a href="$headlink_url">\n"""; }
            print safe $title;
            if ($headlink_url != "") { """</a>\n"""; }
            "</h3>\n";
        }
        }
    }
    println """<div class="widget-content">""";
}
Let me know in case something doesn't work right.
pjferret
Aug. 19th, 2008 08:21 pm (UTC)
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 """<img src="http://img.photobucket.com/albums/v220/pjferret/journal/links-1.jpg"><br>""";

    var string[] items = [];
    foreach var UserLink link ($links) {
        if ($link.is_heading) {
            if ($box_open) {
                print_module_list($items,"");
                close_module();
                $items = [];
            }
            open_module("typelist", $link.title, "");
            $box_open = true;
        }
        if (not $link.is_heading and $link.title != "") {
            $items[size $items] = """<a href="$link.url">$link.title</a>""";
        }
    }
    if ($box_open) {
        print_module_list($items,"");
        close_module();
    }
}


(I tried to make my changed code red. I hope it works.)

Thanks again so much for your help! I never would have figured all of that out on my own. I also managed to change my linkbar to images, so the layout is pretty much exactly what I wanted now. :D
( 6 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars