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

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

[twincy]

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!

[molotov]

Arghhhh thank you!