Specifically for Andrew (other users welcome though),
Can you find a CSS fix for this
The image is pre existing on the wiki as a 60px icon.
Specifically for Andrew (other users welcome though),
Can you find a CSS fix for this
The image is pre existing on the wiki as a 60px icon.
I mentioned this to you in Discord the other day, I'm on it though.
Actually, that is my fault when I did the username highlight. I fixed it though.
https://viacomcbs.fandom.com/wiki/Special:WikiActivity
Can you match the message wall highlight with how it looks here on the recent activity page?
It took some time to figure out what was going on and write a reply. Apparently you got help in that time. That is great! There are still some things I would like to bring up though. Since I don't feel like re-writing my reply, I am just going to post it as it was. So if parts are addressing something that has already been fixed, that is why.
Well, first thing is first. I just learned something new. I thought the contents of the before and after pseudo-elements had to be text but apparently even IE11 can handle image URLs.
To address the issue as posed, the problem is that your CSS for the subtle link is missing the url function. What you have right now is:
content: "vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest?cb=20200222232032";
This is interpreted as a string and thus the literal URL is shown. What you want is what you used for the other links:
content: url("vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest?cb=20200222232032");
That being said, you might notice that the image is way larger than the text and is throwing off the alignment on things like Special:RecentChanges. You can fix this by using Vignette's scaling capability. For instance, this will display a version of the image that has been scaled down to a height of 14px.
content: url("vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest/scale-to-height-down/14?cb=20200222232032");
I would also suggest getting rid of the query string (the "?cb=20200222232032"). It doesn't actually hurt anything but it just isn't necessary.
Note that with this solution, the size of the image will be fixed and will not adjust with the font size. If you want something that will adjust with the font size, then you need to include the image a different way; the way I usually do things like this.
content: ""; display: inline-block; height: 1em; width: calc((<width> / <height>) * 1em) background-image: url("vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest"); background-size: contain; background-position: center center; background-repeat: no-repeat;
Replace <width>
and <height>
with the width and height of the image you are using. Right now, the width is 55 and the height is 54. That is essentially a square so you could also simplify the width assignment to just be "1em".
I think the code is being overwritten by the "Viacom" text tag, if you could remove that, it might resolve anything.
UpnCbs06 wrote: I think the code is being overwritten by the "Viacom" text tag, if you could remove that, it might resolve anything.
Also it’s for the message wall, where the code shoul be placed