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!!

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}

Flat | Top-Level Comments Only

From:

twincy

What happens if you remove the "body.lj-view-recent", "body.lj-view-archive" and "body.lj-view-friends" modifiers? So, essentially, take this whole part:

and reduce it to this:

div#header li.view {
background:transparent url(http://i55.tinypic.com/2wq7a69.png) no-repeat scroll 50% 0; padding:22px 22px 0; }

molotov

That magically fixes the part where it doesn't show! What it doesn't fix is that, now, instead of the proper image being used, each active page is showing the image for the home. I have an idea of how to fix that, but your input seems to be much better!

Your problem there is that the Dreamwidth version of this layout doesn't seem to have separate classes for each of the links when you're on that page (those were the lj- etc. classes you took out - the reason the images disappeared was that those simply don't exist in the Dreamwidth code). They're simply coded as li.view. Short of theme layer trickery, I can't think of a solution to that. Fingers crossed someone else can help!

Arghhhh thank you!

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.

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

no subject

no subject

no subject

no subject

Profile

April 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags