?

Log in

No account? Create an account

Previous Entry | Next Entry

Nav Links in Profile Widget of Sidebar

  • Mar. 19th, 2008 at 12:48 PM
I've searched the memories and the tags for this but couldn't find even anything close. If I missed it, sorry.

I want to move the navigation links in the header to between my display name and my web site link in the profile widget of the side bar of my journal. I'm using Expressive Cityscape Tokyo for my base and have a permanent account.

Thanks for the help.

Comments

( 16 comments — Leave a comment )
av8rmike
Mar. 19th, 2008 10:10 pm (UTC)
You'll need to add this function to a theme layer. Note that I didn't get fancy and add classes to the <dd> elements for the view links. You're welcome to add them if you want, like for styling the current link or something.
function print_module_userprofile(string title, bool show_profile, bool show_userpic) {
# Show view links in profile module
    var Page p = get_page();
    if ($show_userpic and not $show_profile) {
        if (defined $p.journal.default_pic) {
            open_module("photo", $title, $p.journal.userpic_listing_url);
            println """$p.journal.default_pic""";
            close_module();
        }
        return;
    }

    if (not $show_profile and not $show_userpic) {
        open_module("about-me", $title, $p.view_url{"userinfo"}, true);
        close_module(true);
        return;
    }
    
    open_module("about-me", $title, $p.view_url{"userinfo"});
    print """<div class="user-pic">$p.journal.default_pic</div>\n\n""";
    println """<dl class="profile-list widget-list">""";
    println """<dd class="profile-username item">$p.journal</dd>""";
    println """<dd class="profile-name item">$p.journal.name</dd>""";

    foreach var string v ($p.views_order) {
        var string url   = $p.view_url{$v};
        var string text  = lang_viewname($v);
        print """<dd><a href="$url" title="$text">$text</a></dd>""";
    }

    var Link memories_url = $p.journal->get_link("memories");
    if($memories_url.url != "") {
        println safe """<li class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></li>""";
    }

    if ($p.journal.website_url != "") {
        var string website_value = $p.journal.website_name ? $p.journal.website_name : $*text_website_default_name;
        println safe """<dd class="profile-name item"><a href="$p.journal.website_url">$website_value</a></dd>""";
    }
    println """</dl>""";
    close_module();
}
You'll also need to add this line to your CSS:
ul.nav {display: none;}
caninespirit
Mar. 20th, 2008 02:14 am (UTC)
Thanks that's super!

How would I increase the vertical spacing between those links a little bit. They're kinda crunched together right now. Maybe space them something like the res of the links in the sidebar...
caninespirit
Mar. 20th, 2008 02:19 am (UTC)
oh and erm when i put that CSS in my custom CSS box, the nav links in the sidebar go away too...
av8rmike
Mar. 20th, 2008 03:16 am (UTC)
Did you put the theme layer code into a user layer instead? It has to go in a theme layer, and set Cityscape Tokyo as the base theme.

And this CSS should change the spacing:
.about-me-widget dd {margin-bottom: 5px}
caninespirit
Mar. 20th, 2008 03:33 am (UTC)
*scratches head* Theme layors v.s. user layors?? I went into the developer area like I usually do and went to "Your Layors" and to the edit layor for my theme....
av8rmike
Mar. 20th, 2008 04:37 am (UTC)
There's a tutorial I wrote that tries to explain the difference, and it's covered in FAQ #176. Changes made in the Customize Journal Style page go into the "User" layer and is over-written each time you save, which is why user code shouldn't go in the "User" layer. Makes sense, huh? ;)

Remember, though, that once you've saved your changes into your theme layer, you need to make it the active one, by selecting it from "Your Custom Layers" on the main customize page, or from the "Your Styles" page.
frijo
Apr. 3rd, 2008 10:37 am (UTC)
When I saw this I just had to try it out in my journal :) It looks really nice EXCEPT, of course, in IE7. For some reason the space between "About me" and the border-line beneath is much larger than for the rest of the "nav-links". Is there a reasonable explanation for this, aside from IE7's tendency to annoy the hell out of people?

That's the css I use(d):
.about-me-widget .widget-header, .about-me-widget div.user-pic, .profile-username,.profile-name{display: none;}

.about-me-widget dd {
text-align: center;
padding:5px;
margin:0 0 5px 0;
width: auto !important;
font-size: 11px;
border-bottom: 1px solid #545454;
}

