Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Estilos CSS de los elementos del post

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
Continuaremos ahora con los estilos relacionados con los propios contenidos del post, que por extensión van a ser las etiquetas HTML que se usarán en todo el sitio así que, en el fondo, vamos a trabajar en la personalización de aspecto de etiquetas en el tema.

Transcripción

Cuando ya tenemos formateados los posts, lo siguiente suele ser formatear los contenidos de estos posts. En realidad, no vamos a tener un sitio concreto donde trabajar con el formateo de cada uno de esos elementos, pero sí vamos a tener muchos sitios que van afectar a todo lo global. Es que al final en este tipo de formateo en lo que tenemos que pensar es en etiquetas y aplicar el formato para las etiquetas concretas. Tenemos una página de las que se han creado, gracias a la importación que es Markup HTML Tags and Formatting y esta es ideal para hacer experimentos precisamente con ello. Porque tenemos todos los encabezamientos posibles, tenemos diferentes etiquetas para trabajar con tablas, con listas de elementos, etc. Entonces, es un sitio ideal para empezar a formatear. Voy abrir, utilizando la mitad de pantalla de NetBeans y gracias a él, pues, voy a poder ver un poco lo que voy haciendo. Entonces, ¿con qué debería de tratar? Bien, lo primero, debería de tener las variables a mano porque estas variables van a servir para reutilizar códigos en diferentes elementos. No se trata de tener elementos con valores concretos sino más bien de tener elementos con variables que luego sean fácilmente modificables. En segundo lugar, esto es una cuestión de gustos pero yo, personalmente, suelo hacer modificaciones nada más empezar con los encabezamientos y con etiquetas relacionadas con el texto. Bien, pues, dentro de tipography en headings tengo estas etiquetas y, en concreto, pues, por ejemplo, quiero hacer que el h1 tenga el mismo color que tiene el encabezamiento de la parte de arriba el header de fondo. Bueno, no hay problema, tengo una variable color_skin que puedo copiar y que puedo aplicar a la propiedad color. Inmediatamente me recarga y ahí se puede ver no mucho, porque es parecido, pero se puede ver. Igual que estoy trabajando con los headings también, puedo querer trabajar con diferentes tipos de texto con negritas, con cursivas, etc. y para ello tengo copy. Dentro de este copy, pues, tengo para párrafo, por ejemplo, para address, pre, big o cualquier otro selector aplicado a una etiqueta. Otros elementos que, también, se suelen modificar muchísimo son los links; estos links van a estar dentro de navigation links y, entonces, aquí, bueno, tengo las opciones que tiene por defecto con el color_link y demás, pero puedo añadir otras características, por ejemplo, pues el text_decoration que sea ninguna. Bien, y aquí estamos viendo cómo ha cambiado ese elemento. Algunos de los elementos que voy a cambiar también, van a tener repercusiones en otras partes. Por ejemplo, también, otra cosa que quiero cambiar es el color_link, aquí, en vez de color_link, podría sustituirlo y podría ser que fuese, pues, el color content_links que es un color rojo en vez de azul. Lo que pasa es que si yo hago eso, me va cambiar estos links en este punto concreto y todos los demás elementos que utilizan el color_links seguirán utilizando el azul. Si yo lo que quiero es que todos los enlaces, en realidad, todos los elementos que deberían de utilizar el color_link tengan el mismo color, tengo otra opción y es copiar esta variable, irme a donde tengo los links que aquí están color_ link color_link-visited y color_link-hover y en todos ellos sustituir los valores concretos por esta variable. Esta variable, para dejar el código perfecto la pongo un poco más arriba, guardaría y, ahora, todos los links y todos los elementos que dependan de esos links van a tener ese color. Aquí los vemos, aunque, sin embargo, los que he configurado yo por libre, en este caso en el Header van a seguir manteniendo, también, su propio aspecto. Otros elementos que suele hacer falta modificar ya que estoy con estos links... voy a cerrar este navigation... son las listas, dentro de elements lists. Aquí tengo varias listas. Bien, yo podría hacer modificaciones sobre esas listas directamente. Podría, pues por ejemplo, pedir que no tuviesen ningún tipo de decoración, etc. --voy a cambiarlo, de hecho--. Lo que pasa es que aquí tengo que andarme con cuidado y es que si yo hago modificaciones en esas listas, también esas listas son globales y pueden verse reflejadas en los elementos que tengo dentro de los menús. Así que, tengo que tener cuidado con los cambios que haga en este punto. Una buena forma de trabajar es utilizar clases que se usan dentro de ese menú. Por ejemplo, todos los menús están metidos dentro de un contenedor que utiliza la clase menu; entonces, puedo utilizar esa estructura para definir qué es lo que tiene que ocurrir en las listas y qué es lo que tiene que ocurrir en las listas que están metidas dentro del menú. Asi, por ejemplo, pues, en este caso además de list_ style-none pues, puedo añadirles un color. Puedo, también, añadirles color de fondo. Añadirles un poco de padding para que tengan un aspecto parecido al que tenemos dentro de la información de meta y luego en el caso de las listas de menú, lo que tendré que hacer es aplicar también, la propiedad específica que sirva para desactivar un poco las clases que he añadido. Así, este menú va seguir manteniendo el mismo aspecto y, sin embargo, en la parte de abajo podemos ver cómo las listas se están formateando correctamente. Y, ahora, se trataría de seguir el mismo procedimiento con el resto de elementos. Por ejemplo, con las tablas pues, tengo un archivo dentro de elements que sirve para trabajar con esas tablas. Para trabajar con los menús, que esto, también, es importante pues, dentro de navigation, aparte de links, tenemos menus y este va servir para hacer modificaciones sobre los distintos menús que no haya yo montado, quiero decir, sobre el que no haya creado selectores específicos como he hecho, por ejemplo, dentro del Header. Aplicar el resto de estilos, entonces, para darle formato a los contenidos ya simplemente va ser algo trivial; va seguir archivo por archivo haciendo los cambios sobre las etiquetas que quiero modificar.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017
Duración:4:16 horas (48 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.