Staff en línea

[recursos] Añadir canciones de Youtube en el perfil
Tema iniciado por y Añadir a favoritos



Última edición por Fibo el Vie Feb 17, 2017 7:16 pm, editado 1 vez (Razón : Actualización 1)
Hola amigos de OpenSourcephpBB3

Con este tutorial van a poder insertar un video de youtube en los perfiles de sus usuarios, el video solo sera visible en los perfiles.

[ok]Creación de un nuevo campo de perfil[/ok]
Nos dirigimos al Panel Admin >> Usuarios & Grupos >> Usuarios >> Perfiles

Para crear un nuevo campo de perfil damos clic en la cruzita verde [aW][/aW] y llenar los campos tal como se muestra:

[recursos] Añadir canciones de Youtube en el perfil WiYAXQlh

Y añadir el contenido por defecto lo siguiente:
[codebox]
Código:
[table class="ytbSong" id="ytS"][tr][td][youtube][/youtube][/td][/tr][/table]
[/codebox]

Luego registran los cambios.

[ok]CSS[/ok]
Para agregar el CSS nos vamos al Panel Admin > Visualización > Imagenes y Colores > Colores > CSS StyleSheet
[codebox]
Código:

table#ytS:hover {
  transition: 300ms;
  left: 0;
}
table#ytS:after {
  content: 'Cancion';
  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;
}
[/codebox]

Aceptamos los cambios y listo.

Ahora nos vamos a nuestro perfil, y modificamos el campo Mi cancion y ponemos el enlace de nuestro video de youtube enmedio de las etiquetas youtube.
[recursos] Añadir canciones de Youtube en el perfil 3FoL5s1h


Quedara de esta manera.
[recursos] Añadir canciones de Youtube en el perfil DR3RMO7h


Se mostrara una etiqueta al lado izquierdo con el texto Cancion, y al pasar el mouse encima del cuadro aparecerá el video que hemos introducido, tal como se muestra:
[recursos] Añadir canciones de Youtube en el perfil 4cJddfXh


Usted puede hacer las modificaciones que desee, puede ver el ejemplo en ejecución en el siguiente enlace desde un foro de pruebas.
Spoiler:


[info]Este tutorial fue escrito por Luffy [/info]

[ok]ACTUALIZACIÓN: El foro de prueba fue modificado para que puedan ver lo que hace este tutorial a todos los invitados, si uds quieren que los invitados los vean solo modifiquen el perfil y ponganle acceso a los invitados.[/ok]
Fibo
Fibo

¿Que estoy pensando? :

No dejes de pensar. [table class=fecha_up][td]Se modifico:3/02/20 - 15:14 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/zVxw0kMh.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

667


Puntos :

2033


Me gusta :

210


ingreso :

11/09/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://www.opensourcephpbb3.com

Volver arriba Ir abajo

staff
gracias fibo
Chalo
Chalo

¿Que estoy pensando? :

jugando con un ping de 999 [table class=fecha_up][td]Se modifico:25/05/20 - 10:57 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/ikntDYIh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

7110


Puntos :

9242


Me gusta :

1063


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


https://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.