Posted: 09/02/2009 11:52 AM
Moods. Tutorial.
Do you want to have the same moods as we use here?
I will guide you through whole process and give necessary codes.
1. First of all you need to get mood graphics. Thanks to hot girl Shelley we can get it for free from her forum:
http://www.vbimageworks.com/miscellaneous/1125-mood-manager-icons.html (I'm not allowed to re-distribute those files myself).(site is no longer available)
Download files from here:
http://www.vldcrowd.com/media/uploads/file_1hd1ctcu93feju6rmvvphnvam9ve.zip
2. Unpack archive to /templates/yourtemplate/media/moods/ floder.
3. Go to your CP and create new profile field group with label 'mood' and whatever name. Set Load in account profile: Yes, Load in public profile: Yes and Load in account separately: Yes (!!!).
4. Create field inside that group with label 'mymood', type dropdown and populate this field with filenames (without .gif). Use mood distribution readme, moods are listed there. You'll need about half an hour for this :)
Set rights similar to group.
Thanks to this mod I found out what it does mean Load in account separately It means you never see it in regular Edit profile, but if you add additional parameter: group label to url you'll get for editing content of that group! Group and it's fields has to have Load in account separately set to Yes.
Thus now you can edit this group using this link: yoursite.com/account/profile/mood/
5. Add this to the top of member_sections_card.tpl:
<dt style="padding-top: 10px">My Mood:</dt>
<dd>
<!-- IF active_module == "account_home" -->
<a href="{virtual_path}account/profile/mood/" title="Click to edit"><img alt="Edit" border="0" src="{virtual_tpl_path}{session.template}/media/moods/<!-- IF profile_field_mymood_value -->{profile_field_mymood_value}<!-- ELSE -->Edit<!-- ENDIF -->.gif" /></a>
<!-- ELSE -->
<div style="background: url('{top.virtual_tpl_path}{session.template}/media/moods/<!-- IF profile_field_mymood_value -->{profile_field_mymood_value}<!-- ELSE -->Question<!-- ENDIF -->.gif') no-repeat; width:93px; height:30px;"> </div>
<!-- ENDIF -->
</dd>
That is basic functionality. Next time I'll teach you how to add dynamically uploading graphics for comfortable mood selection. Part 2.
I will guide you through whole process and give necessary codes.
1. First of all you need to get mood graphics. Thanks to hot girl Shelley we can get it for free
http://www.vbimageworks.com/miscellaneous/1125-mood-manager-icons.html (I'm not allowed to re-distribute those files myself).
Download files from here:
http://www.vldcrowd.com/media/uploads/file_1hd1ctcu93feju6rmvvphnvam9ve.zip
2. Unpack archive to /templates/yourtemplate/media/moods/ floder.
3. Go to your CP and create new profile field group with label 'mood' and whatever name. Set Load in account profile: Yes, Load in public profile: Yes and Load in account separately: Yes (!!!).
4. Create field inside that group with label 'mymood', type dropdown and populate this field with filenames (without .gif). Use mood distribution readme, moods are listed there. You'll need about half an hour for this :)
Set rights similar to group.
Thanks to this mod I found out what it does mean Load in account separately It means you never see it in regular Edit profile, but if you add additional parameter: group label to url you'll get for editing content of that group! Group and it's fields has to have Load in account separately set to Yes.
Thus now you can edit this group using this link: yoursite.com/account/profile/mood/
5. Add this to the top of member_sections_card.tpl:
Text
<dt style="padding-top: 10px">My Mood:</dt>
<dd>
<!-- IF active_module == "account_home" -->
<a href="{virtual_path}account/profile/mood/" title="Click to edit"><img alt="Edit" border="0" src="{virtual_tpl_path}{session.template}/media/moods/<!-- IF profile_field_mymood_value -->{profile_field_mymood_value}<!-- ELSE -->Edit<!-- ENDIF -->.gif" /></a>
<!-- ELSE -->
<div style="background: url('{top.virtual_tpl_path}{session.template}/media/moods/<!-- IF profile_field_mymood_value -->{profile_field_mymood_value}<!-- ELSE -->Question<!-- ENDIF -->.gif') no-repeat; width:93px; height:30px;"> </div>
<!-- ENDIF -->
</dd>
That is basic functionality. Next time I'll teach you how to add dynamically uploading graphics for comfortable mood selection. Part 2.
Current mood:
908
15
6
Comments
Suggestion: Can this not be displayed in the list of Winks |Chat |Send Message instead?
I was hoping to get the entire list of options moved to the main section. The moods extra tab screws the layout for those of us who have the sidebar.
http://www.vbulletin.org/forum/showthread.php?t=161410
click on the images ... and save images as ... you must save 30 images ...
(The icon link is dead, but a little searching soon turns them up elsewhere)
All I get is a text edit link
http://www.fatlizard.com.au/uploads/vld/moods.jpg
The code generated is as follows:
<a href="{virtual_path}account/profile/mood/" title="Click to edit"><img alt="Edit" border="0" src="{virtual_tpl_path}{session.template}/media/moods/<!-- IF profile_field_mymood_value -->{profile_field_mymood_value}<!-- ELSE -->Edit<!-- ENDIF -->.gif" /></a>
So we can see that it's generating a link to edit.gif, and if I manually place an image called edit.gif, not surprisingly, it displays this image :)
The layout can be fixed ok, and the edit.gif can be fixed ok.
But, the link to edit the 'mood' is defaulting to "pretty url's" /account/profile/mood/
What would it be for "not pretty url's" ?
Is there an update for this how-to, that addresses the formatting and edit.gif ?
Pages
1 2