Log in

No account? Create an account

Previous Entry | Next Entry

How to add "reputation" under userpics?

  • Oct. 24th, 2007 at 1:04 PM
So I chat a lot on vBulletin type of forums, and what i really like there is "reputation" which users can give to each other. At the bottom one can see how this reputation accumulates, and can also determine who is "popular".

I don't want to make this "reputation" available for all users in my community to give. But as a moderator, I wish I could give "points" to the users, which would accumulate and display somehow under their userpic.

My community is a paid account. I don't know much about programming, I do know HTML though, but I don't believe HTML would be able to do it. I would need "S2" or "java" or "php"... anybody? Help? PLEASE?

I have "Expressive Seasonal": buonappetito


( 15 comments — Leave a comment )
Oct. 24th, 2007 06:11 pm (UTC)
in forums, that sort of thing is stored in a database per user. we don't have that sort of thing on lj, afaik, so i doubt we can do something like that. @_@
Oct. 24th, 2007 06:23 pm (UTC)
ok, fair enough.
what about some additional line under the userpic, which i could edit myself? would it be possible to add an additional information, or replace the lj user tag with a custom-made something (maybe an lj user icon, repeat it several times...)
Oct. 24th, 2007 07:16 pm (UTC)
They do something a little like this in component_help, although I'm not sure how. You'd have to re-compile the layout code each time you want to change a user's "rating". Obviously, the community account would have to be Paid or Permanent.
You can change the ljuser images through CSS, but it would be an equal pain to do that for individual users.
Oct. 24th, 2007 07:33 pm (UTC)
my account is paid.
will check out what they are saying in that community. thank you
Oct. 24th, 2007 09:00 pm (UTC)
i know how to change lj user little icon. /learnt in this community, by the way/. would there be a way to set up lj user icons specific per user? because the code they suggested was either for "user", or "community", or else. but would it be possible to change a lj user icon for different users?

right now i have a little "strawberry"
i could set up a layer, probably, where users are combined in groups, and if you are in that group, your icon is different... would be nice. so i don't have to re-write anything every time. i would have to add user names to different groups every time.

only i have no idea how to do that. any ideas?

