style_system | [Solved] Adding a title image and a couple of other things

Entry tags:

[Solved] Adding a title image and a couple of other things

I'm working on a Transmogrified layout and I have a few questions:

[1] How do I add an image as a journal/community title, instead of plain text? The title image should also link to the journal/community in question, just like the plain text title does.

[2] I'd like to place the search module above the journal/community title. How do I do this?

[3] How's the (theme layer) code for the .page-back and .page-forward link in Transmogrified? I don't like the '<<' and '>>' very much which is why I want to remove them. [Edit: I just realized that it is done with css, so you can consider the problem solved.]

As always, help and advice is very much appreciated.

Flat | Top-Level Comments Only

1 -- Maybe something like this would work? http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/ It's not accessible to people browsing with images off, but display: none-ing wouldn't be either, and it doesn't require you to mess with layers.

2 -- I recommend absolute positioning, if that seems like an okay idea. I've added notes on the classes of that module here:

http://wiki.dwscoalition.org/notes/S2_CSS:_Module_ids_and_classes#.module-search

Edited 2010-11-18 16:34 (UTC)

1) I wouldn't mind messing with layers as I use a theme layer for this layout. The css solution is more a dirty hack than a real solution in my opinion. But thanks for the link anyway, dirty hacks can be useful sometimes :) In this case though, I'd prefer a theme layer solution.

2) I'm not sure it can be done with css only. I mean the search module can be moved between the three module sections, but to place it in the header 'absolute positioning' is probably not enough. Unless you mean I should absolute position .module-section-one...?

In this case I think you're going to be redefining the function Page::print() function. Hopefully this works without me testing it, have to leave soon, put my comment in all caps:

function Page::print()
{
    """
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>""";
        $this->print_head();
        $this->print_stylesheets();
        $this->print_head_title();    
    println "</head>";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
            <div id="container">
            <div id="header">
                <a name="top">
    """;
    ## YOU CAN CALL THE SEARCH MODULE DIRECTLY
    print_module_search();

    $this->print_global_title();
    """
                </a>
            </div>
    """;
    $this->print_module_section("one");
    """
            <div id="wrap">
            <div id="content">
    """;
    $this->print_body();
    """
            </div>
    """;
    $this->print_module_section("two");
    """
            </div><div style="clear:both;"></div>
        </div>
        <div id="footer">
    """;
    $this->print_module_section("three");
    """
        </div>
    """;
    $this->print_wrapper_end();
    """
    </html>
    """;
}

# AND MAKE SURE TO TAKE THE SEARCH SECTION OUT OF MODULE AREAS OR IT'LL GET REPEATED
set module_search_section = "none";

And you can alter your title print out here to include an image/other markup changes you want here:

function Page::print_global_title() {
    if ($.global_title) {
        """<h1 id="title"><span>""" + $.global_title + """</span></h1>""";
    }
}
function FriendsPage::print_global_title() {
    if ($.friends_title) {
        """<h1 id="title"><span>""" + $.friends_title + """</span></h1>""";
    }
    else {
        """<h1 id="title"><span>""" + $.global_title + """</span></h1>""";
    }
}

Does that help any, need more explanation, etc?

Edited 2010-11-18 18:24 (UTC)

Thanks so much, it worked :)

I am glad! Good luck on your style!

Flat | Top-Level Comments Only

[Solved] Adding a title image and a couple of other things

no subject

no subject

no subject

no subject

no subject