Imagen de fondo en el editor de las respuestasTema Solucionado

[DaVidU]

Autor: DaVidU
Url del Autor http://www.coloreatuforo.com
Basado en: PROSILVER
Descripción y uso:
Pon una imagen de fondo como más te guste en el editor de las respuestas, con este tutorial podrás poner la imagen donde y como más te guste.

Screenshot:


Tutorial:
Primero de todo la imágen a usar, en mi caso esta:


En este caso la llamaremos bg_inputbox2.png

Se ha de guardar la imagen 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:

Código: Seleccionar todo

/* 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:

Código: Seleccionar todo

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

[/nota]

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:

Código: Seleccionar todo

class="inputbox">{MESSAGE}

Reemplazar con esto:

Código: Seleccionar todo

class="inputbox2">{MESSAGE}

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

Buscar esto:

Código: Seleccionar todo

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

reemplazar con esto:

Código: Seleccionar todo

				<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 abrir el archivo:
root/styles/tu estilo/template/quick_reply.html

Buscar esto:

Código: Seleccionar todo

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

Reemplazar con esto:

Código: Seleccionar todo

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

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