?

Log in

No account? Create an account
S2 Layers [entries|archive|friends|userinfo]
S2 Layers

[ website | advanced customization ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Links
[Links:| how to post tags page ]
[affiliated communities| fblayers ]

[theme] - [change info icons via css] [May. 2nd, 2006|02:54 pm]
S2 Layers

s2layers

[kunzite1]
[Tags|, ]

in response to troublesrollby's s2flexisquares post.

this works in browsers that support attribute selectors.
browsers that don't support attribute selectors will use the new image that you set for personal journals.

function Page::print_custom_head() {

# create an order of account types
var string[] types_order = ["personal", "community", "syndicated", "news", "identity", "sponcomm"];

# original URLs used by livejournal
var string{} old_urls = {
                         "personal"      => "http://p-stat.livejournal.com/img/userinfo.gif",
                         "community"     => "http://p-stat.livejournal.com/img/community.gif",
                         "syndicated"    => "http://stat.livejournal.com/img/syndicated.gif",
                         "news"          => "http://p-stat.livejournal.com/img/newsinfo.gif",
                         "identity"      => "http://p-stat.livejournal.com/img/openid-profile.gif",
                         "sponcomm"      => "http://p-stat.livejournal.com/img/sponcomm.gif",
                        };

# original widths used by livejournal
var string{} old_widths = {
                           "personal"    => "17",
                           "community"   => "16",
                           "syndicated"  => "16",
                           "news"        => "16",
                           "identity"    => "16",
                           "sponcomm"    => "16",
                          };

# original heights used by livejournal
var string{} old_heights = {
                            "personal"   => "17",
                            "community"  => "16",
                            "syndicated" => "16",
                            "news"       => "16",
                            "identity"   => "16",
                            "sponcomm"   => "16",
                           };

# new URLs to your images
# if you don't have an image for a specific type, leave it blank to use the original
var string{} new_urls = {
                         "personal"      => "http://pics.livejournal.com/kunzite1/pic/000x8y5d.gif",
                         "community"     => "http://pics.livejournal.com/kunzite1/pic/000x7th0.gif",
                         "syndicated"    => "http://pics.livejournal.com/kunzite1/pic/000x6cww.gif",
                         "news"          => "http://pics.livejournal.com/kunzite1/pic/000x5pdc.gif",
                         "identity"      => "http://pics.livejournal.com/kunzite1/pic/0026r895.gif",
                         "sponcomm"      => "http://pics.livejournal.com/kunzite1/pic/002asx0e.gif",
                        };

# new widths for your images
# if you don't have an image for a specific type, leave it blank to use the original
var string{} new_widths = {
                           "personal"    => "17",
                           "community"   => "16",
                           "syndicated"  => "15",
                           "news"        => "17",
                           "identity"    => "16",
                           "sponcomm"    => "16",
                          };

# new heights for your images
# if you don't have an image for a specific type, leave it blank to use the original
var string{} new_heights = {
                            "personal"   => "17",
                            "community"  => "16",
                            "syndicated" => "18",
                            "news"       => "16",
                            "identity"   => "16",
                            "sponcomm"   => "16",
                           };

var string ie_url    = $new_urls{"personal"};
var string ie_width  = $new_widths{"personal"};
var string ie_height = $new_heights{"personal"};
"""
<style type="text/css">
.ljuser img { 
  width:             0;
  height:            0;
  background-repeat: no-repeat;

  /* so that IE users will still see an image */
  background-image: url($ie_url); 
  padding:          ${ie_height}px ${ie_width}px 0 0;
}
""";

foreach var string type ($types_order) {
  var string old_url    = $old_urls{$type};
  var string new_url    = $new_urls{$type}    != "" ? $new_urls{$type}    : $old_url;
  var string new_width  = $new_widths{$type}  != "" ? $new_widths{$type}  : $old_widths{$type};
  var string new_height = $new_heights{$type} != "" ? $new_heights{$type} : $old_heights{$type};
  """
.ljuser img[src="$old_url"] {
  background-image: url($new_url);
  padding:          ${new_height}px ${new_width}px 0 0;
}
  """;
}
"""
</style>
""";

}
linkReply

Comments:
Page 1 of 2
<<[1] [2] >>
[User Picture]From: bellemelange
2006-06-17 01:32 pm (UTC)
Great tutorial! But in my summary component on my recent page the old icons shows up (on friends view it works perfectly).

Any idea what the problem might be?
(Reply) (Thread)
[User Picture]From: kunzite1
2006-06-17 05:06 pm (UTC)

i can't see any entries on your recent view to be able to test it.
(Reply) (Parent) (Thread) (Expand)
From: ex_uniquewo
2006-07-05 02:12 pm (UTC)
The code for IE doesn't seem to work. If you replace the variables with numbers and a URL, it's okay.
(Reply) (Thread)
From: ex_uniquewo
2006-07-05 06:00 pm (UTC)
Okay now it works. Someone kills me now. This tutorial is driving me mad.
(Reply) (Parent) (Thread) (Expand)
[User Picture]From: sundayave
2006-07-26 11:45 pm (UTC)
So, hmm, if I understood correctly, you create a new layer, then paste the following codes in there (with the necessary corrections, ie. the images urls) and then choose to use that in the 'Customise' page, right? Or not?

Or can I add the print_custom_head code into the already 'auto-generated customised' (link) layer I'm using?
(Reply) (Thread)
[User Picture]From: kunzite1
2006-08-02 07:08 pm (UTC)

this code should go into a theme layer.

code that looks like this should never go into the "auto-generated" thingy.

only set commands should go into the "auto-generated" thingy.
(Reply) (Parent) (Thread)
[User Picture]From: lucius_admirer
2006-08-07 03:42 pm (UTC)
works fine. thank you :)
(Reply) (Thread)
[User Picture]From: kunzite1
2006-08-07 05:23 pm (UTC)
good to know that it works for you. we've had mixed reports about it.
(Reply) (Parent) (Thread)
[User Picture]From: thespyglass
2006-08-13 04:00 pm (UTC)
This is brilliant, thanks! It's working great for me :)
(Reply) (Thread)
[User Picture]From: sbertie
2006-08-24 06:30 am (UTC)
Thank you! I used this for my component layout -- it took a little fiddling around with but now it looks great. :)
(Reply) (Thread)
[User Picture]From: kunzite1
2006-08-24 08:14 am (UTC)
what kinda fiddling?
(Reply) (Parent) (Thread) (Expand)
[User Picture]From: dreamon_dreamer
2006-08-25 11:53 pm (UTC)
sometimes i tag other lj users in my entry titles. but in my page summary in the sidebox, the default lj user icon shows up.

is there a way to get these overrides to work in the sidebox too?
(Reply) (Thread)
[User Picture]From: gossymer
2006-10-14 10:24 pm (UTC)
worked great- thank you so much!
(Reply) (Thread)
(Deleted comment)
[User Picture]From: kunzite1
2007-01-27 02:44 pm (UTC)
try the new version of the entry. thanks for reminding me about those!
(Reply) (Parent) (Thread)
From: ex_uniquewo
2007-02-03 11:17 pm (UTC)
Just a note: it seems to work fine in IE7 though using it with other tutorials (Shrinking and Centering for example) may make the icons disappear completely.
(Reply) (Thread)
[User Picture]From: sam42
2007-12-04 12:43 am (UTC)
My layer is a mess of different tutorials all mushed together, including the S&C tut, so I don't know how many tutorials are making it not work in IE7. I don't use IE7, so I don't care for the most part, but it's curious that it doesn't work.

My mess of a layer is here.
(Reply) (Parent) (Thread) (Expand)
From: dolcebello
2007-02-12 04:19 am (UTC)
This didn't work for me, using IE7. Bummer to, cause I wanna change them! LOL. Is there anything else I can do to change them?
(Reply) (Thread)
[User Picture]From: kunzite1
2007-02-13 07:29 am (UTC)
works for me. tested with version 7.0.5730.11.
(Reply) (Parent) (Thread)
From: metaraymek
2007-02-19 11:41 pm (UTC)
Wow! This layout works like a dream. =D

Thank you so much!
(Reply) (Thread)
[User Picture]From: potthead
2007-02-20 03:11 am (UTC)
Do you know of a version of this that will work on S1 layouts?
(Reply) (Thread)
[User Picture]From: maraisms
2007-04-03 04:51 pm (UTC)
Mine says

Can't mask local variable 'new_urls'

How come?
(Reply) (Thread)
[User Picture]From: thevelvetsun
2007-04-13 12:39 am (UTC)
This works great, thanks! Do you happen to know how to change other images, such as the lock for friends-locked entries?
(Reply) (Thread)
[User Picture]From: kunzite1
2007-04-13 10:10 am (UTC)
the following only works in browsers that support attribute selectors. i added it to just before the code that outputs the </style> tag.
var string type = "";
$types_order = [];

$type                            = "protected";
$types_order[size($types_order)] = $type;
$old_urls{$type}                 = "$*IMGDIR/icon_protected.gif";
$new_urls{$type}                 = "http://mike.mm1swebcreations.com/lj/silk/lock.png";
$new_widths{$type}               = "16";
$new_heights{$type}              = "16";

$type                            = "private";
$types_order[size($types_order)] = $type;
$old_urls{$type}                 = "$*IMGDIR/icon_private.gif";
$new_urls{$type}                 = "http://mike.mm1swebcreations.com/lj/silk/eye.png";
$new_widths{$type}               = "16";
$new_heights{$type}              = "16";

foreach $type ($types_order) {
  var string old_url    = $old_urls{$type};
  var string new_url    = $new_urls{$type}    != "" ? $new_urls{$type}    : $old_url;
  var string new_width  = $new_widths{$type}  != "" ? $new_widths{$type}  : $old_widths{$type};
  var string new_height = $new_heights{$type} != "" ? $new_heights{$type} : $old_heights{$type};
  """
img[src="$old_url"] {
  width:             0;
  height:            0;
  background-repeat: no-repeat;
  background-image:  url($new_url);
  padding:           ${new_height}px ${new_width}px 0 0;
}
  """;
}
(Reply) (Parent) (Thread)
Page 1 of 2
<<[1] [2] >>