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

[marahmarie]

In a stylesheet, is it possible to define some custom icons for user links and have others be the system default?

Yes. All your user links should show icons, based on what I can see in your stylesheet; to use system default icons on some links instead, you would remove the URLs in your stylesheet from the links in question.

So...

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;
}

...is your Dreamwidth user icon, which should be displaying an image replacement from http://andbirds.org.

If you don't want their icon to show up, you would take out background: url('http://andbirds.org/paste/fugue/leaf.png') no-repeat; and the icon should revert back to Dreamwidth's (you'd also take out the line saying height: 0; width: 0 so DW's icon can display normally again; you might not need the line with the padding, either.

(Hopefully that's what you're after; sorry if I've misunderstood!)

ETA2: ETA1 you can disregard; it was me forgetting that setting height and width to 0, then adding something like 16px x 18px padding is an old LiveJournal hack to add replacement images. What it does is 1) hide LJ's images and 2) inserts your own images in the extra space created by the padding, so your image gets displayed instead of LJ's. Works on DW, too! So if the replacement images are not showing up then I'm really not sure why.

[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. :) )

[tropicsbear]

If you haven't coded anything for them, the default icons for external accounts (like Twitter or Tumblr) should show up. Which site icons aren't displaying?

(BTW, what fonts are you using on your journal? *___* They look pretty neat and I'm on the lookout for font alternatives for my layout.)

[tree]

None of them show up. Only the icons that I've defined show up. Everything else is an empty space. I posted a screenshot above as an example.

(I love my fonts so much! They're all from Google Fonts. PT Sans Narrow is in the navigation strip; Playfair Display is in the header and modules; and Tinos is the main body font.)

[tropicsbear]

This is weird. I'm looking at your CSS and the one I'm using right now and the differences I'm seeing are pretty minor. This is what I'm using:

img[src*="user.png"] {
vertical-align: middle !important;
margin: 0 auto;
width: 0 !important;
height: 0 !important;
background: transparent url(http://i.imgur.com/V5uK6Tb.gif) no-repeat;
padding: 0 3px 16px 16px !important;
}

I'm no expert with layout stuff either but maybe try tweaking my code to fit in your details and see if that fixes it?