[Carlos]

[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:

Code: Select all

/* Input field styles
---------------------------------------- */
.inputbox {
    background-color: #FFFFFF; 
    border-color: #B4BAC0;
    color: #333333;
}
 
.inputbox:hover {
    border-color: #11A3EA;
}
 
.inputbox:focus {
    border-color: #11A3EA;
    color: #0F4987;
}

agregar esto después en una nueva línea:

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%;

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;)

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

para la respuesta predeterminada abrir el archivo:
root/styles/tu estilo/template/posting_editor.html

buscar esto:

Code: Select all

class="inputbox">{MESSAGE}

reemplazar con esto:

Code: Select all

class="inputbox2">{MESSAGE}

para la respuesta rápida abrir el archivo:
root/styles/tu estilo/template/quickreply_editor.html

buscar esto:

Code: Select all

                <div id="message-box">
                    <textarea style="height: 9em;" name="message" rows="7" cols="76" tabindex="3" class="inputbox"></textarea>
                </div>

reemplazar con esto:

Code: Select all

                <div id="message-box">
                    <textarea style="height: 9em;" name="message" rows="7" cols="76" tabindex="3" class="inputbox2"></textarea>
                </div>

En caso de querer poner el fondo en el MOD Quick Reply v1.6.7 (Como en este foro) abrir el archivo:
root/styles/tu estilo/template/quick_reply.html

buscar esto:

Code: Select all

class="inputbox">{MESSAGE}</textarea>

reemplazar con esto:

Code: Select all

class="inputbox2">{MESSAGE}</textarea>

guardar archivos, actualizar el tema, limpiar el cache del foro y refrescar el navegador para ver los cambios