Previous | Next

How to target & hide entry links

How to target and hide entry links

So you want to hide certain links from your entry footer, huh?

No worries, I can help with that! It's one of those things that's really easy once you know how to do it, but when you're still learning CSS, or you don't really edit it that often, it can be a pretty hard conclusion to arrive at without an assist. This tutorial is a tie-in for the launch of [info]s2complete, my documentation project for the Complete Style CSS! Let's get started!

First, let's identify the pieces of your linkbar!

Here are the basic classes of your entry linkbar in S2 Complete Style. As you can see, nothing here targets any specific link, but is general styling for the whole area. I've left out the default layout's base CSS since this tutorial isn't about actually styling the entry linkbar, but if you'd like to learn more about that, you can check out the lesson on my S2 Complete Style documentation!

.entry-linkbar{} The container holding your list.
.entry-linkbar ul{} The list holding your list items.
.entry-linkbar li{} All list items in your links list.
li.first-el{} The first list item in your links list.
.entry-linkbar li a{} Each actual link in the linkbar.

.permalink{} **This class is a lie and doesn't actually exist; it won't help you hide your permalink.**

Now let's identify the code that will make this possible!

Using nth-of-type or similar selectors just won't work, as you've probably figured out on your own if you've already tried to do this before. Why doesn't that work? Because it relies on a vague idea of the links rather than specific targeting. It's just picking a number down the line and hiding it, which means your logged-in view of the links list, which has more links in it, will hide different links than it will for someone viewing your account from their own account. Bummer.

But there's a whole slew of CSS selectors available, and there's an easy way around the problem! Today, we're going to be using the [attribute] selector, but I suggest reading up on the W3Schools entry if you have an interest in being able to target specific things to hide or alter them in S2, because there are a lot more possibilities than just what I'm teaching here today.

Let's take a look at the CSS selectors we'll need for this tutorial:
ex. a[href^="https"]

Selects every link with an href attribute value that begins with "https". We don't actually need this one, but it goes with the others so I'm including it for your reference.

ex. a[href$="html"]

Selects every link element with an href attribute value that ends with "html".

ex. a[href*="subscriptions"]

Selects every link element with an href attribute value that generally contains "subscriptions" somewhere in it.

Next, how do we hide some links, but not others?

The key to making this work is finding a unique part of the entry link you want to hide that no other link on the list contains. For example, the Track/Stop Tracking link has the word subscriptions in it, but no other link does. That is what you would target to hide that link and none of the others (you would use the last selector above, as it's in the link, but isn't specifically the start or end of the link.)

Leave a comment link:
.entry-linkbar li a[href*="mode=reply"]{display:none;}

Read comments link:
.entry-linkbar li a[href*="comments"]{display:none;}

Edit link:
.entry-linkbar li a[href*="editjournal"]{display:none;}

Edit tags link:
.entry-linkbar li a[href*="edittags"]{display:none;}

I don't recommend hiding the above links in most cases, but I'm adding them for completion's sake. Below are the links people most commonly want to hide!

Remember link:
.entry-linkbar li a[href*="memadd"]{display:none;}

Tell a friend link:
.entry-linkbar li a[href*="tellafriend"]{display:none;}

Track link:
.entry-linkbar li a[href*="subscriptions"]{display:none;}

Permanent link:
.entry-linkbar li a[href$="html"]{display:none;}

The "Link" link on the entry's linkbar is the trickiest one. It contains nothing unique to it to differentiate it from any of the other links on the list, but it is the only link that ends in html, so this will hide the permalink but none of the other links. Notice that it uses $ and not * like the others.

Technically the links to view and leave comments could use the 'ends in' selector too, but it's not absolutely necessary to do it that way within the confines of the linkbar like it is with the permalink, so I've used the 'contains' selector just to make things a little simpler.

Why yes, you can use this to replace link text!

Instead of declaring display:none; you could easily use this method to style each link with its own image or combine it with the :before selector to replace the text on links that don't give you the option in the general editing with different text. Comment below if you'd like a Part 2 tutorial for these things!

Important things to consider:

Note #1: Don't forgo using the .entry-linkbar li preface for your link targeting or it may have some very unintended effects carried through the whole page. You want to specifically target the links inside the linkbar to hide links inside it. (For example, if you used a[href$="html"]{display:none;} without the class to specify where you want to hide links you would probably accidentally hide most of your links... everywhere.)

Note #2: When using CSS selectors this way to get really specific with targeting elements, I recommend not shortening words. For example, you could shorten subscriptions and tellafriend to subs and tell and it would work for this specific tutorial and likely wouldn't have unintended effects, but it's not a great habit to get into because if you ever use this method for a broader scope, you'll probably wind up hiding things you don't want hidden here and there.

♡ You're Done! ♡



Feb. 10th, 2018 04:30 pm (UTC)
😂😂😂 AW TY! ♥

I've been meaning to do this tutorial for so long and right after releasing [info]s2complete seemed like the perfect time to finally do it. I'll be doing a sort of "sister" tutorial after this one that explains the process behind replacing the UI icons in layouts! (Sister because it also uses selectors, but the process utilizes more styling.)
Feb. 10th, 2018 04:32 pm (UTC)
I've been tinkering with S2 layouts for a while (inspired by you) and the entry links drive me nuts so this is A++. And I've been frankening your icon replacement code into my journals for 5ever (with credit, of course) so having a full breakdown will be amazing.
Feb. 10th, 2018 04:42 pm (UTC)
♥♥♥ Pshhh, ty ty! I hope everything over in [info]s2complete inspires you to make even more! (I honestly do think the way I reorganized the CSS makes it much easier to work with, especially with a chaptered lesson plan haha.)

But yeah, the entry links super tricky at first, and you have no idea how long it took me to figure out how to disable the permalink. An embarrassingly long time. Embarrassingly. Long. And then once you know how to target and disable it's like oh well that's not even bad, welp.

Using the [attribute] selector can honestly your best friend on sites like IJ where you're not allowed to mess with the pre-existing HTML unless you're paid and can use theme layers (which is how this journal has a non-standard header, menu, footer, entry footer, and a date before the subject instead of after) but I'll say this right now: Working with theme layers is probably not something most people would want to do, because it's more programming than designing.

Aw, thank you, yeah! I definitely wanna get that out there. There used to be a generator for doing tinyicons from malionette @LJ but that has long since been discontinued, so I very well may make a new one myself tbh, because it would be good for here and DW as well!
Feb. 15th, 2018 01:09 am (UTC)
Hi Tess!

I was trying this out, and I got the links to vanish but the code is behaving as if something is still there, just invisible (including a picture of what I mean in case I'm explaining it as badly as I think I am). I guess my question is, did I do something wrong or is this just a thing that happens?
Feb. 15th, 2018 01:47 am (UTC)
It's not just you! This is because in Complete Style each li is separated with a border (note that you're targeting the inside links and not the li it's wrapped in.) I actually meant to touch on this in the tutorial and spaced it.

So, what I usually do for this if I still want those | separators in place is I'll use .entry-linkbar li a:before{border-left:1px solid #000;} and .entry-linkbar li:first-of-type a:before{border:none;} to emulate these links after disabling the border and padding on .entry-linkbar li

However! If you don't want the separators at all you can just reset those values in .entry-linkbar li and style the inner links as you please.

Hopefully I explained that right, haha. I'm draggin' today. Let me know if I need to clarify anything! ♥
Feb. 15th, 2018 01:58 am (UTC)
Ooh, okay. So do I have to style each link separately, then?
Feb. 19th, 2018 04:32 pm (UTC)
Nah, you can just do that in .entry-linkbar li a to style all of them! Here's the base styling info for the entry linkbar for reference! ♥
Feb. 20th, 2018 12:00 am (UTC)
Aaah you are amazing, thank you so much.