Topic: CSS Help

Posted under e621 Tools and Applications

As I try to continue to figure out CSS, could I be pointed in the direction of what controls the tag numbers? I'd like to either remove them or get anything above 1 million to show up as "1m"

The tags have the class tag-list-count, so you could hide them entirely with

.tag-list-count {
    display: none;
}

Hiding only if they're greater than a million would be tricky.

themimic said:
As I try to continue to figure out CSS, could I be pointed in the direction of what controls the tag numbers? I'd like to either remove them or get anything above 1 million to show up as "1m"

CSS is for styling. Under only very specific circumstances can you actually change something like this with CSS--You can change the "content" attribute but only on pseudo-elements such as ::before or ::after.

What you want is fairly easy in JavaScript, though. I've created a snippet that shows off a JavaScript function that takes in an integer and formats it with K, M, or B: https://jsfiddle.net/QuietWind01/b7etfm5c

ares_the_great said:
CSS is for styling. Under only very specific circumstances can you actually change something like this with CSS--You can change the "content" attribute but only on pseudo-elements such as ::before or ::after.

What you want is fairly easy in JavaScript, though. I've created a snippet that shows off a JavaScript function that takes in an integer and formats it with K, M, or B: https://jsfiddle.net/QuietWind01/b7etfm5c

this is kind of a styling thing, the problem here is that there's no way to select an attribute based on comparative numerical value or based on the length of a string or anything.

theoretically what's being requested would technically be possible with CSS, but you'd need to select .tag-list-count[data-count="1"], .tag-list-count[data-count="2"], .tag-list-count[data-count="3"], ....tag-list-count[data-count="999998"], .tag-list-count[data-count="999999"] individually, which I'm going to guess would cause problems.

dba_afish said:
this is kind of a styling thing, the problem here is that there's no way to select an attribute based on comparative numerical value or based on the length of a string or anything.

theoretically what's being requested would technically be possible with CSS, but you'd need to select .tag-list-count[data-count="1"], .tag-list-count[data-count="2"], .tag-list-count[data-count="3"], ....tag-list-count[data-count="999998"], .tag-list-count[data-count="999999"] individually, which I'm going to guess would cause problems.

I don't understand why this is a styling problem when what is being requested would be so much easier in JS. To me, it sounds like OP is trying to go about this about the hardest/most tedious way possible.

I'm not familiar with the inner workings of the site and the most I've played around with is the API for personal projects, but if this is a forked project of some sort, I'd say you could easily intercept the tag data for a post, run the raw counts though the function I gave and then use that to display them how they're already being displayed. Just run the numbers through that function first and make sure you're not going to end up with a type error, and then call it a day. CSS shouldn't be needed unless you want to just outright get rid of them, in which case you could just make a declaration such as:

.tag-list-count {
    display: none;
}

...and then call it a day.

quietwind01 said:
I don't understand why this is a styling problem when what is being requested would be so much easier in JS. To me, it sounds like OP is trying to go about this about the hardest/most tedious way possible.

The thing is, you can easily add custom CSS (it's an option in your user settings). Custom Javascript is harder, since you need an extension at that point. So, when something is doable through CSS it's far easier from a user perspective.

ares_the_great said:
I don't understand why this is a styling problem when what is being requested would be so much easier in JS. To me, it sounds like OP is trying to go about this about the hardest/most tedious way possible.

I'm not familiar with the inner workings of the site and the most I've played around with is the API for personal projects, but if this is a forked project of some sort, I'd say you could easily intercept the tag data for a post, run the raw counts though the function I gave and then use that to display them how they're already being displayed. Just run the numbers through that function first and make sure you're not going to end up with a type error, and then call it a day. CSS shouldn't be needed unless you want to just outright get rid of them, in which case you could just make a declaration such as:

.tag-list-count {
    display: none;
}

...and then call it a day.

well, first of all, using modified JS requires you to have a userscript extension, whereas changing the CSS on this site just requires you to have a user account. so, if it was possible to do it with CSS, it'd generally be way easier to do it with CSS. CSS is also just, like, baby easy in general, it's extremely basic and simple and easy to understand, while JavaScript is kinda, y'know, actual programming.

if all you're trying to do is display something simple or change the way something is displayed (which is exactly what this user is looking to do) CSS would be the way to go... if there was actually a way to select the element in the way needed, which there isn't.

at a glance, without knowing the exact limitations of CSS, this absolutely seems like something you'd be able to do pretty trivially with CSS.