Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

BBCode Youtube con Highslide en phpBB 3Tema Solucionado

Solo BBCodes, dudas en este foro no


Avatar de Usuario
ThE KuKa
Administrador
Mensajes: 9612
Registrado: 04 Ene 2004, 19:27
Género:
Edad: 46

BBCode Youtube con Highslide en phpBB 3  Tema Solucionado

#1

Mensaje por ThE KuKa »

Hola,

RECOMENDABLE, si así empiezo el mensaje, así que seguir leyendo... :mrgreen:

Se trata de BBCode para youtube usando Highslide.

Nombre del MOD: Highslide/youtube BBCode
Autor del MOD: BBCode creado por PeterS y script de http://vikjavev.no/highslide/
Demo: Mirar el resltado AQUÍ

Modificaciones para Prosilver:

Descarga el ZIP desde AQUÍ
Sube la carpeta highslide a la "raíz" de tu foro.

Abrir el archivo styles/prosilver/template/overall_header.html
Al final del todo, en una nueva linea añadir:

Código: Seleccionar todo

<script type="text/javascript" src="highslide/highslide-with-html.js"></script>

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;
    hs.preserveContent = false;
</script>
Abrir el archivo styles/prosilver/theme/colours.css
Al final del todo, en una nueva linea añadir:

Código: Seleccionar todo

.highslide-html {
    background-color: white;
}
.highslide-html-blur {
}
.highslide-html-content {
	position: absolute;
    display: none;
}
.highslide-loading {
    display: block;
	color: black;
	font-size: 8pt;
	font-family: sans-serif;
	font-weight: bold;
    text-decoration: none;
	padding: 2px;
	border: 1px solid black;
    background-color: white;
    
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}


/* Styles for the popup */
.highslide-wrapper {
	background-color: white;
}
.highslide-wrapper .highslide-html-content {
    width: 400px;
    padding: 5px;
}
.highslide-wrapper .highslide-header div {
}
.highslide-wrapper .highslide-header ul {
	margin: 0;
	padding: 0;
	text-align: right;
}
.highslide-wrapper .highslide-header ul li {
	display: inline;
	padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {
	display: none;
}
.highslide-wrapper .highslide-header a {
	font-weight: bold;
	color: gray;
	text-transform: uppercase;
	text-decoration: none;
}
.highslide-wrapper .highslide-header a:hover {
	color: black;
}
.highslide-wrapper .highslide-header .highslide-move a {
	cursor: move;
}
.highslide-wrapper .highslide-footer {
	height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
	float: right;
	height: 11px;
	width: 11px;
	background: url(highslide/graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
    cursor: move;
}
.highslide-resize {
    cursor: nw-resize;
}

/* These must be the last of the Highslide rules */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
Guardar, cerrar y subir los archivos. Limpiar cache y refrescar la plantilla y el estilo desde el ACP

Ir al ACP y el modulo de "post".
Por defecto el modulo de post abre la sección de "BBCODES". Tenemos que hacer clic en "Agregar nuevo bbcode"

Ahora encontramos varias opciones:

En uso del bbcode pondremos lo siguiente:

Código: Seleccionar todo

[youtube]{IDENTIFIER}[/youtube]
En Reemplazo HTML lo siguiente:

Código: Seleccionar todo

<body>
<div>

<a href="http://www.youtube.com/v/{IDENTIFIER}" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )" class="Highslide" ><img src="http://i.ytimg.com/vi/{IDENTIFIER}/default.jpg"></a>
</div>
</body>
En la linea de ayuda de bbcode ponemos algo que ayude al usuario a entender el uso del bbcode, por ejemplo:

Código: Seleccionar todo

[youtube]{Código del vídeo, por ejemplo "HO-BcoXYGuA"}[/youtube]
Así aparecerá una miniatura del vídeo, en lugar de la típica ventana "grande" y al hacer clic en la miniatura, aparecerá el vídeo de un modo mas "bonito" :cerveza:

Fuente: phpBB Academy
Última edición por ThE KuKa el 04 Jul 2011, 18:54, editado 1 vez en total.
Razón: BBCode corregido por seguridad.


📌 Raul [ThE KuKa] en phpBB 📌
✅ Jr. Extension Validator - Jr. Styles Validator - Style Customisations - Translator - International Support Team
✅

Si te gustan mis estilos, traducciones, etc. y quieres mostrar algo de aprecio, no dudes en hacer una donación Imagen
:flag_es: phpBB España - En línea desde 2003 :heart:




Volver a “⚙️ BBCode General”