.about-me-widget dd a{color: #747474;}
.about-me-widget dd a:hover{color: #7bab4c;}


ETA: I've "solved" the problem, but it's an arkward solution. I use an image as a background, and I've set the height of .about-me-widget to 90px. That way the line at the bottom of the profile widget isn't visible in IE7 anymore. I have no idea where that extra line comes from, and why there is no line beneath "About me". I hope you can come up with a "prettier" solution...

Also, what do I have to do/include/change in the theme-layer if I want to style the current link?

Edited at 2008-04-04 03:54 pm (UTC)
av8rmike
Apr. 9th, 2008 01:57 am (UTC)
Hi, I'm sorry I took so long to get back to you. I was indisposed or sick for most of last week, and am just now getting back into it. Can you show me which journal layout has the problem with the profile box?

To add a special class to the link of the "current" view, change the code above to add the highlighted parts:
    foreach var string v ($p.views_order) {
        var string url   = $p.view_url{$v};
        var string text  = lang_viewname($v);
        var string class = "profile-$v";
        if ($v == $p.view){
            $class = $class + " current";
        }
        print """<dd class="$class"><a href="$url" title="$text">$text</a></dd>""";
    }
The actual CSS you'd use for the styling would look like:
.about-me-widget .current a {color: red;}
You can also style each of the links differently, e.g.
.profile-recent a {color: red;}
frijo
Apr. 9th, 2008 07:59 pm (UTC)
It's the current layout in my personal journal (frijo). I've changed the code back to the code that caused the problem, you should be able to see it in IE7 now.
av8rmike
Apr. 11th, 2008 06:53 pm (UTC)
Well, damn, there's one problem I see in my layer code: I did the memories list item wrong, and I can't edit the comment. In other words, this line:

println safe """<li class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></li>""";

Should be:

println safe """<dd class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></dd>""";

That could be part of the problem, which conveniently doesn't affect Firefox. Also, why are you specifying width: auto !important; in that <dd> section?
frijo
Apr. 11th, 2008 08:30 pm (UTC)
Yeah, it seems to have been part of the problem because I had simply deleted the text "Memories" in the "Customize your theme - Text - area", but hadn't actually changed any code in the theme layer. It kinda "worked" with the nav-links in the nav-bar, but apparently caused some problems when I moved the nav-links to the profile widget and tried to customize them with border-bottom: 1px solid #575757;

Looks like my sloppiness helped you find the error in the code ;)

Also, why are you specifying width: auto !important; in that
section?

Um, good question... don't think I can give you good reason... I guess it's a leftover from my attempts to fix the problem with the extra line, but don't ask me now why I thought it would fix the problem 'cause I have no idea... LOL
baralin
Mar. 21st, 2010 12:14 pm (UTC)
Part One (too long due to limit of characters)
Oh gerat , I saw this and needed to try it. The nav links always annoyed me in the header, but I didn't want to make them disappear completely.

I did the thing with the theme layer as described, pasted the whole bunch of stuff, added the layer name, pressed save & compile and then went to Your Styles and selected the theme. The nav links are now exactly where I wanted them to be *cheers* but some other things moved out of place now. Here some screenshots to make the difference clear in case I fail to describe the problem:

Before customized theme layer

After customized theme layer

- the header image shifted a bit to the left
- the journal title and subtitle shifted a bit left as well and a bit up
- additionally the whole part containing header, side bar and where I write my entries shifted left, causing the background image to look out of place.
- the sidebar background color does not go to the bottem, it changes to white in the bottom part
- there is a white bar between the sidebar and the part where I write my entries
- the joutnal title and subtitle are suddenly stuck together, need a bit more space between

Edited at 2010-03-21 12:36 pm (UTC)
av8rmike
Mar. 22nd, 2010 12:05 am (UTC)
Re: Part One (too long due to limit of characters)
Did you remember to set the base theme, as described in the tutorial?
baralin
Mar. 22nd, 2010 10:14 pm (UTC)
Re: Part One (too long due to limit of characters)
Ok, this fixed it, I forgot this one line when I paste all the stuff. I read the tutorial, but in the end I forgot to additionally add it. I didn't see the forest for the trees, this always happen when I take snippets from different sources and put them together.

Thanks a lot!!
baralin
Mar. 21st, 2010 12:15 pm (UTC)
Part Two
Here what I added to the theme layer:

layerinfo "type" = "theme";
layerinfo "name" = "Violet Tree";

function print_module_userprofile(string title, bool show_profile, bool show_userpic) {
# Show view links in profile module
    var Page p = get_page();
    if ($show_userpic and not $show_profile) {
        if (defined $p.journal.default_pic) {
            open_module("photo", $title, $p.journal.userpic_listing_url);
            println """$p.journal.default_pic""";
            close_module();
        }
        return;
    }

    if (not $show_profile and not $show_userpic) {
        open_module("about-me", $title, $p.view_url{"userinfo"}, true);
        close_module(true);
        return;
    }
   
    open_module("about-me", $title, $p.view_url{"userinfo"});
    print """<div class="user-pic">$p.journal.default_pic</div>\n\n""";
    println """<dl class="profile-list widget-list">""";
    println """<dd class="profile-username item">$p.journal</dd>""";
    println """<dd class="profile-name item">$p.journal.name</dd>""";

    foreach var string v ($p.views_order) {
        var string url   = $p.view_url{$v};
        var string text  = lang_viewname($v);
        print """<dd><a href="$url" title="$text">$text</a></dd>""";
    }

    var Link memories_url = $p.journal->get_link("memories");
    if($memories_url.url != "") {
        println safe """<dd class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></dd>""";
    }

    if ($p.journal.website_url != "") {
        var string website_value = $p.journal.website_name ? $p.journal.website_name : $*text_website_default_name;
        println safe """<dd class="profile-name item"><a href="$p.journal.website_url">$website_value</a></dd>""";
    }
    println """</dl>""";
    close_module();
}

 
baralin
Mar. 21st, 2010 12:16 pm (UTC)
Part Three
And here my custom CSS (sorry a bit in disorder, as I took some snippets from different posts to get everything I needed), I used the Expressive Papel Picado as a base:

#header-inner {
    background-image: url("http://i281.photobucket.com/albums/kk221/Lintalome/Avatars/LJ%20Layout/Violet_Tree_header.jpg");
    height: 319px;
}


#header {
    background-image: none;
}


#header-content-inner {
    margin: 0px 15px 117px -10px;
}


/* remove header border */
#header
{border: none;}



.asset-footer {
margin-bottom : 30px;
border-bottom : 1px solid #999;
}

#header-name a {
color: #988aa4;
}

body {
background-image: url("http://i281.photobucket.com/albums/kk221/Lintalome/Avatars/LJ%20Layout/Violet_Tree_back.png");
background-repeat: repeat-y ;
background-attachment: fixed ;
}

body
{ background-color: #37004c; }


/* this changes the links for edit entry etc. */
.asset-tags-list,
.asset-tags-add-tags:link,
.asset-meta,
.asset-meta-list,
.asset-meta-list a
{ color: #503b7c; }


/* color change for subject line, date, etc. */
.asset-name,
.asset-name a,
.asset-stream-list, .post-asset,
.asset-meta-list .item
{ color: #503b7c; }


/* change background color */
#beta, #beta-inner, #page-inner, #header, #footer, .asset-name-hover, .asset-body, .asset-content, #footer-ad
{ color: #000000; background-color: #cbc1d4; }

/* remove ornament */
.asset-stream .asset-header-content {
    background-image: none;
padding: 0 0 0 0px;
}


/* change color of sidebar headers */
.widget-header,
.widget-header a,
.widget .widget-header a,
.widget-header .edit a {
    color: #503b7c;
    border-bottom-color: #503b7c;
}


/* change color of sidebar dividers */
.widget-header {border-top-color: #503b7c}


.widget-header,
.widget .widget-header a {
    font-family: Verdana, sans-serif;
    font-weight: bold;
}

#header-name a {
    font-size: 36px;
    font-weight: normal;
}



#header-description {
    color: #988aa4;
}



#header .nav a {
color: #988aa4;
}

#header .nav .item { border-left-color: #988aa4;
}


body {
font-family:Verdana, sans-serif; }


h3.widget-header { font-family: Verdana, sans-serif;
font-weight: bold; }


.asset-name { font-weight: normal; }

.asset-name a { color: #503b7c; }

.nav,
.nav a {
font-family: Verdana, sans-serif; }

#header-name {
font-size: 18px;
font-weight: normal;
}

#header-description {
font-size: 16px;
font-style:italic;
font-weight: bold;
}


.powered-widget {
display: none;
}


.designed-widget {
    display: none;
}

#container-inner {
    border: 0;
}

ul.nav {
    display: none;

}
 


I would be grateful if you could help me fix the problems.

Edited at 2010-03-21 12:29 pm (UTC)
( 16 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars