Página 1 de 1

Personalizar barra abbc3 - Advanced BBCode Box

Publicado: 28 Oct 2020, 19:24
por karbiko

Bueno, pues ya puestos a retocar el foro, me he propuesto intentar varias cosas respecto a la extensión Advanced BBCode Box (abbc3).

Os explico. Esta es mi barra con los bbcode:
Imagen
Como a todos, en la primera fila de imágenes aparecen el de negrita (B), cursiva, etc...
Y luego, en la segunda fila aparecen otros bbcodes, también relacionados con personalización de texto: además de los que he incluido (center, left, right..) están el subrayado (s), el (sub)y (sup), shadow, fade,...etc.

Me gustaría poder intercambiar alguno de éstos de manera que pasen a estar en la otra fila y/o posición.
Por ejemplo, en la primera fila, quisiera que estuvieran juntos los de imágenes y media (img, media, imgur)..

¿Hay alguna manera de hacerlo?


Una segunda cuestión sería el de poder cambiar el color de las barras para que se asemejaran a los estilos... Sobre todo en este caso, que como vemos es un estilo oscuro (prosilver dark edition) y el color desentona bastante...

este mensaje en las FAQ de esa extensión, pero no me aclaro con lo de los archivos .min.


Y finalmente, la tercera cuestión es la de saber como poner un texto predefinido en el <textarea>, con un color casi imperceptible y que desaparezca en cuanto se pinche en ese recuadro de escritura.
He visto que en el recuadro de la respuesta aparece en inglés, y me gustaría saber dónde está para poder cambiar esa traducción:
Imagen


Personalizar barra abbc3 - Advanced BBCode Box

Publicado: 29 Oct 2020, 19:55
por AlfredoRamos
karbiko escribió: 28 Oct 2020, 19:24

Me gustaría poder intercambiar alguno de éstos de manera que pasen a estar en la otra fila y/o posición.
Por ejemplo, en la primera fila, quisiera que estuvieran juntos los de imágenes y media (img, media, imgur)..

¿Hay alguna manera de hacerlo?

Es posible, pero es un poco más complicado.

Esos se añaden en eventos de plantilla, y en el caso de Imgur no es un BBCode como tal.

Si tienes ganas de experimentar, los botones se pueden modificar en el archivo ext/vse/abbc3/styles/all/template/abbc3_posting_buttons.html

karbiko escribió: 28 Oct 2020, 19:24

este mensaje en las FAQ de esa extensión, pero no me aclaro con lo de los archivos .min.

Te indica que si quieres hacer cambios, los hagas en el archivo .css, y luego que todo esté listo, los "comprimas" con https://cssminifier.com/ y su contenido lo guardes en el mismo archivo con nombre .min.css

Por ejemplo, en tu caso podrías crear un directorio dentro de la extensión con el nombre de tu estilo, y allí modificar el archivo ext/vse/abbc3/styles/all/theme/abbc3_posting.css

Buscar:

Código: Seleccionar todo

.abbc3_buttons_row {
	text-align:left;
	background:#f9fbfd;
	background:-moz-linear-gradient(top,#f9fbfd 0,#d9dde2 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f9fbfd),color-stop(100%,#d9dde2));
	background:-webkit-linear-gradient(top,#f9fbfd 0,#d9dde2 100%);
	background:-o-linear-gradient(top,#f9fbfd 0,#d9dde2 100%);
	background:-ms-linear-gradient(top,#f9fbfd 0,#d9dde2 100%);
	background:linear-gradient(to bottom,#f9fbfd 0,#d9dde2 100%);
	border:1px solid #b4bac0;
	display:block;
	width:80%;
	min-height:30px;
	margin:0!important;
	padding:0 2px
}

Remplazar con:

Código: Seleccionar todo

.abbc3_buttons_row {
	text-align:left;
	background:#272727;
	background:-webkit-gradient(linear,left top, left bottom,color-stop(0, #484848),to(#272727));
	background:-o-linear-gradient(top,#484848 0,#272727 100%);
	background:linear-gradient(to bottom,#484848 0,#272727 100%);
	border:1px solid #333;
	display:block;
	width:80%;
	min-height:30px;
	margin:0!important;
	padding:0 2px
}

Luego copiar el contenido completo de ext/vse/abbc3/styles/all/theme/abbc3_posting.css comprimirlo con herramientas como cssminifier.com y guardar el resultado en el archivo ext/vse/abbc3/styles/all/theme/abbc3_posting.min.css

karbiko escribió: 28 Oct 2020, 19:24

Y finalmente, la tercera cuestión es la de saber como poner un texto predefinido en el <textarea>, con un color casi imperceptible y que desaparezca en cuanto se pinche en ese recuadro de escritura.

La forma más sencilla es colocando un placeholder, aunque puede hacerse con JavaScript también.

https://www.w3schools.com/tags/att_text ... holder.asp

karbiko escribió: 28 Oct 2020, 19:24

He visto que en el recuadro de la respuesta aparece en inglés, y me gustaría saber dónde está para poder cambiar esa traducción:

Me parece que eso proviene de otra extensión, podría ser Quick Reply Reloaded ya que es casi el mismo texto que aparece aquí.


Personalizar barra abbc3 - Advanced BBCode Box

Publicado: 30 Oct 2020, 11:55
por karbiko

Muchas gracias @AbaddonOrmuz .

Como siempre resolutivo y muy bien explicado :clap: :clap: