Tessisamess

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:
[attribute^=value]
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.

[attribute$=value]
ex. a[href$="html"]

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

[attribute*=value]
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! ♡

Tags:

Comments

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!