Posted: 02/07/2010 11:56 PM
Moods. Tutorial. Part 2.
This is continuation of the very popular post: Moods. Tutorial.
First of all I'm going to sort out previous post related questions and issues.
1. I did everything according to tutorial - no luck, all I can see only Edit link.
Oops. I forgot to mention that original icon set doesn't have Edit.gif in it. I had to create it myself. Please download it right from vldCrowd: http://www.vldcrowd.com/media/moods/Edit.gif and put to your moods folder.
2. I don't have mod_rewrite on my server and that's why seo-friendly url "Click to edit" leads me to nowhere.
I'm sorry, I thought every hosting has mod rewrite these days. My bad.
Please instead of {virtual_path}account/profile/mood/ use {virtual_path}index.php?m=account_profile&group=mood
3. I don't want to display Moods group at profile groups tabs because I already have it displayed as graphic icon.
We have to do same thing as with General group, if you noticed it it's not displayed at account_home in field group tabs.
Open your account_home.tpl and replace both occurrences of <!-- IF group_label != "general" --> with <!-- IF group_label != "general" AND group_label != "mood" -->
4. I installed your mod and can't see anything when I visit member's profile page
Oh yes, vldP v.2.5.5 doesn't use member_sections_card.tpl at member_profile page, hence you have to edit member_profile.tpl too. Add this anywhere at the file but outside of profile groups, fields loop:
<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>
Play with different locations and fine the best place. Placing somewhere under profile photo could be good idea.
Here comes main part of tutorial.
How to dynamically display moods on selection
1. Open your account_profile.tpl and find <!-- ELSEIF field_type = "combo" -->
Add right after it:
<!-- IF field_label == "mymood" -->
<select class="select" onchange="display_mood('{top.virtual_tpl_path}{session.template}/media/moods/');" id="field_{field_label}" name="{field_label}">
<option value="">{lang:"core","user_field_none"}</option> {dropdownlist:field_items,field_value} </select><div id="mood_div"> </div>
<!-- ELSE -->
Then find <!-- ELSEIF field_type = "birthday" --> and add right before it:
<!-- ENDIF -->
2. Scroll your account_profile.tpl to bottom and add right before
<!-- ENDIF -->
<!-- INCLUDE ...
this code:
<script type="text/javascript" >
$(document).ready(function(){
display_mood('{virtual_tpl_path}{session.template}/media/moods/');
});
// display mood icon
function display_mood(url)
{
var mood = $('select#field_mymood option:selected').text();
$('#mood_div').attr('style', 'background: url(' + url + mood + '.gif) no-repeat; width:93px; height:30px;');
}
</script>
3. Go and try to change your mood.
First of all I'm going to sort out previous post related questions and issues.
1. I did everything according to tutorial - no luck, all I can see only Edit link.
Oops. I forgot to mention that original icon set doesn't have Edit.gif in it. I had to create it myself. Please download it right from vldCrowd: http://www.vldcrowd.com/media/moods/Edit.gif and put to your moods folder.
2. I don't have mod_rewrite on my server and that's why seo-friendly url "Click to edit" leads me to nowhere.
I'm sorry, I thought every hosting has mod rewrite these days. My bad.
Please instead of {virtual_path}account/profile/mood/ use {virtual_path}index.php?m=account_profile&group=mood
3. I don't want to display Moods group at profile groups tabs because I already have it displayed as graphic icon.
We have to do same thing as with General group, if you noticed it it's not displayed at account_home in field group tabs.
Open your account_home.tpl and replace both occurrences of <!-- IF group_label != "general" --> with <!-- IF group_label != "general" AND group_label != "mood" -->
4. I installed your mod and can't see anything when I visit member's profile page
Oh yes, vldP v.2.5.5 doesn't use member_sections_card.tpl at member_profile page, hence you have to edit member_profile.tpl too. Add this anywhere at the file but outside of profile groups, fields loop:
Text
<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>
Here comes main part of tutorial.
How to dynamically display moods on selection
1. Open your account_profile.tpl and find <!-- ELSEIF field_type = "combo" -->
Add right after it:
Text
<!-- IF field_label == "mymood" -->
<select class="select" onchange="display_mood('{top.virtual_tpl_path}{session.template}/media/moods/');" id="field_{field_label}" name="{field_label}">
<option value="">{lang:"core","user_field_none"}</option> {dropdownlist:field_items,field_value} </select><div id="mood_div"> </div>
<!-- ELSE -->
Text
<!-- ENDIF -->
2. Scroll your account_profile.tpl to bottom and add right before
<!-- ENDIF -->
<!-- INCLUDE ...
this code:
Javascript
<script type="text/javascript" >
$(document).ready(function(){
display_mood('{virtual_tpl_path}{session.template}/media/moods/');
});
// display mood icon
function display_mood(url)
{
var mood = $('select#field_mymood option:selected').text();
$('#mood_div').attr('style', 'background: url(' + url + mood + '.gif) no-repeat; width:93px; height:30px;');
}
</script>
3. Go and try to change your mood.
Current mood:
Previous post: Happy Birthday Sven! Happy Birthday Little Moosie!
Next post: I'm moving to a new virtual office
Next post: I'm moving to a new virtual office
210
10
1
Comments
the onlything i see is the sumit button
i create...and set as said..in tutorial
http://open2share.com/account/profile/mood/
help please
When viewing the profile, when member_sections_card.tpl is called, it is not being interpreted correctly, and I get the "questionit" icon.
member_sections_card.tpl
<dt style="padding-top: 10px">{lang:"custom","my_mood"}</dt>
<dd>
<!-- IF active_module == "account_home" -->
<a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/profile/mood/","index.php?m=account_profile&group=mood"}" title="{lang:"custom","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>
Perhaps I am missing the obvious here?
This fixes 0.5 my issues, but unfortunately leaves me exactly the same amount :)
I believe, at this stage, it's due to the template I am using (a highly butchered weby2), so will try and sort it out before yelling for help again.
Pages
1 2