Editar el color del BBC en la caja de edición de POSTS

[Madirex]

Quisiera cambiar el tipo de color de los BBC al publicar un nuevo tema (Donde se cambia el formato)

Hay muchos tipos de colores seleccionables en la caja de selección de colores, pero quisiera customizarlos para agregar algunos que queden bien con mi tema de SMF

He buscado en post.template.php y no he encontrado nada, he mirado los css y tampoco, y no sé donde podría editar los códigos de colores.

Versión de SMF: 2.0.14

[d3vcho]

Bueno... Añadir nuevos colores no es que sea una tarea fácil por lo que te explicaré paso a paso lo que tienes que hacer. Antes de nada, por favor guarda una copia de seguridad de los archivos que vayamos a modificar antes de modificarlos, por si acaso ocurre algo. Los archivos son;

- editor.js (Themes/default/scripts)
- Post.spanish_es-utf8.php (Themes/default/languages)
- GenericControls.template.php (Themes/default)

En primer lugar, ve al archivo editor.js y en la línea 126 verás lo siguiente;

Code Select Expand

// Color maps! (hex => name)
this.oFontColors = {
black: '#000000',
red: '#ff0000',
yellow: '#ffff00',
pink: '#ffc0cb',
green: '#008000',
orange: '#ffa500',
purple: '#800080',
blue: '#0000ff',
beige: '#f5f5dc',
brown: '#a52a2a',
teal: '#008080',
navy: '#000080',
maroon: '#800000',
limegreen: '#32cd32'
}

Aquí tendrás que añadir el color que quieras. Es muy importante seguir el formato que se indica en la primera línea, por lo que tendrás que poner primeramente el nombre del color en inglés y a continuación su código hexadecimal, tal y como he hecho yo con el color "chocolate" (en inglés es lo mismo que en español);

Code Select Expand

// Color maps! (hex => name)
this.oFontColors = {
black: '#000000',
red: '#ff0000',
yellow: '#ffff00',
pink: '#ffc0cb',
green: '#008000',
orange: '#ffa500',
purple: '#800080',
blue: '#0000ff',
beige: '#f5f5dc',
brown: '#a52a2a',
teal: '#008080',
navy: '#000080',
maroon: '#800000',
chocolate: '#d2691e',
limegreen: '#32cd32'
}

Puedes hacer esto todas las veces que quieras y con todos los colores que quieras. Aquí te dejo una página con los nombres en inglés y los códigos hexadecimales de MUCHOS colores.

Ahora, vámonos a Post.spanish_es-utf8.php (o en caso de que no sea spanish_es, spanish_latin). En torno a la línea 27, verás todas las variables de los colores con todas sus traducciones. Esto es lo más fácil, añade una variable $txt con el nombre del color (en inglés) y su traducción a español. En realidad, esta variable se puede añadir en cualquier lugar del archivo, pero mejor la ponemos junto a los demás colores para que esté todo organizado. La variable debería quedar así;

Code Select Expand

$txt['chocolate'] = 'Chocolate';

Por último, vámonos a GenericControls.template.php. Con un editor de código, busca la palabra "yellow" (o cualquier otro color de los ya disponibles, siempre en inglés). Te llevará a esto;

Code Select Expand

// Print a drop down list for all the colors we allow!
if (!isset($context['disabled_tags']['color']))
echo ',
{
sType: \'select\',
sName: \'sel_color\',
oOptions: {
\'\': ', JavaScriptEscape($txt['change_color']), ',
\'black\': ', JavaScriptEscape($txt['black']), ',
\'red\': ', JavaScriptEscape($txt['red']), ',
\'yellow\': ', JavaScriptEscape($txt['yellow']), ',
\'pink\': ', JavaScriptEscape($txt['pink']), ',
\'green\': ', JavaScriptEscape($txt['green']), ',
\'orange\': ', JavaScriptEscape($txt['orange']), ',
\'purple\': ', JavaScriptEscape($txt['purple']), ',
\'blue\': ', JavaScriptEscape($txt['blue']), ',
\'beige\': ', JavaScriptEscape($txt['beige']), ',
\'brown\': ', JavaScriptEscape($txt['brown']), ',
\'teal\': ', JavaScriptEscape($txt['teal']), ',
\'navy\': ', JavaScriptEscape($txt['navy']), ',
\'maroon\': ', JavaScriptEscape($txt['maroon']), ',
\'limegreen\': ', JavaScriptEscape($txt['lime_green']), ',
\'white\': ', JavaScriptEscape($txt['white']), '
}
}';

Esto es ya algo más complicado, ya que hay que tener mucho cuidado de la sintaxis que se usa. Te lo hago directamente para que te fijes qué habría que cambiar exactamente;

Code Select Expand

// Print a drop down list for all the colors we allow!
if (!isset($context['disabled_tags']['color']))
echo ',
{
sType: \'select\',
sName: \'sel_color\',
oOptions: {
\'\': ', JavaScriptEscape($txt['change_color']), ',
\'black\': ', JavaScriptEscape($txt['black']), ',
\'red\': ', JavaScriptEscape($txt['red']), ',
\'yellow\': ', JavaScriptEscape($txt['yellow']), ',
\'pink\': ', JavaScriptEscape($txt['pink']), ',
\'green\': ', JavaScriptEscape($txt['green']), ',
\'orange\': ', JavaScriptEscape($txt['orange']), ',
\'purple\': ', JavaScriptEscape($txt['purple']), ',
\'blue\': ', JavaScriptEscape($txt['blue']), ',
\'beige\': ', JavaScriptEscape($txt['beige']), ',
\'brown\': ', JavaScriptEscape($txt['brown']), ',
\'teal\': ', JavaScriptEscape($txt['teal']), ',
\'navy\': ', JavaScriptEscape($txt['navy']), ',
\'maroon\': ', JavaScriptEscape($txt['maroon']), ',
\'limegreen\': ', JavaScriptEscape($txt['lime_green']), ',
\'white\': ', JavaScriptEscape($txt['white']), ',
\'chocolate\': ', JavaScriptEscape($txt['chocolate']), '
}
}';

Como ves, en la última línea antes del corchete (}), he añadido algo referente a nuestro nuevo color, el chocolate. Para añadir otro color más abajo de cholocate, simplemente copia la línea de chocolate, la pegas debajo y modificas los valores. Por último, añade una coma al final de la línea anterior (como se ve en las líneas anteriores a chocolate) y guarda los cambios. Debería estar listo.

[Madirex]

Bueno... Añadir nuevos colores no es que sea una tarea fácil por lo que te explicaré paso a paso lo que tienes que hacer. Antes de nada, por favor guarda una copia de seguridad de los archivos que vayamos a modificar antes de modificarlos, por si acaso ocurre algo. Los archivos son;

- editor.js (Themes/default/scripts)
- Post.spanish_es-utf8.php (Themes/default/languages)
- GenericControls.template.php (Themes/default)

En primer lugar, ve al archivo editor.js y en la línea 126 verás lo siguiente;

Code Select Expand

// Color maps! (hex => name)
this.oFontColors = {
black: '#000000',
red: '#ff0000',
yellow: '#ffff00',
pink: '#ffc0cb',
green: '#008000',
orange: '#ffa500',
purple: '#800080',
blue: '#0000ff',
beige: '#f5f5dc',
brown: '#a52a2a',
teal: '#008080',
navy: '#000080',
maroon: '#800000',
limegreen: '#32cd32'
}

Aquí tendrás que añadir el color que quieras. Es muy importante seguir el formato que se indica en la primera línea, por lo que tendrás que poner primeramente el nombre del color en inglés y a continuación su código hexadecimal, tal y como he hecho yo con el color "chocolate" (en inglés es lo mismo que en español);

Code Select Expand

// Color maps! (hex => name)
this.oFontColors = {
black: '#000000',
red: '#ff0000',
yellow: '#ffff00',
pink: '#ffc0cb',
green: '#008000',
orange: '#ffa500',
purple: '#800080',
blue: '#0000ff',
beige: '#f5f5dc',
brown: '#a52a2a',
teal: '#008080',
navy: '#000080',
maroon: '#800000',
chocolate: '#d2691e',
limegreen: '#32cd32'
}

Puedes hacer esto todas las veces que quieras y con todos los colores que quieras. Aquí te dejo una página con los nombres en inglés y los códigos hexadecimales de MUCHOS colores.

Ahora, vámonos a Post.spanish_es-utf8.php (o en caso de que no sea spanish_es, spanish_latin). En torno a la línea 27, verás todas las variables de los colores con todas sus traducciones. Esto es lo más fácil, añade una variable $txt con el nombre del color (en inglés) y su traducción a español. En realidad, esta variable se puede añadir en cualquier lugar del archivo, pero mejor la ponemos junto a los demás colores para que esté todo organizado. La variable debería quedar así;

Code Select Expand

$txt['chocolate'] = 'Chocolate';

Por último, vámonos a GenericControls.template.php. Con un editor de código, busca la palabra "yellow" (o cualquier otro color de los ya disponibles, siempre en inglés). Te llevará a esto;

Code Select Expand

// Print a drop down list for all the colors we allow!
if (!isset($context['disabled_tags']['color']))
echo ',
{
sType: \'select\',
sName: \'sel_color\',
oOptions: {
\'\': ', JavaScriptEscape($txt['change_color']), ',
\'black\': ', JavaScriptEscape($txt['black']), ',
\'red\': ', JavaScriptEscape($txt['red']), ',
\'yellow\': ', JavaScriptEscape($txt['yellow']), ',
\'pink\': ', JavaScriptEscape($txt['pink']), ',
\'green\': ', JavaScriptEscape($txt['green']), ',
\'orange\': ', JavaScriptEscape($txt['orange']), ',
\'purple\': ', JavaScriptEscape($txt['purple']), ',
\'blue\': ', JavaScriptEscape($txt['blue']), ',
\'beige\': ', JavaScriptEscape($txt['beige']), ',
\'brown\': ', JavaScriptEscape($txt['brown']), ',
\'teal\': ', JavaScriptEscape($txt['teal']), ',
\'navy\': ', JavaScriptEscape($txt['navy']), ',
\'maroon\': ', JavaScriptEscape($txt['maroon']), ',
\'limegreen\': ', JavaScriptEscape($txt['lime_green']), ',
\'white\': ', JavaScriptEscape($txt['white']), '
}
}';

Esto es ya algo más complicado, ya que hay que tener mucho cuidado de la sintaxis que se usa. Te lo hago directamente para que te fijes qué habría que cambiar exactamente;

Code Select Expand

// Print a drop down list for all the colors we allow!
if (!isset($context['disabled_tags']['color']))
echo ',
{
sType: \'select\',
sName: \'sel_color\',
oOptions: {
\'\': ', JavaScriptEscape($txt['change_color']), ',
\'black\': ', JavaScriptEscape($txt['black']), ',
\'red\': ', JavaScriptEscape($txt['red']), ',
\'yellow\': ', JavaScriptEscape($txt['yellow']), ',
\'pink\': ', JavaScriptEscape($txt['pink']), ',
\'green\': ', JavaScriptEscape($txt['green']), ',
\'orange\': ', JavaScriptEscape($txt['orange']), ',
\'purple\': ', JavaScriptEscape($txt['purple']), ',
\'blue\': ', JavaScriptEscape($txt['blue']), ',
\'beige\': ', JavaScriptEscape($txt['beige']), ',
\'brown\': ', JavaScriptEscape($txt['brown']), ',
\'teal\': ', JavaScriptEscape($txt['teal']), ',
\'navy\': ', JavaScriptEscape($txt['navy']), ',
\'maroon\': ', JavaScriptEscape($txt['maroon']), ',
\'limegreen\': ', JavaScriptEscape($txt['lime_green']), ',
\'white\': ', JavaScriptEscape($txt['white']), ',
\'chocolate\': ', JavaScriptEscape($txt['chocolate']), '
}
}';

Como ves, en la última línea antes del corchete (}), he añadido algo referente a nuestro nuevo color, el chocolate. Para añadir otro color más abajo de cholocate, simplemente copia la línea de chocolate, la pegas debajo y modificas los valores. Por último, añade una coma al final de la línea anterior (como se ve en las líneas anteriores a chocolate) y guarda los cambios. Debería estar listo.

¡Muchas gracias!