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.

Imagen de fondo en el editor de las respuestasTema Solucionado

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
Cerrado
Avatar de Usuario
DaVidU
Ex Staff
Mensajes: 776
Registrado: 08 Oct 2009, 12:24
Nombre real: David
Ubicación: Barcelona-España
Contactar:

Imagen de fondo en el editor de las respuestas  Tema Solucionado

Mensaje por DaVidU » 14 Oct 2014, 19:50

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

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

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


Datos de mi foro en caso de soporte:
URL: http://coloreatuforo.com
Versión phpBB: phpBB 3.0.8
MODs Instalados: + de 100 MODs
Plantilla(s) usada(s): Prosilver modificada
Servidor: Linux
Actualización desde otra versión: 3.0.1
Conversión desde otro sistema de foros: No


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Cerrado