Cómo cambiar el color de fondo del editor visual en WordPress

Question

Cómo cambiar el color de fondo del editor visual en WordPress

9 ago 2011, 02:53:25

Vistas: 15.8K

Votos: 12

Tengo un sitio en WordPress donde el color de fondo es negro y el texto es blanco. El sitio funciona bien, pero es complicado editar contenido en el editor visual porque el fondo es blanco (el mismo color que el texto). Termino diciéndoles a los usuarios que usen la vista HTML o que escriban el contenido en texto negro y luego lo cambien a blanco al final (¡lo que hace que muchos se asusten pensando que su texto desapareció!).

¿Cómo puedo cambiar el color de fondo del editor a negro (o cualquier otro color) para que el contenido sea legible si el texto debe ser blanco?

Ryan Hayes

223

editor visual

Comentarios

+1 por la buena Pregunta y +1+ por las excelentes Respuestas que obtuvo!

brasofilo

14 jul 2012 19:33:15

Todas las respuestas a la pregunta

Primero, añade un archivo CSS en el directorio de tu tema (lo llamaré tiny.css). Luego añade lo siguiente al functions.php de tu tema:

// Añadir estilos personalizados al editor TinyMCE
if ( ! function_exists('tdav_css') ) {
    function tdav_css($wp) {
        $wp .= ',' . get_bloginfo('stylesheet_directory') . '/tiny.css';
        return $wp;
    }
}
add_filter( 'mce_css', 'tdav_css' );

Finalmente, añade este CSS a tiny.css

.mceContentBody.wp-editor {
    background-color:#000000;
}

... reemplazando #000000 con el código de color HTML del color que prefieras.

GavinR

3.12K

9 ago 2011 03:10:04

Comentarios

Primera regla del hackeo en WP: nunca edites archivos del núcleo. La primera persona que publique la forma correcta de rediseñar el editor obtendrá mi voto.

t31os

9 ago 2011 03:14:16

¡Excelente punto! He modificado esto para que no altere los archivos principales de WordPress.

GavinR

9 ago 2011 03:26:07

Michael 8.41K · Accepted Answer · 2011-08-09T11:38:38Z

similar a la respuesta de GavinR, usando la función de WordPress add_editor_style(); (como se implementa en Twenty Ten y Twenty Eleven)

en el archivo functions.php de tu tema, añade:

add_editor_style();

luego crea un archivo editor-style.css en la carpeta de tu tema:

.mceContentBody.wp-editor {     
  background-color: #000;
  color: #fff; 
}

Michael

8.41K

9 ago 2011 11:38:38