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

From:

afuna

Hey can you link me to the port of FS that you used? I might be able to help out with the layout trickery to specify the specific view.

molotov

This is the FS source code, I'm pretty sure it's the standard one that everyone uses. Thank you!

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) Date: 2012-01-06 07:25 am (UTC)

omg gorgeous. THANK YOU SO MUCH

\o/ Welcome!

Dreamwidth style system discussion

Showing the active page in the nav module in Flexible Squares

Showing the active page in the nav module in Flexible Squares

no subject

no subject

no subject

no subject

no subject

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags