¿Te gustaría hacer algunos cambios en el diseño de tu sitio?, tal vez cambiar el tamaño de la letra, cambiar algunos colores, etc. Puedes realizar estos cambios con la ayuda del inspector de código de tu navegador y aplicando CSS.
Generalidades
El inspector de código es una herramienta para desarrolladores que viene integrada en los navegadores modernos como Firefox y Google Chrome. Tienes varias formas de abrir el inspector de código, una de mis favoritas es con el acceso por teclas.
- En Mac y Linux: Cmd + Opción + i
- En Windows : Ctrl + Shift + i
Modificaciones CSS usando el inspector de código
El inspector de código tiene varias opciones, sin embargo como herramienta de ayuda para modificar CSS usarás básicamente las opciones de:
- Inspector y Editor de estilos – Firefox
- Elementos y Fuentes – Google Chrome
– Localizando elemento a modificar
Con el ícono de flecha seleccionado, puedes ubicar el elemento de tu página que quieres modificar, verás que se marcará con un fondo diferente y adicionalmente en la parte inferior se seleccionará el código HTML que genera este elemento.
En la siguiente imagen hemos seleccionado el link “Hola mundo” del menú.
Si seleccionas algún elemento, en la parte derecha aparecen las reglas CSS aplicadas al elemento, puedes ver también las pseudo clases CSS, como :hover, :active y :focus
En la imagen anterior puedes ver las clases CSS y el archivo y línea de código en la que se encuentra esa clase, en algunos casos (líneas verdes) las clases no se encuentran en un archivo CSS específico, sino o bien son estilos aplicados en línea sobre el elemento HTML específico, o bien son elementos en línea como parte del documento HTML.
– Realizando los cambios en el Inspector de Código
El inspector de código te ayudará a localizar las clases aplicadas sobre un elemento y qué atributo debes cambiar o agregar. Sin embargo una buena práctica es no modificar directamente esas clases, sino sobrescribir la clases ya sea al final del archivo, o mejor aún, en el caso de WordPress, en el archivo style.css de un child-theme. Es en este punto en donde el tab de Editor de estilos o fuentes, te puede ayudar.
En Firefox verás directamente los archivos .css que carga tu sitio web, y los estilos en línea que están siendo aplicados. En el caso de los archivos puedes averiguar la ruta de los mismos haciendo click con el botón alterno del mouse y abriéndolos en otra pantalla.
En Google Chrome verás que se organizan los estilos cargados por el dominio de origen, en tu caso te interesa los archivos CSS que carga tu dominio, si navegas en las carpetas podrás ubicar el archivo CSS, para averiguar la ruta tienes la opción de hacer click con el botón alterno, verás que tienes una opción muy útil de copiar enlace.
Guardando los cambios de manera permanente
Sin embargo el código que colocaste en el inspector de código es temporal, para hacer que estos cambios se guarden de manera permanente tienes que agregar estos cambios directamente en tu archivo.
Para editar el archivo tienes varias opciones:
- Desde el propio WordPress en: Apariencia > Editor
- Usando algún cliente FTP, localizar el archivo y editar
- Desde el Administrador de Archivos de tu Cpanel
En la siguiente imagen puedes ver la pantalla que aparece cuando usas la opción de WordPress: Apariencia > Editor.
¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.
Artículos Relacionados
(9 votos, promedio: 5,00 de 5)
Cargando...
Hola!
gracias por el tutorial, es muy didáctico.
Tengo una duda:
En un Thema de WP quiero cambiar solo una cosa, el color que sale en todos los botones y resaltes.
El tema no lo permite en personalizar.
Siguiendo el tutorial localizo algún elemento con este color y veo que es el #ff0707;
Voy a WP/Personalizar/Editor de temas/Style.css y cambio todos los valores #ff0707; por #cfd146;
Guardo cambios pero no cambia. Incluso volví a hacerlo añadiendo !important, pero no funciona.
¿Qué estoy mal?
¿Donde debo cambiar ese color?
Perdone mi ignorancia, y de lo atrevido de esa acción basada en el desconocimiento.
El tema en cuestión es este: https://envothemes.com/envo-storefront-pro/
Gracias por su tiempo.
Saludos
Enrique S.
PD: quédense en casa hasta que pase esta pandemia. Si su gobierno no lo recomienda, hágalo igualmente. Le hablo desde la experiencia, estoy de España y las cosas se están poniendo muy feas.
Hola
Supongo que te refieres a los botones de WooCommerce, puedes probar con el siguiente código, cambiando blue y green por algún código de color.
PD. Gracias por la recomendación, efectivamente estamos en cuarentena también en Perú y evitamos salir de casa hasta que pase todo esto.
Saludos.
Hola! que tal? muy interesante toda tu web y que veo que contestas los mensajes. Pues la verdad es que tengo poco tiempo con esto de wordpress pero compre una plantilla que esta en ingles. Podrias ayudarme y asesorarme en varias cosas ? cuanto me saldria ? por ejemplo a poder editar el nombre de algunos botones que aparecen en ingles. Y otra cosa es cambiar los placeholder de la plantila, que dicen ” search for product” y yo los quiero colocar en espanol. Probe con loco translate pero me toma unas cosas si y otras no. SALUDOS Y GRACIAS DE ANTEMANO.
Hola Giancarlos, gracias. Para esto que me comentas comunícate mejor a través del formulario de contacto: https://decodecms.com/contacto/ .Saludos.
Hola Jhon, tengo un problema con , mi web no puedo encontrar como cambiar el color de mi menu, he hecho todo lo debido por wordpress y nada .. el diseñador que tenia le pague y no me termino la pagina, en realidad, tengo problemas con el menu ya que no puedo modificar he hecho mil cosas y aun nada. claro que esta bloqueado o algo no se ven las letras del menu, mi pagina de comercio es http://www.astoreica.com te dará cuenta como esta el menu, saludos esperotu apoyo
Hola, supongo que te refieres al color de fondo de los submenus, prueba agregando el siguiente código CSS:
Si sigues con problemas mejor comunícate a través del formulario de contacto: https://decodecms.com/contacto/
hola, yo puedo saber quien a inspeccionado mi pagina web si es asi como?
Hola, no es posible, salvo lo cuentes como una visita, pero no hay forma de saber si ha visto el código fuente con el inspector.
hola jhon necesito tu ayuda, en producto de la pagina de mi tienda no aparece para comprar por cantidad, ni el signo + tampoco el –
dime que debo de hacer?
agradezco todas tus publicaciones
Hola Jhon nescesiot ayuda. Me aparece esto: Warning: A non-numeric value encountered in /home/computa1/public_html/wp-content/plugins/checkout-fees-for-woocommerce-pro/includes/class-alg-wc-checkout-fees-info.php on line 215
Cómo puedo solucionarlo.
Hola, es una advertencia, igual consulta con los desarrolladores del plugin: checkout-fees-for-woocommerce-pro
Como grabar los cambios efectuados
Hola, puedes replicar el código en el archivo style.css de tu tema hijo, o en la opción CSS del personalizador del tema.
Hola! Muchas gracias por la explicación, es realmente útil. En mi caso, hay un elemento que sale duplicado en la cabecera. Si lo “borro” en la pestaña de inspeccionar aparece correctamente, pero donde lo modifico en wordpress? Gracias!
Hola, tienes que modificar el archivo style.css de tu theme, de preferencia hacer un tema hijo para esto.
Hola me interesa que no se vean esas carpetas de wordpress en source al inspeccionar la web por un tema de seguridad. Sabes como podría hacerlo?
Hola, podrías reducir los archivos estáticos a un solo archivo a través de plugins de optimización, las carpetas de contenido algunas las puedes cambiar de nombre, por ejemplo la de plugins y de uploads, sin embargo difícilmente podrás ocultar las carpetas completamente.
Tendrías una opción de hacerlo si sólo usas WordPress como un servidor y usar su API Rest y construir tu front-end con Gatsby
Hola Interesante todo esto que explicas a la verdad esta muy bueno.
Ahora bien tengo una duda que preguntarte.
En mi sitio web tengo un problema con el botón de mi cuenta ubicado al lado del carrito resulta que en mi pagina de inicio me sale oculto y sin embargo en mis demás paginas me sale visible y estoy buscando por el inspector de código para ver que sucede pero realmente no logro determinar cual es el problema.
Espero puedas ayudarme a descifrar esta interrogante y esta situación que se me hecho un gran problema y que quizás la solución es sencilla pero no logro encontrarla.
De antemano muchas gracias por tu ayuda y por este tutorial.
Saludos
Eduardo
Hola, es como si cargara varias veces diferentes iconos para el usuario pero ninguno de ellos corresponde con el archivo de fuente, consulta con los desarrolladores de tu theme ya que es posible que sea un bug.
Necesito poner unos párrafos adicionales en Html a un tema ya realizad por no es posible no se si se pueda hacer con un plugin o algo adicional
Hola, para agregar código HTML revisa si tienes widgets que se muestren en donde quieres, sin embargo lo más probable es que termines modificando el tema o usando alguno de los hooks (en caso tenga).