London and Sherlock (BBC) tinicons & a tutorial to set up custom userheads
Hello there, fellow London fans and Sherlockians!
Today I bring you teeny-tiny goodies for all your custom layout needs. The following 16x16 tinicons can be used to replace the boring LJ standard userheads in front of the usernames (
london_fan) and communities (
house_of_london). Of course they also make nifty icon replacements in your browser sidebar if your settings/add-ons allow these customizations, just saying... :)
Since LJ changed the source code a while ago there are still a lot of screwed-up custom layouts with the LJ standard userhead overlapping and shifting around the custom ones. Therefore I'll add a small tutorial with the latest code to implement custom userheads for anyone who might need it.
[01 - 08] London tinicons
[09 - 28] Sherlock tinicons → Spoilers for season one and two
(not that tiny 16x16 graphics can be that spoiling, but better to be safe than sorry)!
They're called tinicons for a reason... so instead of the usual preview with single example pictures I'll show a small compilation with different background colors:
LONDON
01 02 03 04
05 06 07 08
SHERLOCK
09 10 11 12
13 14 15 16
17 18 19 20
21 22 23 24
25 26 27 28
Annotations:
All of these tinicons have a transparent background and should work on most background colors! You might miss a couple of obvious Sherlock motifs here, because I focused on items that aren't already available elsewhere (as far as I know at least). So if you're looking for a skull or some lab equipment for example, I recommend checking out Fugue icons. If you notice a certain similarity in style to these icons it is actually intentional, because I wanted my Sherlock tinicons to fit in as best as possible with other Fugue icons in my layouts. Of course I still put a lot of hard work into each of my tinicons to make them as unique and accurate as possible, so I hope my style is different enough to hold its own.
→ Please credit either london_fan or house_of_london.
→ Don't hotlink!
→ Please don't alter these tinicons. If you want something different, let me know!
→ Don't post them elsewhere and/or claim them as your your own work.
→ If you like what you see, feel free to join and/or watch house_of_london.
→ Comments are love.
HOW TO SET UP CUSTOM USERHEADS?
If you're using Custom CSS, go there and insert the following code for custom userheads (after exchanging the link of course):
/* Icon for users */
.ljuser img[src*="userinfo_v8.svg"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url.png) !important;
padding: 16px 16px 0px 0px !important;
}
Please note that this code will only replace the standard LJ userheads (
) on your journal. If you want to replace other LJ userheads, there's different code for each of them:
So, if you want to replace all userheads with a custom one, your code should look like this:
/* Icon for all users */
.ljuser img[src*="userinfo_v8.svg"], .ljuser img[src*="user_ontd.gif"], .ljuser img[src*="userinfo-support.gif"], .ljuser img[src*="userhead"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url.png) !important;
padding: 16px 16px 0px 0px !important;
}
Of course you can also change the standard community icon (
) with the following code:
/* Icon for communities */
.ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url.png) !important;
padding: 16px 16px 0px 0px !important;
}
Important note: If you already have custom code for your userheads, make sure to replace it instead of just adding your new code!
Hit the [Save Changes] button on your way out and your new custom userheads should be set up on your journal! Depending on the image you might want to play around with the padding a little bit until everything looks perfect!
BONUS TUTORIAL: HOW TO SET UP USERHEADS
THAT CHANGE WHEN YOU HOVER WITH YOUR MOUSE?
Having userheads that change when your mouse hovers over them can be a lot of fun! You might have noticed that there are some tinicons with different versions of the same item and that's exactly why. For example you could use the two tinicons of Irene's phone and have it "switch on" to the famous "I AM _ _ _ _ LOCKED" screen whenever your mouse hovers over the phone, like this:
london_fan ➜
london_fan
Apply your custom code for the userhead(s) according to the tutorial above and then just add this code for the image you want to be displayed when your mouse hovers over the userhead (don't forget to change the url of course):
/* Icon for all users: hover */
.ljuser img[src*="userinfo_v8.svg"]:hover, .ljuser img[src*="user_ontd.gif"]:hover, .ljuser img[src*="userinfo-support.gif"]:hover, .ljuser img[src*="userhead"]:hover {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url-for-the-hover-image.png) !important;
padding: 16px 16px 0px 0px !important;
}
... and accordingly for communities:
/* Icon for communities:hover */
.ljuser img[src*="community.gif"]:hover {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url-for-the-hover-image.png) !important;
padding: 16px 16px 0px 0px !important;
}
Telling you to hit the [Save Changes] button on your way out is probably just as redundant as reminding you again to not add the same code twice if you already have something like this, right?! Obviously! ;)
HAVE FUN!
P.S.: If you have any trouble with setting up your custom userheads let me know and I'll try to help. :)
Latest update of the tutorial on 12th April 2017 to work around LJ's changes of the code for the standard userhead.
Today I bring you teeny-tiny goodies for all your custom layout needs. The following 16x16 tinicons can be used to replace the boring LJ standard userheads in front of the usernames (
london_fan) and communities (
house_of_london). Of course they also make nifty icon replacements in your browser sidebar if your settings/add-ons allow these customizations, just saying... :)
Since LJ changed the source code a while ago there are still a lot of screwed-up custom layouts with the LJ standard userhead overlapping and shifting around the custom ones. Therefore I'll add a small tutorial with the latest code to implement custom userheads for anyone who might need it.
[01 - 08] London tinicons
[09 - 28] Sherlock tinicons → Spoilers for season one and two
(not that tiny 16x16 graphics can be that spoiling, but better to be safe than sorry)!
They're called tinicons for a reason... so instead of the usual preview with single example pictures I'll show a small compilation with different background colors:
LONDON
01 02 03 04
05 06 07 08
SHERLOCK
09 10 11 12
13 14 15 16
17 18 19 20
21 22 23 24
25 26 27 28
Annotations:
All of these tinicons have a transparent background and should work on most background colors! You might miss a couple of obvious Sherlock motifs here, because I focused on items that aren't already available elsewhere (as far as I know at least). So if you're looking for a skull or some lab equipment for example, I recommend checking out Fugue icons. If you notice a certain similarity in style to these icons it is actually intentional, because I wanted my Sherlock tinicons to fit in as best as possible with other Fugue icons in my layouts. Of course I still put a lot of hard work into each of my tinicons to make them as unique and accurate as possible, so I hope my style is different enough to hold its own.
→ Please credit either london_fan or house_of_london.
→ Don't hotlink!
→ Please don't alter these tinicons. If you want something different, let me know!
→ Don't post them elsewhere and/or claim them as your your own work.
→ If you like what you see, feel free to join and/or watch house_of_london.
→ Comments are love.
HOW TO SET UP CUSTOM USERHEADS?
If you're using Custom CSS, go there and insert the following code for custom userheads (after exchanging the link of course):
/* Icon for users */
.ljuser img[src*="userinfo_v8.svg"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url.png) !important;
padding: 16px 16px 0px 0px !important;
}
Please note that this code will only replace the standard LJ userheads (
) on your journal. If you want to replace other LJ userheads, there's different code for each of them:
- .ljuser img[src*="userinfo_v8.svg"] = the standard LJ userhead
- .ljuser img[src*="user_ontd.gif"] = the purple ONTD userhead
- .ljuser img[src*="userinfo-support.gif"] = the green staff userhead
- .ljuser img[src*="userhead"] = all bought userheads, e.g. this one
So, if you want to replace all userheads with a custom one, your code should look like this:
/* Icon for all users */
.ljuser img[src*="userinfo_v8.svg"], .ljuser img[src*="user_ontd.gif"], .ljuser img[src*="userinfo-support.gif"], .ljuser img[src*="userhead"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url.png) !important;
padding: 16px 16px 0px 0px !important;
}
Of course you can also change the standard community icon (
) with the following code:
/* Icon for communities */
.ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url.png) !important;
padding: 16px 16px 0px 0px !important;
}
Important note: If you already have custom code for your userheads, make sure to replace it instead of just adding your new code!
Hit the [Save Changes] button on your way out and your new custom userheads should be set up on your journal! Depending on the image you might want to play around with the padding a little bit until everything looks perfect!
BONUS TUTORIAL: HOW TO SET UP USERHEADS
THAT CHANGE WHEN YOU HOVER WITH YOUR MOUSE?
Having userheads that change when your mouse hovers over them can be a lot of fun! You might have noticed that there are some tinicons with different versions of the same item and that's exactly why. For example you could use the two tinicons of Irene's phone and have it "switch on" to the famous "I AM _ _ _ _ LOCKED" screen whenever your mouse hovers over the phone, like this:
london_fan ➜
london_fan
Apply your custom code for the userhead(s) according to the tutorial above and then just add this code for the image you want to be displayed when your mouse hovers over the userhead (don't forget to change the url of course):
/* Icon for all users: hover */
.ljuser img[src*="userinfo_v8.svg"]:hover, .ljuser img[src*="user_ontd.gif"]:hover, .ljuser img[src*="userinfo-support.gif"]:hover, .ljuser img[src*="userhead"]:hover {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url-for-the-hover-image.png) !important;
padding: 16px 16px 0px 0px !important;
}
... and accordingly for communities:
/* Icon for communities:hover */
.ljuser img[src*="community.gif"]:hover {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-image: url(http://your-custom-url-for-the-hover-image.png) !important;
padding: 16px 16px 0px 0px !important;
}
Telling you to hit the [Save Changes] button on your way out is probably just as redundant as reminding you again to not add the same code twice if you already have something like this, right?! Obviously! ;)
HAVE FUN!
P.S.: If you have any trouble with setting up your custom userheads let me know and I'll try to help. :)
Latest update of the tutorial on 12th April 2017 to work around LJ's changes of the code for the standard userhead.