• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión
Icono de recurso

Tutorial Poner un marco al bbCode YouTube

Juan Sin Miedo

XenForoUser
Mensajes
225
Puntuación de reacciones
15
Puntos
18
País
Perú
Página web
Web
Hola, quería saber si con los widgets actuales para Xenforo, es posible dotar de un marco a un video de Youtube y así mejorar la parte estética.

Seria algo mas o menos asi:


4JlpvO8.png



Saludos.
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
¿El marco lo quieres para que actúe como código BB o para colocarlo donde te plazca?

Salud2
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Edita en Panel de control -> Inicio -> Código BB media - sitios -> YouTube -> HTML incrustado:
Cambia su contenido por:
Insertar CODE, HTML o PHP:
<div class="bbCodeBlock Youtube">
   <div class="type">{xen:phrase Youtube}:</div>
   <pre><iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe></pre>
</div>
<div style="border:1px solid #000000;padding:3px;border-radius:5px;"></div>

Salud2
 
Última edición:

Juan Sin Miedo

XenForoUser
Mensajes
225
Puntuación de reacciones
15
Puntos
18
País
Perú
Página web
Web
Edita en Panel de control -> Inicio -> Código BB media - sitios -> YouTube -> HTML incrustado:
Cambia su contenido por:
Insertar CODE, HTML o PHP:
<div class="bbCodeBlock Youtube">
   <div class="type">{xen:phrase Youtube}:</div>
   <pre><iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe></pre>
</div>
<div style="border:1px solid #000000;padding:3px;border-radius:5px;"></div>

Salud2

El marco esta ahi, pero de momento me sale asi:


i6fENTj.png


Saludos.
 

Juan Sin Miedo

XenForoUser
Mensajes
225
Puntuación de reacciones
15
Puntos
18
País
Perú
Página web
Web
Puedo ajustar el tamaño del video pero la cosa seria que el marco pueda ajustarse a cualquier tamaño, la palabra Youtube tambien valdria tenerla centrada.
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Edita en Panel de control -> Inicio -> Código BB media - sitios -> YouTube -> HTML incrustado:
Cambia su contenido por:
Insertar CODE, HTML o PHP:
<style type="text/css">
.bbCodeBlock pre, .bbCodeBlock .code, .bbCodeBlock Youtube {
min-height: 30px;
max-height: 525px;
_width: auto;
}
.bbCodeBlock .type {
text-align:center;
}
</style>
<div class="bbCodeBlock Youtube">
   <div class="type">{xen:phrase Youtube}:</div>
   <pre><iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe></pre>
</div>

Salud2
 

Juan Sin Miedo

XenForoUser
Mensajes
225
Puntuación de reacciones
15
Puntos
18
País
Perú
Página web
Web
Gracias por el esfuerzo, pero sigue casi igual, la unica diferencia es que donde dice {xen: phrase Youtube}: ya esta centrado...
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Edita en Panel de control -> Inicio -> Código BB media - sitios -> YouTube -> HTML incrustado:
Cambia su contenido por:
Insertar CODE, HTML o PHP:
<style type="text/css">
#bbCodeYoutube pre, #bbCodeYoutube.Youtube {
min-height: 30px;
max-height: 525px;
_width: auto;
}
#bbCodeYoutube .type {
text-align:center;
}
#bbCodeYoutube {
display: table-cell;
margin: 0 auto;
}
</style>
<div  id="bbCodeYoutube" class="Youtube">
   <div class="type">Youtube:</div>
   <pre><iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe></pre>
</div>

