Profile Enhancements - Mp3 Player For User Profiles

I say that there was a demand for and mp3 player mod here on vbulletin.org. I used one from

http://www.myflashfetish.com/

You will need to sign up its free!!

Create a new profile field single-lline text box.

Make it editable by users and private, non-searchable. Save and then
Import the product and open the template:

memberinfo_block_music

and find:

PHP Code:

$userinfo[field15] 


And change to what ever yours is.
next tell your users to fill out there prefs to there mp3 player. Next tell them to copy the embed code. From there you will need to tell them to look for:

PHP Code:

<param name="flashvars" value="[color="red"][b]myid=16092906&path=2008/12/12&mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=true&rand=0&f=4&vol=100&pat=10&grad=true[/b][/color]"/></object> 


They will need to copy the entire code inside the value="" I`ll highlight it in red fo you to see it.

Next open the template MEMBERINFO

next go to the bottom of that and look for

PHP Code:

$blocks[stats_mini]
$template_hook[profile_right_mini]
$blocks[friends_mini]
$blocks[albums]
$template_hook[profile_right_album]
$blocks[groups]
$blocks[visitors] 


Add in there $blocks[music] on a separate line so it looks like this:

PHP Code:

$blocks[mini]
$blocks[music] 


and save the template. Next follow the directions below to finish the install.

Tell them to add that entire code to there profile field and save it. This will add the mp3 player to there profile.


UPDATED:

Problem fixed!

you must do a fresh install of the product if you`ve already done it if not follow these instructions as well

Create another single text line user profile field and name it MP3 swf type.

Description: to show the version of mp3 player your using.

The rest is the same as above.

in template: memberinfo_block_music

Find:

PHP Code:

$userinfo[field16] 


Change 16 to the number of your profile field and save.

PHP Code:

<object type="application/x-shockwave-flash" data="http://assets.myflashfetish.com/swf/mp3/[color="red"][b]mixpod.swf[/b][/color]" 


you must switch the mixpod.swf to what ever .swf version that is used.


The mp3 player features the ability to upload your own songs to be played on you profile.

[pein87]

Sorry about that Will fix thanks for doing this for me. To answer your question yes I can do it for the video mod please give me some time to check the embed to that. I`ll also need to add the side to it as well. It is originally made for myspace and other site but i added it for vbulletin sites. I will update the instructions and work on the other mod. Thanks for installing.

[pein87]

Originally Posted by DawnsWebDesigns

That did it. Thank you very much. What could I edit to get the player a lil more centered within the block?

Can you provide a pic or link for me to see it? You can always add more width or create a new css rule for the div that houses the embed an add margin or if its the most inner div add padding.

[DawnsWebDesigns]

Originally Posted by pein87

Can you provide a pic or link for me to see it? You can always add more width or create a new css rule for the div that houses the embed an add margin or if its the most inner div add padding.

Thank you for creating this for me to install. And thank you for working on a video one.

Here's a link: http://www.dawnswebdesigns.com/forum/member.php?u=1

I'm pretty sure guests can see it. In the little My MP3 Player box my mp3 player is to the left. I'd like it to be more centered. I was thinking I should edit memberinfo_block_music & add <center> tags but it looks like you already did.

<div class="alt2 block_row block_footer">
	 <center><p style="visibility:visible;"><object type="application/x-shockwave-flash" data="http://assets.myflashfetish.com/swf/mp3/$userinfo[field6]" height="311" width="230" style="width:230px;height:311px"><param name="movie" value="http://assets.myflashfetish.com/swf/mp3/$userinfo[field6]" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="l" /><param name="wmode" value="transparent"/><param name="flashvars" value="$userinfo[field5]"/></object></center>
	</div>

Any other ideas?

[pein87]

Yes add a div after the first to. Next add an id to it called mp3.

copy and replace with the original template:

<!-- Mp3 player -->
<if condition="$userinfo[field15]">
<div id="snapvine" class="tborder content_block">
<h4 class="thead block_title">
<a href="#top" class="collapse_gadget" onclick="return toggle_collapse('music')"><img id="collapseimg_music" src="images/buttons/collapse_generic.gif" alt="" border="0" /></a>
<a name="albums"></a>
<span class="block_name">Mp3 player</span>
</h4>
<div class="block_content" id="collapseobj_music" style="">
<div class="alt2 block_row block_footer">
<div id="mp3">
<center><p style="visibility:visible;"><object type="application/x-shockwave-flash" data="http://assets.myflashfetish.com/swf/mp3/$userinfo[field16]" height="311" width="230" style="width:230px;height:311px"><param name="movie" value="http://assets.myflashfetish.com/swf/mp3/$userinfo[field16]" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="l" /><param name="wmode" value="transparent"/><param name="flashvars" value="$userinfo[field15]"/></object></center>
</div>

</div>
</div>
</if>
<!-- / Mp3 player -->

Next go to the skins you added it to in styles manager and select all style options. Go near the bottom and find additional css rules add this.

#mp3 {
text-align: center;
}

if this is not working try playing with the size of the mp3 its self in the memberinfo_block_music Thats how i originally made mine. Your very welcome glad you like it the video mo should be out in the next few days lol i`m on vacation lol.

[DawnsWebDesigns]

Originally Posted by pein87

Yes add a div after the first to. Next add an id to it called mp3.

copy and replace with the original template:

<!-- Mp3 player -->
<if condition="$userinfo[field15]">
<div id="snapvine" class="tborder content_block">
<h4 class="thead block_title">
<a href="#top" class="collapse_gadget" onclick="return toggle_collapse('music')"><img id="collapseimg_music" src="images/buttons/collapse_generic.gif" alt="" border="0" /></a>
<a name="albums"></a>
<span class="block_name">Mp3 player</span>
</h4>
<div class="block_content" id="collapseobj_music" style="">
<div class="alt2 block_row block_footer">
<div id="mp3">
<center><p style="visibility:visible;"><object type="application/x-shockwave-flash" data="http://assets.myflashfetish.com/swf/mp3/$userinfo[field16]" height="311" width="230" style="width:230px;height:311px"><param name="movie" value="http://assets.myflashfetish.com/swf/mp3/$userinfo[field16]" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="l" /><param name="wmode" value="transparent"/><param name="flashvars" value="$userinfo[field15]"/></object></center>
</div>

</div>
</div>
</if>
<!-- / Mp3 player -->

Next go to the skins you added it to in styles manager and select all style options. Go near the bottom and find additional css rules add this.

#mp3 {
text-align: center;
}

if this is not working try playing with the size of the mp3 its self in the memberinfo_block_music Thats how i originally made mine. Your very welcome glad you like it the video mo should be out in the next few days lol i`m on vacation lol.

I added your codes. It brought my group membership & recent visitor boxes up into the mp3 player box. So I went back in & added another </div> & it took them back out. But it's still not centering. That's ok though. It's no biggie. I'm just grateful for this feature. Go enjoy your vacation.

[pein87]

Thanks I`ll play with it over my break and see what i can do, the other mod will be done very soon but for now I must leave see ya.

[DawnsWebDesigns]

OK I got it. I had to edit the height & width.

<center><p style="visibility:visible;"><object type="application/x-shockwave-flash" data="http://assets.myflashfetish.com/swf/mp3/$userinfo[field16]" height="311" width="230" style="width:230px;height:311px">

I went back to: http://www.myflashfetish.com & re-got my code. From there I got the height & width of the player to edit these to. Suddenly...it's centered. Yay!!! Thank you. Now please go have a nice vacation before your fellow vacationers, if any, get upset.

[popular]

i get a blank box that seems to have an empty flash file does anyone know why?

[DawnsWebDesigns]

Originally Posted by popular

i get a blank box that seems to have an empty flash file does anyone know why?

Here:

And change to what ever yours is.
next tell your users to fill out there prefs to there mp3 player. Next tell them to copy the embed code. From there you will need to tell them to look for:

PHP Code:

<param name="flashvars" value="myid=16092906&path=2008/12/12&mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=true&rand=0&f=4&vol=100&pat=10&grad=true"/></object>

They will need to copy the entire code inside the value="" I`ll highlight it in red fo you to see it.

He had it wrong. I've actually fixed it...what's highlighted in red is the code you need.



My site still works even though I've just updated to 3.8.0.

And I still need this centering thing figured in. The code you gave us was for the size of your player. Adding centering tags didn't work for some reason. I had to go in & change the size of the player then it was centered. But I don't think members will be able to "go in" & change the size of their players. Any help?

[DawnsWebDesigns]

Originally Posted by pein87

Yes add a div after the first to. Next add an id to it called mp3.

copy and replace with the original template:

<!-- Mp3 player -->
<if condition="$userinfo[field15]">
<div id="snapvine" class="tborder content_block">
<h4 class="thead block_title">
<a href="#top" class="collapse_gadget" onclick="return toggle_collapse('music')"><img id="collapseimg_music" src="images/buttons/collapse_generic.gif" alt="" border="0" /></a>
<a name="albums"></a>
<span class="block_name">Mp3 player</span>
</h4>
<div class="block_content" id="collapseobj_music" style="">
<div class="alt2 block_row block_footer">
<div id="mp3">
<center><p style="visibility:visible;"><object type="application/x-shockwave-flash" data="http://assets.myflashfetish.com/swf/mp3/$userinfo[field16]" height="311" width="230" style="width:230px;height:311px"><param name="movie" value="http://assets.myflashfetish.com/swf/mp3/$userinfo[field16]" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="l" /><param name="wmode" value="transparent"/><param name="flashvars" value="$userinfo[field15]"/></object></center>
</div>

</div>
</div>
</if>
<!-- / Mp3 player -->

Next go to the skins you added it to in styles manager and select all style options. Go near the bottom and find additional css rules add this.

#mp3 {
text-align: center;
}

if this is not working try playing with the size of the mp3 its self in the memberinfo_block_music Thats how i originally made mine. Your very welcome glad you like it the video mo should be out in the next few days lol i`m on vacation lol.

I'm looking over this again & I didn't add this: "Yes add a div after the first to. Next add an id to it called mp3." I simply copied & replaced everything between here:
<!-- Mp3 player --> & here: <!-- / Mp3 player --> plus added the additional css. Could you please show me an example of what you mean? What do I add & where do I add it? It might be the thing that fixes this centering issue?