Añadir iconos en lugar de textos en el editor?Tema Solucionado

[chomoloko]

Buenas! Tengo una duda, la cosa es que le he dado mil vueltas y ya no se que buscar.
URL: (Es un foro de prueba para dejar listo el que voy a abrir a partir de este mes)
Estilo(s) usuado(s): Simplicity AQUA
Extensiones instaladas: Quickreply Reloaded
Versión de phpBB: 3.2
Servidor: Hostinger.es Gratuito
Es instalación limpia, nueva, sin actualizar.

El caso es que no me gusta que en el quickreply, y en el editor, aparezcan mis bbcodes como texto, y me gustaría saber si se pueden poner iconos y cómo hacerlo?.

No me gustaría cambiar de editor de texto, ya que la mayoría que he probado me van mal.
Ejemplo de como se ve:


Ejemplo de cómo quiero que se vea:




Perdonad si va en el foro equivocado pero no se ya donde buscar y no sé si incluso es posible, muchas gracias a todos.

[AlfredoRamos]

No es posible de manera "oficial" pero puedes conseguirlo con CSS, es lo que hago en mi extensión de spoiler.

https://github.com/AlfredoRamos/phpbb-e ... ss#L48-L64
https://github.com/AlfredoRamos/phpbb-e ... ss#L31-L37

En tu caso sería algo como lo siguiente:

Código: Seleccionar todo

.bbcode-youtube {
	font-size: 0;
	letter-spacing: -1px;
	color: transparent;
}

.bbcode-youtube::before {
	content: "\f16a"; /* youtube-play */
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.3;
	font-family: FontAwesome;
	text-rendering: normal;
	letter-spacing: normal;
	padding: 0 2px;
	color: red;
}

No lo he probado, pero eso debería funcionar.

[chomoloko]

No es posible de manera "oficial" pero puedes conseguirlo con CSS, es lo que hago en mi extensión de spoiler.

https://github.com/AlfredoRamos/phpbb-e ... ss#L48-L64
https://github.com/AlfredoRamos/phpbb-e ... ss#L31-L37

En tu caso sería algo como lo siguiente:

Código: Seleccionar todo

.bbcode-youtube {
	font-size: 0;
	letter-spacing: -1px;
	color: transparent;
}

.bbcode-youtube::before {
	content: "\f16a"; /* youtube-play */
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.3;
	font-family: FontAwesome;
	text-rendering: normal;
	letter-spacing: normal;
	padding: 0 2px;
	color: red;
}

No lo he probado, pero eso debería funcionar.

Gracias por la respuesta, pero no sabría donde va ese código (lo siento, llevo como 7 años sin tocar nada de codigo) si me puedes dar unos pequeños pasos. Mil gracias.

[J_Sparrow]

@chomoloko , faltan los datos de soporte, leete las <<NORMAS de SOPORTE>> por favor.

[chomoloko]

@chomoloko , faltan los datos de soporte, leete las <<NORMAS de SOPORTE>> por favor.

Por favor, dime si ya está bien, un saludo.

[AlfredoRamos]

@chomoloko podrias agregarlo en los ficheros CSS de tu estilo, obviamente tendrías que hacer lo mismo para cada esilo instalado que tengas. Por ejemplo:

styles/prosilver/theme/icons.css

Código: Seleccionar todo

.bbcode-youtube {
	font-size: 0;
	letter-spacing: -1px;
}

.bbcode-youtube::before {
	content: "\f16a"; /* youtube-play */
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.3;
	font-family: FontAwesome;
	text-rendering: normal;
	letter-spacing: normal;
	padding: 0 2px;
}

styles/prosilver/theme/colours.css

Código: Seleccionar todo

.bbcode-youtube {
	color: transparent;
}

.bbcode-youtube::before {
	color: red;
}

[chomoloko]

@chomoloko podrias agregarlo en los ficheros CSS de tu estilo, obviamente tendrías que hacer lo mismo para cada esilo instalado que tengas. Por ejemplo:

styles/prosilver/theme/icons.css

Código: Seleccionar todo

.bbcode-youtube {
	font-size: 0;
	letter-spacing: -1px;
}

.bbcode-youtube::before {
	content: "\f16a"; /* youtube-play */
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.3;
	font-family: FontAwesome;
	text-rendering: normal;
	letter-spacing: normal;
	padding: 0 2px;
}

styles/prosilver/theme/colours.css

Código: Seleccionar todo

.bbcode-youtube {
	color: transparent;
}

.bbcode-youtube::before {
	color: red;
}

Perfecto, voy a probar. Para el resto de opciones es igual pero cambiando el nombre del bbcode y en el caso del icono de fontawesome el unicode y el nombre del icono, cierto? Un abrazo, gracias, a ver si tengo suerte.

[chomoloko]

Pufff, imposible, he probado a añadirlo en todos los css y nada de nada, me está sacando de mis casillas esto, me va a explotar la cabeza jajaja. Voy a darle más vueltas a ver...

[J_Sparrow]

Por favor, dime si ya está bien, un saludo.

Si, de momento es suficiente, pero recuerda adjuntarlos en cada tema que inicies.

[J_Sparrow]

Yo no he tocado nada y si que me salen las imágenes. Las imágenes que tu quieres que salgan se adjuntan solas cuando añades la extensión "Advanced BBCode Box 3.1.4". Esta extensión te añade las imágenes que usa y si tu añades un BBCode, preparas un icono del mismo tamaño que los que hay dentro de la carpeta correspondiente, la llamas igual que el BBCode y automáticamente te aparecen las imágenes.

Mira una captura de la pantalla con esta extensión:



Creo que es esto lo que buscas, lo puedes encontrar en este Foro, <<AQUÍ>>

[chomoloko]

Yo no he tocado nada y si que me salen las imágenes. Las imágenes que tu quieres que salgan se adjuntan solas cuando añades la extensión "Advanced BBCode Box 3.1.4". Esta extensión te añade las imágenes que usa y si tu añades un BBCode, preparas un icono del mismo tamaño que los que hay dentro de la carpeta correspondiente, la llamas igual que el BBCode y automáticamente te aparecen las imágenes.

Mira una captura de la pantalla con esta extensión:



Creo que es esto lo que buscas, lo puedes encontrar en este Foro, <<AQUÍ>>

Si, he probado ya esa extensión y si te digo la verdad no me gusta(no me funciona del todo bien y encima al introducir texto hace una cosa muy rara que es que sólo deja introducir si haces click en una franja oculta en la caja de texto) vamos, cosas raras.... por eso quería añadir mis propios botones (sólo 3 que serian youtube, soundcloud y centrar) que no se por qué no vienen en el editor ni obviamente en el quickreply. El caso es que no me importa que sea imagen o no, me vale el icono de FontAwesome, pero no soy capaz de lograrlo.

[J_Sparrow]

Pues entonces me da que tienes un Foro mal instalado, porque es de lo mas sencillo y normal que te aparezcan las cosas bien, sin zonas ocultas.

[AlfredoRamos]

Perfecto, voy a probar. Para el resto de opciones es igual pero cambiando el nombre del bbcode y en el caso del icono de fontawesome el unicode y el nombre del icono, cierto? Un abrazo, gracias, a ver si tengo suerte.

Para otros BBCode? sería algo similar.

Cuando creas un BBCode el botón genera una clase CSS .bbcode-{nombre}, luego es cosa de elegir el código unicode.

Pufff, imposible, he probado a añadirlo en todos los css y nada de nada, me está sacando de mis casillas esto, me va a explotar la cabeza jajaja. Voy a darle más vueltas a ver...

Recuerda vaciar la caché desde el panel de administración, de otra forma los cambios no se verán reflejados.

[chomoloko]

Perfecto, voy a probar. Para el resto de opciones es igual pero cambiando el nombre del bbcode y en el caso del icono de fontawesome el unicode y el nombre del icono, cierto? Un abrazo, gracias, a ver si tengo suerte.

Para otros BBCode? sería algo similar.

Cuando creas un BBCode el botón genera una clase CSS .bbcode-{nombre}, luego es cosa de elegir el código unicode.

Pufff, imposible, he probado a añadirlo en todos los css y nada de nada, me está sacando de mis casillas esto, me va a explotar la cabeza jajaja. Voy a darle más vueltas a ver...

Recuerda vaciar la caché desde el panel de administración, de otra forma los cambios no se verán reflejados.

Bueno, he vuelto a instalar ABBC3 y parece que, ajustando unos parámetros esta vez no me da ningún fallo... aún me gustaría modificar cosas pero por ahora me sirve. El proyecto que estoy empezando es demasiado grande como que algo falle, y me he metido en esto casi sin tener ni idea (no es que no tenga ni idea es que llevo muchos años parado), pero bueno, me da a mi que me quedan varios meses de merodear por aquí para aprender. Aún así gracias por todo. A ver si en un futuro puedo hacer lo que quiero, intentaré hacer pruebas, pero aún estoy muy muy verde. A ver si encuentro a algun programador que me eche una mano, SALUDOS!.