style_system | Showing the active page in the nav module in Flexible Squares

I really hope someone can help me!

I'm using the port of Flexible Squares, and I brought my old layout with me. The problem is that it uses images for navigation. On LJ, the active page shows in the nav module like this:

But on DW, the active page disappears from the nav, leaving me with this:

I feel like I'm overlooking something.

#header {
padding:5px 0;
text-align:right;
text-transform:lowercase;
z-index:100;}

#header:hover {margin: auto;}

ul.navheader {
list-style:none outside none;
margin: 20px auto 20px;
padding:0;
text-align: center;
z-index:100;
}

ul.navheader:hover {}

ul.navheader li {
display:inline;
list-style-type:none;
margin:0;}

.headerimage 
{
background-image:url();
background-repeat: no-repeat;
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

div#header a, div#header a:link, div#header a:visited {
border:0 none;
font-size:0px;
padding:4px 6px;
color:transparent;
}

div#header a:hover { 
border:0 none;
font-size:0px;
padding:4px 6px;
color:transparent;
}

div#header li.view { 
border:0 none;
font-size:0px;
padding:4px 6px;
color:transparent;
}

body.lj-view-recent div#header li.view {
background:transparent url(http://i55.tinypic.com/2wq7a69.png) no-repeat scroll 50% 0;
padding:22px 22px 0; }
body.lj-view-archive div#header li.view{ padding:25px 25px 0; background:transparent url(http://i54.tinypic.com/smayxx.png) no-repeat scroll 50% 0} 
body.lj-view-friends div#header li.view{ padding:22px 21px 0; background:transparent url(http://i55.tinypic.com/30lh0z7.png) no-repeat scroll 50% 0}

div#header a[href*=".dreamwidth.org/"] {
background:transparent url(http://i54.tinypic.com/14e8mix.jpg) no-repeat scroll 50% 0; padding:22px 22px 0; }

div#header a:hover[href*=".dreamwidth.org/"] {
background:transparent url(http://i55.tinypic.com/2wq7a69.png) no-repeat scroll 50% 0; padding:22px 22px 0; }

div#header a[href*="/archive"] {
background:transparent url(http://i51.tinypic.com/dzimja.jpg) no-repeat scroll 50% 0; padding:25px 25px 0; }

div#header a:hover[href*="/archive"] {
background:transparent url(http://i54.tinypic.com/smayxx.png) no-repeat scroll 50% 0; padding:25px 25px 0; }

div#header a[href*="/read"] {
background:transparent url(http://i54.tinypic.com/35nbzbn.jpg) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a:hover[href*="/read"] {
background:transparent url(http://i55.tinypic.com/30lh0z7.png) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a[href*="/profile"] {
background:transparent url(http://i53.tinypic.com/2s0h2yf.jpg) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a:hover[href*="/profile"] {
background:transparent url(http://i52.tinypic.com/2ag3hw9.png) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a[href*="/tag"] {
display:none }
div#header a:hover[href*="/tag"] {
display:none }
div#header a[href*="/memories"] {
display:none }
div#header a:hover[href*="/memories"] {
display:none }

Any help would be much appreciated!!

Flat | Top-Level Comments Only

Okay, got it!

Replace the entire Page::print bit with this:

function Page::print () {
    var Page page = get_page();
    var string title = $this->title();

var string page_align = "";
    if ($*page_alignment == "left") {
       $page_align = " margin-left: 20px; margin-right: auto;";
    }
    elseif ($*page_alignment == "right") {
       $page_align = " margin-left: auto; margin-right: 20px;";
    }
    elseif ($*page_alignment == "center") {
       $page_align = " margin-left: auto; margin-right: auto;";
    }

"""
    <!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();
        print safe """<title>$title</title>""";
        $this->print_custom_head();
        """
        </head>
        <body class="view-$.view">
                <a name="top"></a>
        """;
        $this->print_control_strip();
           if (viewer_sees_hbox_top()) {
               """<div style="background-color: $*outer_table_bgcolor; border: 1px solid $*border_color; padding: 15px; text-align: center; width: 728px; margin-bottom: 10px;$page_align">""";
               $this->print_hbox_top();
               "</div>";
           }
            """
            <div class="headerimage"></div>
            <div id="content">
                """;
                $this->lay_print_header();

if ($*show_sidebar) {
                """
                <div id="sidebar">""";
                    print_sidebar();
                    """
                    <div class="clear"> </div>
                </div>
                """;
                } elseif (viewer_sees_vbox()) {
                    """<div id="sidebar">""";
                    """<div style="margin: 0 auto 0 auto; width: 160px;">""";
                    $this->print_vbox();
                    "</div>";
                    """<div class="clear"> </div>""";
                    "</div>";
                  }
                  """
                  <div id="maincontent">""";
                    $this->print_body();
                    "
                </div>";
                $this->lay_print_footer();
           "</div>";
           if (viewer_sees_hbox_bottom()) {
               """<div style="background-color: $*outer_table_bgcolor; border: 1px solid $*border_color; padding: 15px; text-align: center; width: 728px; margin-top: 10px;$page_align">""";
               $this->print_hbox_bottom();
               "</div>";
           }
        "</body>
    </html>";
}

And then you can add this to your stylesheet (taken from your old one but not exactly the same):

body.view-recent div#header li.view {
background:transparent url(http://i55.tinypic.com/2wq7a69.png) no-repeat scroll 50% 0;
padding:22px 22px 0; }
body.view-archive div#header li.view{ padding:25px 25px 0; background:transparent
url(http://i54.tinypic.com/smayxx.png) no-repeat scroll 50% 0}
body.view-read div#header li.view{ padding:22px 21px 0; background:transparent
url(http://i55.tinypic.com/30lh0z7.png) no-repeat scroll 50% 0}

Edited (fixed code) 2012-01-06 07:25 (UTC)

omg gorgeous. THANK YOU SO MUCH

\o/ Welcome!

Showing the active page in the nav module in Flexible Squares

no subject

no subject

no subject