unique.wonders. ([info]uniquewonders) wrote in [info]component_help,
@ 2008-03-16 16:08:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:!tutorial, *account level: plus/paid/perm, user: uw

TUTORIAL: [CSS] Custom User Info Icons

Preview
» link


Difficulty Level1.5 star


Instructions
» All users: copy and paste the code given in the yellow box below into Customize Journal Theme → Custom CSS → the big box at the bottom.
» Paid users: you can also use this in set custom_css or function Page::print_custom_head.
» Read the code for further instructions on how to change settings and data. Instructions are in green. Settings and data you can change are in red.
» Enjoy! :)


Known Issue
» The code does not work in older versions of Internet Explorer (such as IE6) and may not work in some other old browsers.



/* CUSTOM USER INFO ICONS */
/* component_help/1199663.html */

/* Edit the URLs in background image */
/* Edit padding to match the size of your image */
/* First number is height, second number is width */

/* Icon for users */
img[src*="userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for communities */
img[src*="community.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for sponsored communities */
img[src*="sponcomm.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for partnered communities */
img[src*="partnercomm.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for syndicated feeds */
img[src*="syndicated.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for Open ID users */
img[src*="openid-profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for the news community */
img[src*="newsinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}


To customize the user icon displayed in the username text field of the comment reply box, add this:


input[style*="url(http://l-stat.livejournal.com/img/userinfo.gif)"] {
background-image: url(http://yoururl) !important;
}

(Post a new comment)


[info]autumn_mist
2008-08-03 12:30 am UTC (link)
Is there any way to change the tiny pictures for the edit, add to memories, etc?

(Reply to this)


[info]london_fan
2008-10-02 12:39 am UTC (link)
Hi, me again...

I just discovered an individual user pic for "Anonymous" on the reply form at someone else's journal (with component layout). Do you know how to change that one, too? Just wondering, because that has bugged me for a while and I simply assumed that it wasn't possible to change.

Thanks for any help in advance!

(Reply to this) (Thread)

[info]uniquewonders
2008-10-02 06:57 pm UTC (link)
Try this, please:

img[src*="anonymous.gif] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-10-02 07:06 pm UTC (link)
That was my idea, too, but it doesn't work (at least not with Firefox3)

(Reply to this) (Parent)

[info]london_fan
2008-10-02 07:32 pm UTC (link)
Wait! I figured it out. There was an " missing.

it's img[src*="anonymous.gif"]
...

But thanks for the input, it really helped!

(Reply to this) (Parent)

[info]london_fan
2008-12-06 03:01 am UTC (link)
Sorry, to bother you again.

Is there a way to change the image of the user icons on hover?! I've seen a tutorial for using the CSS box and custom stylesheet here, but it doesn't work with theme layers (or I'm just too stupid to make it work). Is there any possibility to do something like that with a theme layer?

Thanks for any help in advance.

(Reply to this) (Thread)

[info]uniquewonders
2008-12-06 06:49 pm UTC (link)
Thanks for the link. It's a bit different here but you can do it like this:

/* Icon for users on hover */
img[src*="userinfo.gif"]:hover {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

It works for me in FF and IE7.

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-06 07:35 pm UTC (link)
THANK YOU SO MUCH! You really are the most amazing person when it comes to layouts and coding. This has given me some headaches for hours without any results. ;)
Your code works like a charm in FF!

Unfortuntely I still can't see any individual user pics in IE7 using this tutorial. If I look at my journal, I still see the LJ default user icons in IE7. Can you see my user icons in FF7 here? I'm just curious...

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-12-07 12:08 am UTC (link)
No I can't.
What about you? Can you see the correct icons here: http://uniquewonders.livejournal.com/290817.html?s2id=11504022? I've replaced the normal user icon with the feed icon. On hover it's the community icon.

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-07 12:30 am UTC (link)
Yes, I can see them there! What's the difference?

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-12-07 01:08 am UTC (link)
LOL @ the icon. I don't know. Here's what I got in my theme layer: http://www.livejournal.com/customize/advanced/layersource.bml?id=7863639

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-07 02:08 am UTC (link)
;)

Okay, this is mind-boggling. I had my code under function Page::print_custom_head() and after seeing your theme layer I thought that might be the fault, so I put it above all functions with the custom css =... code, but it's still not working in IE7, so I put it back. I'm out of ideas...
Maybe you can see where I did go wrong?
http://www.livejournal.com/customize/advanced/layersource.bml?id=11066589

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-12-07 02:12 am UTC (link)
I'm seeing your custom icons fine when just using your theme layer so I guess this has to do with a user layer. Are you using one? Or have you made any customizations in the Customize interface?

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-07 02:33 am UTC (link)
Honestly, I don't even know how to use an additional user layer. could I have done so by accident? Where would I have to look to find out?

If by customize interface you mean the custom css box, no. I don't have any code up there. And I've set Use layout's stylesheet(s) to NO.

Okay, I just re-applied the whole layout. Choose a standard component layout and applied my theme layer again to make sure I hadn't accidentally customized anything and it's still not working. :/

Sorry for the edits! /(
Okay, I just checked all my layers and there were some auto-generated user layers which I deleted. So now there's only my theme layer left.

Edited at 2008-12-07 05:28 am UTC

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-12-07 02:37 pm UTC (link)
My bad. It didn't work with your layer (I was probably seeing some cached version). It doesn't work in IE because you're using an outdated version of Custom Layout with no DOCTYPE declaration.

In function print_layout, replace <html> with
<!DOCTYPE html
       PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">

Or update to our newer tutorial.

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-07 03:12 pm UTC (link)
Thank you very much for the quick and easy solution. I guess, I'll tackle the complete update once I'll have more time for it.

In the meantime I'd like to go with the easy code you provided, I don't have function print_layout, but I guess it's function page_layout(Page p), since replacing there solved the problem with the user icons, too.

Unfortunately it resulted in another change, too: Now almost every piece of text is centered, the entries, the nav bar, the component text (except for the ones, explicitly stated otherwise), is there some easy fix for that, too?

Thanks for all your help, I really appreciate it and I can't say it often enough!

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-12-07 03:18 pm UTC (link)
You're right. It's page_layout! *facepalm*

So, still in page_layout, replace
"""<body style="text-align:center;">""";
with 
"""<body>""";

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-07 03:34 pm UTC (link)
*sings "You're simply the best, better than all the rest!" and dances around like a lunatic*

Seriously, this has been bugging me for ages and now I'm really happy! :)

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-12-07 08:19 pm UTC (link)
I'm glad I could help!

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-07 08:59 pm UTC (link)
I almost don't dare to ask, but I just noticed that these changes somehow partially "killed" the html in my free text components for Firefox! I had some parts in the profile and in the random content component with the font-color html tag. They seem to work just fine in IE, but the complete text is black in FF now.

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2008-12-07 09:35 pm UTC (link)
Your color attributes are missing a # sign in front of the hexadecimal code.

For example, it should be:

<font color="#ae0800">

(Reply to this) (Parent)(Thread)

[info]london_fan
2008-12-07 10:53 pm UTC (link)
Okay, this time you may officially shoot me for stupidity. I honestly never noticed, because it worked before. But I should have known. *shakes head at herself*

(Reply to this) (Parent)

[info]milalovexo
2009-02-22 01:05 am UTC (link)
thank you so much for this ^^ really help lots

(Reply to this) (Thread)

[info]uniquewonders
2009-02-22 01:16 am UTC (link)
You're most welcome!

(Reply to this) (Parent)(Thread)

[info]milalovexo
2009-02-22 01:24 am UTC (link)
mmh sorry to bother but i just did it, can you see if you can see the different userinfo pic on my journal? :>

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2009-02-22 01:39 am UTC (link)
Sure! I see them on this entry: http://milalovexo.livejournal.com/3550.html

(Reply to this) (Parent)(Thread)

[info]milalovexo
2009-02-22 02:06 am UTC (link)
oh ok thank you <33

(Reply to this) (Parent)

[info]tehuberfangirl
2009-03-28 08:29 am UTC (link)
For some reason I keep getting this each time I try to add code

S2 Compiler Output at Sat Mar 28 08:26:50 2009
Error compiling layer:

Compile error: line 1420, column 1: Unknown token encountered while parsing layer: [TokenPunct] = /
S2::Layer, S2/Layer.pm, 67
S2::Compiler, S2/Compiler.pm, 27


Context

1416: """;
1417:
1418: }
1419:
1420: /* CUSTOM USER INFO ICONS */
1421: /* component_help/1199663.html */
1422:
1423: /* Edit the URLs in background image */
1424: /* Edit padding to match the size of your image */

(Reply to this) (Thread)

[info]uniquewonders
2009-03-28 08:32 am UTC (link)
As mentioned in the instructions, this code is meant to be inserted into set custom_css or function Page::print_custom_head. Is this what you're doing?

(Reply to this) (Parent)(Thread)

[info]tehuberfangirl
2009-03-28 08:36 am UTC (link)
I'm adding it in the ::print_custom_head yes.

(Reply to this) (Parent)(Thread)

[info]uniquewonders
2009-03-28 08:42 am UTC (link)
Would you post the code you have for print_custom_head and indicate where, in this function, you're trying to insert the tutorial?

(Reply to this) (Parent)

Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…