Salud2
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Con este código
Insertar CODE, HTML o PHP:
<style type="text/css">
#bbCodeYoutube pre, #bbCodeYoutube.Youtube {
  background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #a5cae4;
  border-radius: 5px;
  direction: ltr;
  display: block;
  font-family: Consolas,"Courier New",Courier,monospace;
  font-size: 10pt;
  line-height: 1.24;
  margin: 0 auto;
  max-height: 525px;
  max-width: 525px;
  min-height: 30px;
  overflow: auto;
  padding: 5px;
  word-wrap: normal;
}
#bbCodeYoutube .type {
  text-align:center;
  margin: 1em @messageInfo.margin-left 1em 0;
  border: 1px solid @primaryLighterStill;
  border-radius: 5px;
  overflow: auto;
  background: #176093 url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
  border-bottom: 1px solid @primaryLighter;
  color: #d7edfc;
  font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
}
#bbCodeYoutube { display: table-cell; margin: 0 auto; }
</style>
<div  id="bbCodeYoutube" class="Youtube">
  <div class="type">Youtube:</div>
  <pre><center><iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe></center></pre>
</div>
te ha quedado así:

64.png

Salud2
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Insertar CODE, HTML o PHP:
<style type="text/css">
#bbCodeYoutube pre, #bbCodeYoutube.Youtube {
  background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #a5cae4;
  border-radius: 5px;
  direction: ltr;
  display: block;
  font-family: Consolas,"Courier New",Courier,monospace;
  font-size: 10pt;
  line-height: 1.24;
  margin: 0 auto;
  max-height: 525px;
  max-width: 518px;
  min-height: 30px;
  overflow: auto;
  padding: 5px;
  word-wrap: normal;
}
#bbCodeYoutube .type {
  text-align:center;
  margin: 1em @messageInfo.margin-left 1em 0;
  border: 1px solid @primaryLighterStill;
  border-radius: 5px;
  overflow: auto;
  background: #176093 url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
  border-bottom: 1px solid @primaryLighter;
  color: #d7edfc;
  font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
}
#bbCodeYoutube { display: table-cell; margin: 0 auto; }
</style>
<div  id="bbCodeYoutube" class="Youtube">
  <div class="type">Youtube:</div>
  <pre><center><iframe width="560" height="315" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe></center></pre>
</div>

Salud2
 

Juan Sin Miedo

XenForoUser
Mensajes
225
Puntuación de reacciones
15
Puntos
18
País
Perú
Página web
Web
Si, va perfecto, he ajustado algunos valores para el tamaño del video y el marco, ahora voy a ver como puedo jugar un poco con los colores.

Como diría Pedro Vargas: Muy agradecido, muy agradecido, muy agradecido.
kZ3Zhbw.gif
 
Última edición:

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
lms ha publicado un nuevo recurso:

Poner un marco al bbCode YouTube - Coloca un marco y un título fijo alrededor del bbcode YouTube

Edita en Panel de control -> Inicio -> Código BB media - sitios -> YouTube -> HTML incrustado:
Cambia su contenido por:
Insertar CODE, HTML o PHP:
<style type="text/css">
#bbCodeYoutube pre, #bbCodeYoutube.Youtube {
  background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #a5cae4;
  border-radius: 5px;
  direction: ltr;
  display: block;
  font-family: Consolas,"Courier New",Courier,monospace;
  font-size: 10pt;
  line-height: 1.24;
  margin: 0 auto;
  max-height:...

Leer más sobre este recurso...
 

Juan Sin Miedo

XenForoUser
Mensajes
225
Puntuación de reacciones
15
Puntos
18
País
Perú
Página web
Web
lms ha publicado un nuevo recurso:

Poner un marco al bbCode YouTube - Coloca un marco y un título fijo alrededor del bbcode YouTube



Leer más sobre este recurso...


Ese max-width: 518px; pienso que seria mejor ponerlo en 517px o 519px, aunque el detalle es minimo, las diferencias son estas:

-Al ponerlo en 518px, queda una pequeña franja negra a la derecha entre el video y el marco.
-Al ponerlo en 517px no queda ninguna linea negra, el video se ajusta perfecto al marco.
-Al ponerlo en 519px queda una linea negra a cada lado

Detalle sin mayor importancia en realidad, pero bueno, podria mejorar levemente la parte estetica. Yo lo tengo ajustado a 519px, con una delgadisima linea negra a ambos lados (al menos visto en Chrome).

Saludos.
 
Última edición:
Arriba