In this tutorial I'm going to explain nice way of creating zodiac fields and displaying zodiac sign in member's profile page.
1. First of all go and find some good zodiac icons. Free or paid.
Here's a couple of useful links in case you don't know how to use Google:
http://roundpixel.org/?p=69, Free zodiac icons by Ken Saunders
If you are too lazy take these resized Ken Saunders' icons I'm using in the tutorial.
2. Go to your vldP Control panel -> Settings -> Custom fields and create new custom field 'zodiac' under General group. And locate it under Age field cause it makes sense.
3. Rename your icons using this pattern: zodiac_[item_id].png (or gif depending on your file):
Renaming files you must set your own item ids you've got creating field at step 2.
Place files to your template's media folder.
4. Open your member_profile.tpl (member's profile page template) and account_home.tpl (My profile or My page template) and find code:
<div class="datainfo"> (which is right before
<!-- INCLUDE member_sections_name.tpl -->)
and make it look like:
<div class="datainfo" style="background: url('{virtual_tpl_path}{session.template}/media/zodiac_{profile_field_zodiac_value_id}.png') no-repeat 200px 10px;">
5. Test and enjoy!
This is result I've got.
P.S.: We could be using 'icon_Libra.png' and link to it as {profile_field_zodiac_value}.png but in that case no multi language would be supported. "Id has no nationality :)" (c) Me
P.P.S.: We could be using <img src="{virtual_tpl_path}{session.template}/media/zodiac_{profile_field_zodiac_value_id}.png" alt="{profile_field_zodiac_value}" border="0" /> instead of styles but that would break your design layout by putting lots of space to profile fields.
Next time I'll tell you how to automate zodiac selection depending on birthday.
you can read the originalpost from vldcrowd