i will... do anything for your help :))
Oct. 25th, 2007 02:31 am (UTC)
I don't know where you got that code to change the lj icon, but it doesn't work in Firefox or Internet Explorer 7. Although, I think I can work up something to selectively replace ljuser icons with a theme layer.
Oct. 25th, 2007 04:24 am (UTC)
OK, here's some code for your community's theme layer. What this will do is replace the icons for your maintainers with the strawberry, but (I think) it'll only work in IE 7, Firefox, Safari, and other browsers that support attribute selectors. Every other icon will be the default LJ ones. If you leave in the CSS you have from before, people viewing the community in IE 6 and other old browsers will still the strawberry next to all the user names. The CSS is based on ephi's tutorial. You can customize it by changing the user names in the quotes, or using a different icon.
function Page::print_custom_head() {
  var string[] maintainers = ["duseg", "elladkin", "lentyajka_01"];
  var string new_usericon = "http://img522.imageshack.us/img522/73/buonappetitoberrytx2.gif";
  var string old_usericon = "http://stat.livejournal.com/img/userinfo.gif";
  """<style type="text/css">""";

  foreach var string user ($maintainers) {
    var string maintainer_url = "http://${user}.livejournal.com/profile";
.ljuser a[href="$maintainer_url"] img[src="$old_usericon"] {
    width: 0;
    height: 0;
    background-repeat: no-repeat;
    background-image: url($new_usericon);
    padding: 16px 0 0 17px !important;
Let me know if you need more help.
Oct. 25th, 2007 12:30 pm (UTC)
wow! thank you! let me try this...
i appreciate your attention! :)
Oct. 25th, 2007 12:46 pm (UTC)
now please bear with me. could a similar layer be set up for another group of users, who would have not strawberry, not baldyman, rather something different? and then another layer? i see around 4-5 groups i would like to set up. and could i move those users from one layer to another any time?
Oct. 25th, 2007 05:56 pm (UTC)
OK, this is going to look really complicated, but it's not. ;) Replace the previous code I gave you with this one.
Basically, the users and their corresponding group is stored in the $users_groups{} associative array. The user name goes in the first column, the group to which they belong goes in the second (The => "points to" the user's group). In the array $new_usericons{}, put the group name first, then the URL to the icon you want to use for that group. I've done "maintainers" as an example. You can add as many groups as you want to each array; however, a user can't be in more than one group at once. Similarly, you can't have more than one icon per group.
function Page::print_custom_head() {
  # User name first, then the corresponding group name
  var string{} users_groups = { "duseg" => "maintainers",
                                "elladkin" => "maintainers",
                                "lentyajka_01" => "maintainers",
                                "user1" => "group1",
                                "user2" => "group1",
                                "user3" => "group2",
                                "user4" => "group2" };

  # The ljuser icon for each group
  var string{} new_usericons = { "maintainers" => "http://img522.imageshack.us/img522/73/buonappetitoberrytx2.gif",
                                 "group1" => "URL to icon for this group",
                                 "group2" => "URL to icon for this group" };
  var string old_usericon = "http://stat.livejournal.com/img/userinfo.gif";
  """<style type="text/css">""";

  foreach var string user ($users_groups) {
    var string user_url = "http://${user}.livejournal.com/profile";
    var string new_usericon = $new_usericons{$users_groups{$user}} != "" ? $new_usericons{$users_groups{$user}} : $old_usericon;
.ljuser a[href="$user_url"] img[src="$old_usericon"] {
    width: 0;
    height: 0;
    background-repeat: no-repeat;
    background-image: url($new_usericon);
    padding: 16px 0 0 17px !important;
The code compiled OK for me, but I couldn't test the results because I'm limited to IE 6 at the moment. Let me know if you have other questions.
Oct. 25th, 2007 06:24 pm (UTC)
wow. i love ya :)
thank you!

/you are going to laugh at me now, but asking this made me actually go into tutorial and learn more about s2, and the layers. as i tried adding your code into a new layer, and it didn't work. i will get it soon, and will let you know how it worked, with the screenshot/
Oct. 26th, 2007 02:46 am (UTC)
i don't know what i am doing wrong. maybe i didn't comprehand the basics. if i have a "custom css", none of my changes in the layers are visible.

if i delete custom user layer, and work in customizing a theme layer, still nothing is visible and... what am i doing wrong? not only this code doesn't work, none of my other changes show up

i have read this and this...

and now something crazy happened to the customization area and i can't return what i had before. what the heck happened????? they totally changed it, and i am ready to scream

somebody shoot me please!

Oct. 26th, 2007 01:22 pm (UTC)
Yes, LiveJournal just yesterday ended the beta test phase of the new customization section and made it active for everyone. And there was much grumbling (not just you, lots of people). =(

There's a tutorial here about making a theme layer for Expressive. The only thing that's different now is how you access the Advanced area:
  1. Go to customize page, then click on "Developer Area" on the left. This section's design hasn't changed at all.
  2. Click "Your Layers"
  3. Select the community in the "Work as user:" pull-down box and hit Switch.
  4. You can either create a new theme layer or use an existing one, if you still have one. Add in the code I gave you to the theme layer and compile. Just make sure you include these lines at the top of the layer along with the layerinfo lines:
    set base_theme = "holiday-stripes-green";
    set theme_designer = "Lilia Ahner";
    set theme_designer_type = "outside";
  5. I haven't found if there's an easy way to apply a custom theme in the new system. So, we do this the old way. Back to the "Advanced" section and click "Your Styles"
  6. Select the community in the "Work as user:" pull-down box and hit Switch.
  7. There should be any of several styles, with one of them in bold. This is the "active" style, and will probably have "wizard-voxhtml" in it. Click Edit next to it.
  8. There should be a box that says "Expressive" next to Layout and a box under that that says Theme. In Theme, scroll down to the bottom and select the theme layer you just edited/created, then "Save Changes". This attaches your custom theme layer to the layout instead of one of the default themes.
At this point, the code should be active, but your customzied CSS won't be. You can add that back in at this page in the customization section, just click Custom CSS on the left sidebar. Got all that? ;)
Oct. 26th, 2007 05:04 pm (UTC)
thank you mike. i will try tonight again.
Oct. 26th, 2007 03:44 pm (UTC)
You could also apply the custom theme layer the easy way: Instead of step 5 and on above, go to the main customization page and click "My Custom Layers" in the left sidebar, then choose the layer you created in the first steps.
( 15 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars