The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Add Youtube Songs to members profile

View previous topic View next topic Go down

Add Youtube Songs to members profile

Post by Luffy on November 23rd 2016, 2:27 pm

Add Youtube Songs to members profile

Hello all,

With this tutorial I will show you an easy way of adding Youtube Songs to your members profiles. This way all members are allowed to add a song of their choice and change it whenever they want. This code works for all version of forums and it's simple and easy to add.

Profile Addition

To add this to the profiles you need to make a new field. To do that go to:
Admin Panel > Users & Groups > Users > Profiles > create a new field using the green cross and make it as below:


and add as the Deafult Content: to the text zone the below code:
Code:
[table class="ytbSong" id="ytS"][tr][td][youtube][/youtube][/td][/tr][/table]
Save the field and then go ahead and hit replace content to replace all the fields with the code.


CSS Addition

All that's left to do is to add the below code in your CSS:
Admin Panel > Display > Pics and colors > Colors > CSS Stylesheet and add the code:
Code:
/* Tutorial and code by Luffy */
table#ytS:hover {
  transition: 300ms;
  left: 0;
}
table#ytS:after {
  content: 'Profile Song';
  position: absolute;
  right: -50px;
  top:30px;
  transform: rotate(90deg);
  background: #cdcdcd;
  color: #353535;
  padding: 5px;
}
table#ytS {
  position: fixed;
  transition: 300ms;
  left: -585px;
  top: 25%;
  background: #353535;
  display: block;
  width: 560px;
  height: 315px;
  padding: 10px 15px 15px 10px;
  z-index: 9;
}
Save the CSS.

Once you do all these then if you go to your profile you will see this showing to the left of your screen:

Once you hover that you will see this:


All you have to do, is edit the field and enter the video url from youtube.


Example:
Click the edit button to your profile field and enter the link within the youtube tags:

it should be something like this:

hit save and hover the profile song tag and see your video song there:

After that you can edit the field and change the link to an other link and change the song anytime you want.

You can do any modifications you want through the CSS.
I hope you like it and enjoy this tutorial. bounce cheers







Luffy
Manager
Manager

Male Posts : 4396
Reputation : 436
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum