Showing the active page in the nav module in Flexible Squares

[molotov]

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

Comments

[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:

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}

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; }

[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.