Posted: 06/08/2009 11:04 PM

How to: Zodiac works. Part 1

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.
636 13 3 how to, zodiac

Comments

by timaria 08/22/2010 07:51 AM
Thanks .
by pierrehs 08/16/2010 06:40 PM
At home he wrote but is displayed in the image do not appear
Can you help me ?
by pierrehs 08/16/2010 06:40 PM
At home he wrote but is displayed in the image do not appear
Can you help me ?
by pierrehs 08/16/2010 06:35 PM
At home he wrote but is displayed in the image do not appear
Can you help me ?
by techker 08/02/2010 04:43 PM
wouldnt it be more of type then groupe the fileds?
by sadat 03/16/2010 08:56 AM
How to display it only in "General" field.Right now when i click other fields like "Personals" it displays the zodiac sign also.
by radioact 03/16/2010 05:07 AM
Put it wherever you want.
Play, experiment! :)
by sadat 03/15/2010 04:29 AM
I have <div class="datainfo profile" id="profile_data_{rowcnt}_content" style="display: none">
simple datainfo cant be found.Can you tell me how to call it in member_profile.tpl?
Add Comment


You have 1500 characters left We would not recommend you trying hard while expressing your opinion because you are not signed in and comment will not be saved.

Latest visitors

godyn misulicus inatmo
gugu johnwh antoniopuntieri
WaterSpirit dael24 delpho

radioact's RSS

Subscribe to radioact's Blog  RSS