Defining custom user link icons

[tree]

This is one of those questions I feel I should be able to answer myself, but I've searched in various places and come up empty.

In a stylesheet, is it possible to define some custom icons for user links and have others be the system default? At present I'm using custom icons for Dreamwidth users and communities, but external service users' links have no icons; there's just a blank space where the stylesheet specifies the image height and width, etc. So either there's something I need to change in my existing CSS or I need to add the location of all the other icons. But I don't know what they are since s.dreamwidth.org/img/ doesn't allow directory listing (which makes sense), and I can't find a list of all the image file names.

I should add that I'm using a stylesheet made by sarken that I've modified mostly through trial and (much) error because no matter how hard I try my brain just refuses to grasp this stuff.



This is what's currently in my stylesheet:

.ljuser img { width: 0; height: 0; background-image: none; padding: 0 0 16px 18px; } img[src*='user.png'] { width: 0; height: 0; padding: 0 0 16px 18px; background: url('http://andbirds.org/paste/fugue/leaf.png') no-repeat; vertical-align: middle !important; } img[src*='community.png'] { background: url('http://andbirds.org/paste/fugue/leaf-plant.png') no-repeat bottom left; padding: 0 0 16px 18px; width: 0; height: 0; } img[src*='openid.png'] { background: url('http://andbirds.org/paste/fugue/openid.png') no-repeat bottom left; padding: 0 0 16px 18px; width: 0; height: 0; } img[src*='feed.png'] { background: url('http://andbirds.org/paste/fugue/feed.png') no-repeat bottom left; padding: 0 0 16px 18px; width: 0; height: 0; }

I assumed that, as with other things, if I didn't define something specifically, I'd just get the system default, but I am so wrong. :(


Please help my scrambled brain?

Comments

[tree]

I appreciate the responses, but they don't answer my question.

As I said, I'm using custom icons for Dreamwidth users and Dreamwidth communities (as well as open id and feed accounts). The icons I have defined in my stylesheet are the way I want them and they work fine.

Those are the only icons I've defined. I thought that by not defining anything else in my stylesheet, the layer style would insert the default system icons.

That's not happening. All I see for any account type other than the ones I've defined is a blank space where the icon should be.

Here's an example:



According to the link, this is an AO3 account. But where the AO3 icon should be is just a blank space.

[marahmarie]

OK, I'm assuming you've formatted the Ao3 username correctly (you can check to make sure at https://www.dreamwidth.org/support/faqbrowse?faqid=87 - I can't see it live on your DW, so I can't check myself).

Assuming all is well in username-format land, what's making certain usericons go missing is the following:

.ljuser img {
width: 0;
height: 0;
background-image: none;
padding: 0 0 16px 18px;
}

To verify (since you have no live example I can see) I opened your DW in a live page editor and added the Ao3 username in question to your most recent public entry. It showed no usericon, so I deleted the code above. The Ao3 icon then showed right up.

tl;dr: Try removing the CSS above and see how it affects Ao3 and other icons. Removing it should make the Ao3 icon show right up and restore any others you're missing.

But if removing that CSS affects other icons in bad ways (I can't see them, so I can't say without doing more live page testing) then I found a direct link to DW's Ao3 usericon (http://s.dreamwidth.org/img/profile_icons/ao3.png) so I can probably write something to put in your CSS.

(The problem with adding icons via CSS rather than just editing your CSS to make what you've got work, is, as you said, our lack of directory listings. To get around it I have a friend in fandom who uses a bunch of external services, so whenever I need a particular usericon I visit her profile, view the source, and just copy out the links I need. :) )