- 20 Jun 2012, 01:59
#13
[align=center][infobox]Nombre Tutorial: Imágen de fondo en el editor de las respuestas
Autor: DaVidU
Url del Autor http://www.coloreatuforo.com
Basado en: PROSILVER
Descripción y uso:
Pon una imágen de fondo como más te guste en el editor de las respuestas, con este tutorial podrás poner la imágen donde y como más te guste.[/infobox][/align]
Screenshot:
[img]http://img171.imageshack.us/img171/5494 ... 050610.jpg[/img]
Tutorial:
Primero de todo la imágen a usar, en mi caso esta:
[img]http://img686.imageshack.us/img686/9507/bginputbox2.png[/img]
en este caso la llamaremos bg_inputbox2.png
se ha de guardar la imágen en la carpeta:
root/styles/tu estilo/theme/images/bg_inputbox2.png
después abrir el archivo:
root/styles/tu estilo/theme/colours.css
buscar esto:
para la respuesta predeterminada abrir el archivo:
root/styles/tu estilo/template/posting_editor.html
buscar esto:
root/styles/tu estilo/template/quickreply_editor.html
buscar esto:
root/styles/tu estilo/template/quick_reply.html
buscar esto:
Autor: DaVidU
Url del Autor http://www.coloreatuforo.com
Basado en: PROSILVER
Descripción y uso:
Pon una imágen de fondo como más te guste en el editor de las respuestas, con este tutorial podrás poner la imágen donde y como más te guste.[/infobox][/align]
Screenshot:
[img]http://img171.imageshack.us/img171/5494 ... 050610.jpg[/img]
Tutorial:
Primero de todo la imágen a usar, en mi caso esta:
[img]http://img686.imageshack.us/img686/9507/bginputbox2.png[/img]
en este caso la llamaremos bg_inputbox2.png
se ha de guardar la imágen en la carpeta:
root/styles/tu estilo/theme/images/bg_inputbox2.png
después abrir el archivo:
root/styles/tu estilo/theme/colours.css
buscar esto:
Code: Select all
agregar esto después en una nueva línea:
/* Input field styles
---------------------------------------- */
.inputbox {
background-color: #FFFFFF;
border-color: #B4BAC0;
color: #333333;
}
.inputbox:hover {
border-color: #11A3EA;
}
.inputbox:focus {
border-color: #11A3EA;
color: #0F4987;
}
Code: Select all
/* Input field styles
---------------------------------------- */
.inputbox2 {
background-color: #FFFFFF;
background-image: url("{T_THEME_PATH}/images/bg_inputbox2.png");
background-position:50% 50%;
background-repeat:no-repeat;
border-color: #B4BAC0;
color: #333333;
}
.inputbox2:hover {
border-color: #11A3EA;
}
.inputbox2:focus {
border-color: #11A3EA;
color: #0F4987;
}
En este ejemplo estamos usando la imágen totalmente centrada en el editor tanto horizontal como verticalmente, concretamente en esta parte: background-position:50% 50%;ahora viene lo importante, haremos lo del fondo en el editor predeterminado de las respuestas de phpbb3 y en el nuevo editor de la respuesta rápida que trae a partir de la versión 3.0.6 de phpbb3
En caso de querer poner la imágen en una esquina del editor se ha de modificar dicha línea de esta manera:
- Imágen arriba a la izquierda: (background-position: top left;)
- Imágen arriba a la derecha: (background-position: top right;)
- Imágen abajo a la izquierda: (background-position: bottom left;)
- Imágen abajo a la derecha: (background-position: bottom right;)
para la respuesta predeterminada abrir el archivo:
root/styles/tu estilo/template/posting_editor.html
buscar esto:
Code: Select all
reemplazar con esto:
class="inputbox">{MESSAGE}
Code: Select all
para la respuesta rápida abrir el archivo:class="inputbox2">{MESSAGE}
root/styles/tu estilo/template/quickreply_editor.html
buscar esto:
Code: Select all
reemplazar con esto:
<div id="message-box">
<textarea style="height: 9em;" name="message" rows="7" cols="76" tabindex="3" class="inputbox"></textarea>
</div>
Code: Select all
En caso de querer poner el fondo en el MOD Quick Reply v1.6.7 (Como en este foro) abrir el archivo: <div id="message-box">
<textarea style="height: 9em;" name="message" rows="7" cols="76" tabindex="3" class="inputbox2"></textarea>
</div>
root/styles/tu estilo/template/quick_reply.html
buscar esto:
Code: Select all
reemplazar con esto:
class="inputbox">{MESSAGE}</textarea>
Code: Select all
guardar archivos, actualizar el tema, limpiar el cache del foro y refrescar el navegador para ver los cambiosclass="inputbox2">{MESSAGE}</textarea>
[mod=Carlos]Recuerda poner tus datos de soporte antes de pedir ayuda! Asi nos evitamos dramas y te ayudamos rapido [/mod]