Advertisement:

Author Topic: Editar el color del BBC en la caja de edición de POSTS  (Read 189 times)

Offline Madirex

  • Jr. Member
  • **
  • Posts: 140
Editar el color del BBC en la caja de edición de POSTS
« on: August 06, 2017, 09:58:48 AM »
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

Offline d3vcho();

  • Localizer
  • SMF Hero
  • *
  • Posts: 2,110
  • Gender: Male
  • Be prepared for hell
    • d3vcho on GitHub
    • @SMF_ES on Twitter
Re: Editar el color del BBC en la caja de edición de POSTS
« Reply #1 on: August 06, 2017, 12:03:26 PM »
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]
// 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]
// 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]
$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]
// 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]
// 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.
Programmer (noun.)
A person who fixed a problem you don't know you have, in a way you don't understand.


¡Únete al canal IRC de SMF en español! #smf-es en Freenode
Sigue a @SMF_ES en Twitter para enterarte de todas las novedades de SMF

Offline Madirex

  • Jr. Member
  • **
  • Posts: 140
Re: Editar el color del BBC en la caja de edición de POSTS
« Reply #2 on: August 06, 2017, 01:08:07 PM »
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]
// 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]
// 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]
$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]
// 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]
// 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!