?

Log in

No account? Create an account

Previous Entry | Next Entry

HOWTO: Individually Formatting Links

  • Dec. 5th, 2007 at 3:12 PM
Since questions still come up about how to hide various links, and since I know of two good techniques for it, I thought I'd compile it all into one tutorial/How To post. Depending on your account level (Basic/Plus/Paid/Perm), there are two primary methods to employ: CSS or S2 code, each with their own advantages and disadvantages.

[All Account Levels] The CSS Method


For each link to hide, add the following CSS to the "Custom Stylesheet" box on the Customize Journal Style->Custom CSS page:
a[href*=text substring] {display: none;}

What goes into text substring? It depends what content you wish to hide, but it will be a substring of that link's URL. For example:

This code:Will Hide Links to:
†- Note that the "Flag" link is already hidden on non-public entries.
Archive and friends pages are still accessible with direct URLs, and functionality of the other links is not disabled.
a[href*=calendar] {display: none;}Calendar page
a[href*=friends] {display: none;}Friends page
.asset-meta-list a[href*=memadd] {display: none;}Add to Memories
.asset-meta-list a[href*=flag] {display: none;}Flag†
.asset-meta-list a[href*=subscrip] {display: none;}(Un)Track This
It's worth mentioning that display: none isn't the only CSS one could apply to individual links. Use this code to change all the "Leave a comment" links to blue:
.asset-meta-list a[href*=reply] {color: #0000FF;}

Advantages:
  • Available to users at all account levels.
  • Works on all themes, not just Expressive/Mixit.
Disadvantages:
  • Not all browsers recognize the [attr*=] attribute specifier. Internet Explorer 6 in particular, and maybe older versions of Safari or Opera.
  • Cumbersome for hiding/formatting multiple links
  • Circumvented by ?style=mine.


[Paid/Permanent Accounts] The S2 Layers Method


This method is similar to the one used here to change the entry link bar to images, although this one will allow you to customize the order of the links. Follow the tutorial for creating a theme layer, then add in this code. To reorder or remove links, change the order in the link_keyseq array.
function Entry::print_linkbar() {
# Makes the entry linkbar contents and order modifiable.
    var Link link;
    var string url = "";
    var string text = "";

    print """<div class="asset-meta">\n""";
    print """<ul class="asset-meta-list">\n""";

    $.comments->print();
	
    # Here is where you would change the order of or remove linkbar links.
    var string[] link_keyseq = [ 
        "edit_entry",
        "edit_tags",
        "mem_add",
        "tell_friend",
        "watch_comments",
        "unwatch_comments",
        "flag",
    ];

    var string{} link_caption = {
        "edit_entry" => $*text_edit_entry,
        "edit_tags" => $*text_edit_tags,
        "tell_friend" => $*text_share_this,
        "flag" => $*text_flag,
        "mem_add" => $*text_mem_add,
        "watch_comments" => $*text_watch_comments,
        "unwatch_comments" => $*text_unwatch_comments,
    };

    foreach var string link_key ($link_keyseq) {
        $link = $this->get_link($link_key);
        if (defined $link) {
            $url = $link.url;
            $text = $link_caption{$link_key} != "" ? $link_caption{$link_key} : $link.caption;
            print safe """<li class="asset-meta-comments item asset-meta-no-comments"><a href="$url">$text</a></li>""";
            $link->print_raw();
        }
    }
    print """<li class="asset-meta-comments item asset-meta-no-comments"><a href="$.permalink_url">$*text_permalink</a></li>""";
    println "\n</ul>\n</div>\n";
}
Here is a similar function for changing the nav links at the page top:
function Page::lay_print_header_links() {
# Makes the nav linkbar contents and order modifiable.
    """<div id="message-window" class="hidden"></div>\n""";
    container_open("header");
    container_open("header-content");
    """<div id="header-photo">\n<div id="header-photo-inner"></div>\n</div>\n""";
    """<div id="header-text"><ul class="nav">\n""";

    # Here is where you would change the order of or remove nav bar links.
    var string[] views_order = [ 
        "recent",
        "archive",
        "friends",
        "userinfo",
    ];
	
    foreach var string v ($views_order) {
        var string url   = $.view_url{$v};
        var string text  = lang_viewname($v);
        var string class = "item";
        if($v == $.view) {
            $class = $class + " current";
        }
        if($v == $.views_order[0]) {
            $class = $class + " first";
        }

        $class = " class=\"$class\"";

        print """<li$class><a href="$url" title="$text">$text</a></li>""";
    }

    var Link memories_url = $.journal->get_link("memories");

    # Memories
    if($memories_url.url != "") {
        println safe """<li class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></li>""";
    }

    # Menu end
    """
    </ul>
    <div id="header-name">""";
    var string base_url = $.journal->base_url();
    var string friends_url = $.view_url{"friends"};
    if ($this isa FriendsPage) {
        print safe """<a href="$friends_url">""" + $this->view_title() + """</a>""";
    } else {
        print safe """<a href="$base_url">$.global_title</a>""";
    }
    """
    </div>""";

    if(not $this isa FriendsPage) {
        print safe """
      <div id="header-description">$.global_subtitle</div>""";
    }

    """
    </div>
    </div><span id="header-content-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header Content -->
    </div><span id="header-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header -->""";
}
Also, both methods can be combined-- one could change the layout of the entry linkbar and link colors, for instance.

Advantages:
  • Works on all browsers, regardless of CSS support.
  • Allows you to change the link order, which cannot be done with CSS.
  • Easier to change multiple links at once.
Disadvantages:
  • A Paid or Permanent account is required.
  • Also circumvented by ?style=mine.

Comments

( 31 comments — Leave a comment )
foxylovesme
Dec. 5th, 2007 09:00 pm (UTC)
Thanks!

camomiletea
Dec. 5th, 2007 09:48 pm (UTC)
This is great! Is this "a[href*=memead]" a typo? the link goes "memadd", not "memeadd"
av8rmike
Dec. 5th, 2007 10:52 pm (UTC)
Well, you know, if you wanted to hide your "add to memes" link... ;)

Fixed!
libekory
Jan. 30th, 2008 01:57 am (UTC)
http://karakura-m-o-d.livejournal.com/

I went for method #1, but as you can see there's a weird space between the links. I tried removing padding and margins, but...

Any suggestions?
av8rmike
Jan. 30th, 2008 02:45 am (UTC)
Frankly, that styling is a mess. You're using both an external stylesheet and embedded CSS, half of which is overriding the other, and a third half of it isn't even the right class names. I think that if you picked one method and cleaned it up, you'll find the problem fixes itself.
libekory
Jan. 30th, 2008 02:48 am (UTC)
I know it is. I didn't mean to wind up with it that way. I was going to go through and merge them. (It's just, I tend to poke at stylesheets a lot while I'm designing a layout, and Firefox seems to eventually just... stop loading the changes unless they're all in the overrides box. Bleh.)

But I doubt they'll fix themselves, because I had this same problem with another layout a few months ago. Still, I'll try, and see.
libekory
Jan. 30th, 2008 03:11 am (UTC)
There, fixed. But the padding remains. :(

(For what it's worth, those weren't the wrong class names. They were referring to the original version of this style, which was accomplished using layers; I added in a class or two, because -- prior to reading the awesome tutorial in this community showing all the different parts of the layout -- I wasn't sure there was any way to style the link bar like I wanted to without also styling the date/time. Finding that entry is part of what caused me to attempt to do the layout again in pure CSS. This padding thing is one of two remaining problems I have.)
[Please edit and title your post!] - av8rmike - Jan. 30th, 2008 03:29 am (UTC) - Expand
[Please edit and title your post!] - libekory - Jan. 30th, 2008 03:35 am (UTC) - Expand
[Please edit and title your post!] - libekory - Jan. 30th, 2008 03:52 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Jan. 30th, 2008 04:01 pm (UTC) - Expand
dietotaku
May. 16th, 2008 12:44 am (UTC)
what code do i use to hide the "link" link? it's especially irritating since i can't change the text for it...
av8rmike
May. 16th, 2008 01:39 pm (UTC)
You have a Paid account, so you can change the text for it:

set text_permalink = "your text here";
dietotaku
May. 17th, 2008 04:02 pm (UTC)
where do i put that? when i tried to add it under .asset-meta-comments it didn't change the text and i got a bunch of dividers for the other links i've removed (track this, tell a friend, etc). or is it because i'm trying to use japanese characters for the text?
[Please edit and title your post!] - av8rmike - May. 19th, 2008 12:42 pm (UTC) - Expand
Permalink - minedive - Jun. 9th, 2008 11:36 am (UTC) - Expand
Re: Permalink - av8rmike - Jun. 9th, 2008 01:15 pm (UTC) - Expand
Re: Permalink - (Anonymous) - Jun. 9th, 2008 01:33 pm (UTC) - Expand
Re: Permalink - av8rmike - Jun. 9th, 2008 01:50 pm (UTC) - Expand
agneson9
Sep. 15th, 2010 09:38 am (UTC)
How can I block "share this!"?

Have tried
.asset-meta-list a[href*=tell_friend] {display: none;}
.asset-meta-list a[st_page*=home] {display: none;}
.asset-meta-list a[href*=share_this] {display: none;}
av8rmike
Sep. 15th, 2010 01:01 pm (UTC)
The second one is supposed to work, and apparently does because I can't see the "Share this" on your journal.
agneson9
Sep. 15th, 2010 01:31 pm (UTC)
hmmm, i'm reading my friendslist and it's right there.


ETA. I looked at my entries, and I can see it. Am I missing something universal, say, in 'viewing options'?
[Please edit and title your post!] - av8rmike - Sep. 15th, 2010 08:11 pm (UTC) - Expand
[Please edit and title your post!] - agneson9 - Sep. 16th, 2010 02:17 am (UTC) - Expand
agneson9
Aug. 3rd, 2012 07:23 am (UTC)
Just wondering if there has been an update to the CSS method, as I am not able to get it to work with http://thefulcrum.livejournal.com/33045.html
av8rmike
Aug. 6th, 2012 11:59 am (UTC)
To hide what? The "share this" thing again?
[Please edit and title your post!] - agneson9 - Aug. 6th, 2012 01:35 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Aug. 10th, 2012 03:08 pm (UTC) - Expand
[Please edit and title your post!] - agneson9 - Aug. 10th, 2012 03:46 pm (UTC) - Expand
[Please edit and title your post!] - av8rmike - Aug. 10th, 2012 04:11 pm (UTC) - Expand
[Please edit and title your post!] - agneson9 - Aug. 10th, 2012 04:40 pm (UTC) - Expand
( 31 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