Editar tipos de letra y estilos con CSS en WordPress

Editar tipos de letra y estilos con CSS en WordPress

15 julio, 2018 0 Por Pedro C. Medina

[vc_row][vc_column][vc_column_text]A veces, necesitamos darle un “estilo” diferente a ciertas partes de nuestro wordpress. Así podremos mejorar el aspecto del tema de wordpress que tenemos instalado.

 

Dentro de wordpress tenemos un editor de código dentro de las opciones del tema que tengamos instalado. Si lo hacemos a través de las opciones que nos ofrece el propio tema podremos editar el código CSS desde ahí, esta opción suele llamarse CSS personalizado.

 

También podremos modificar los estilos de nuestro wordpress a través del editor de código que nos proporciona el propio WordPress, dentro de los “Ajustes”, en la opción “Editor”.

 

Estas modificaciones en el CSS nos darán la posibilidad de cambiar estilos y fuentes de los principales elementos del contenido de nuestra web, por ejemplo, el color de los enlaces, los títulos, o partes del contenido.

Modificar la tipografía principal de wordpress

Para realizar esto, lo más fácil es editar la clase para el elemento body, así podremos usar una fuente para todo el contenido.

Dentro del archivo css (lo más probable es que se llame style.css) localizamos la etiqueta body, que puede ser por ejemplo:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

[css]

body {

font-family:Trebuchet Ms,Arial,Verdana,sans-serif;

}

[/css]

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Los atributos dentro de la propiedad font-family son los que se encargan de definir la fuente usada, se ponen varias fuentes para poder usar las fuentes instaladas, y en el caso de que no esté instalada alguna de las fuentes, cogerá la última, la cual es sans-serif que está por defecto en todos los navegadores.

Para modificar dichas fuentes es tan fácil como elegir la serie de fuentes que deseemos:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

[css]

body {

font-family:Calibri,Arial,Verdana,sans-serif

}
[/css]

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Modificar el estilo principal de los títulos de wordpress

Para modificar los títulos, necesitamos editar la clase de la etiqueta h1, en caso de que no exista o queramos editar algún título en concreto, podremos crear una clase.

En el caso de wordpress, suele existir una etiqueta que agrupa el contenido de nuestra página de wordpress, normalmente su id es “content”

Así que por ejemplo:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

[css]

#content h1 {

font-style:italic;

Font-weight:bolder;

font-size:25px;

font-color:#eaeaea;

font-family:’Trebuchet Ms’,sans-serif;

}

[/css]

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Además de poder definir la fuente, podemos definir una serie de propiedades que nos facilitarán la edición a nuestro gusto de dichos títulos.

CSS nos brinda una infinidad de propiedades para modificar estas etiquetas nuestro gusto.

 

Modificar el estilo principal de los títulos de wordpress

 

Si quisiéramos modificar el resto de etiquetas de título, como los h2, h3,etc.. O por ejemplo los enlaces, podemos hacer los mismo que hemos realizado anteriormente.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

[css]

body h2, body h3, body h4, body h5, body h6 {

font-style:normal;

Font-weight:600;

font-size:25px;

font-color:#eaeaea;

font-family:’Trebuchet Ms’,sans-serif; }

/*Para editar los enlaces*/

#content a {

font-weight:400;

color:#999999

}
[/css]

[/vc_column_text][/vc_column][/vc_row]

¡Comparte y ayuda!