Saltar al contenido

Modificando Títulos, Excerpts y mas en los Clusters

marzo 30, 2019
Modificando los Cluster del Orbital Theme Por fin

Ya sé lo que debes estar pensando, ¡Por fin! Y tienes razón me he tardado algún tiempo en subir un video y todo se debe a que he tenido que comprobar que funcione apropiadamente.

La buena noticia es que la espera se ha terminado, hoy Modificaremos los Clusters del Orbital Theme. Comprobado y funcionando en la versión 2.3.2

Primera Parte

Segunda Parte

Para facilitar este tutorial he divido en 4 secciones o partes y que así tú decidas, que utilizar. Para mayores detalles revisa el video.

Modificar el Títulos de los Clusters 2019

Para este ejercicio he creado una página de prueba y algunas entradas de ejemplo. Dirígete a /Apariencia/Personalizar/Css Adicional/ y pega el código CSS que te dejo a continuación.

.entry-title{
font-weight:100;
font-size:1em !important;
margin-top:-.4rem !important;
line-height:2.5rem;
text-align:center;
text-transform:uppercase;
background-color:red;
color:white;
}

Seguro de otros videos reconocerás algunas líneas del código, pero sino es así te explicaré brevemente. El font-weight te permitirá configurar el peso de la fuente; 100, 200, 300, 400, 500, 600, 700, 800 ó 900.

Obviamente dependerá de la fuente que utilices y las variantes que tengas cargadas. Con font-size, podrás aumentar o disminuir el tamaño de la letra.

El margin-top te ayudará con los márgenes, line-height es el interlineado del texto y text-align para definir la alineación del texto left, center, right o justify.

Si deseas modificar como se presenta el texto independientemente de si escribiste con mayúsculas o minúsculas usa text-transform.

Y, finalmente para el color del fondo del fondo usa background-color y el color de la fuente se configura con color.

Modificando los Excerpts o Descripciones de los Clusters 2019

En este apartado nos encargaremos de conseguir que nuestro texto se vea mejor y ordenado. A continuación te dejo el código CSS para que lo pegues en /Apariencia/Personalizar/Css Adicional/.

.wp-block-orbital-cluster>* {
border:2px dashed black;
background-color:white;
margin:30px 0 !important;
padding:30px 0;}
.entry-excerpt p{
text-align:right;
line-height:1.2rem;
background-color:tomato;
color:white;
font-size:.8rem !important;
font-weight:300 !important;
margin:10px 0;
padding:10px 0;}

Seguro, como has notado muchas funciones se repiten del código anterior por ello no te aburriré con explicaciones que no vienen al caso.

El margin y padding te servirán para configurar la distancia con otros objetos tanto hacia el interior como al exterior.

Modificando el Autor, la Fecha y la Categoría de los Clusters 2019

En los clusters de este website suelo utilizar la meta de fecha y categoría pero te explico como modificar los 3 por si tu lo deseas. Ya conoces el procedimiento copia y pega el código siguiente:

.entry-date p, .entry-category p, .entry-category a, .entry-author p{
font-size:.7rem !important;
font-weight:100 !important;
text-transform:uppercase !important;
text-align:left;
line-height:2rem;
background-color:#f1f1f1;
color:black !important;
margin:0 0;
padding:0 5px;}

.entry-author p::before{
content:»Autor: «;}

Lo particular de este código en específico reside en la primera línea, se ha combinado los tres metas para asignarles las mismas modificaciones.

Pero sí, lo que buscas es simplemente afectar a cualquiera de ellos solamente, copia el nombre de su clase y aplícale los códigos que desees.

Modificando el Aspecto de las Entradas de los Clusters de Orbital Theme 2019

Lo primero que te pido es prudencia al implementar estos códigos, por ello he tomado la precaución de previamente asignar un nombre de clase al cluster que deseo modificar.

Así, realizarás las modificaciones hasta estar conforme y seguro de que todo esta en orden. Copia el siguiente código y guíate en el video para explicaciones explícitas.

/*Cluster2Col-Desktop*/
.cluster{
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-47vw;
margin-right:-47vw;}

.cluster .entry-item{
flex-basis:21%;
max-width:21%;
margin-top:1%;
margin-left:1vw;
margin-right:1vw;
padding-left:1rem;
padding-right:1rem;
border:.009rem solid #404040;}

/*.cluster .entry-item:hover{ border:.009rem solid #404040; box-shadow:0.09rem 0.09rem 0.09rem #505050;}*/

/*Tablet*/@media screen and (max-width: 1040px) {
.cluster{
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-45vw;
margin-right:-45vw;}

/*Cluster2ColTablet*/
.cluster .entry-item {
flex-basis:29%;
max-width:29%;
margin-top:1%;
margin-left:1%;
margin-right:1%;
padding-left:.9px;
padding-right:.9px;}

/*Mobile*/@media screen and (max-width: 600px){
/*Cluster2ColMobile*/
.cluster .flex-fluid{
margin-left:1rem;
margin-right:0;}
.cluster{
width:100vw;
position:relative;
left:38%;
right:38%;
margin-left:-38vw;
margin-right:-38vw;}

.cluster .entry-item{
flex-basis:45%;
max-width:45%;
margin-top:1%;
margin-left:1%;
margin-right:1%;
padding-left:10px;
padding-right:10px;
border:0.009rem solid #404040;}}}/*Cluster2ColFin*/
/*.wp-block-orbital-cluster*/

Por favor asegúrate de hacer cambios que entiendas, y en cualquier caso podrías escribirme e intentaré ayudarte. No olvides comentar y compartir.

Christian E. Muñoz

Me gustan las computadoras, el Marketing, Internet y nuevas tecnologías.
¡Vamos lo que se llama un geek!

5/5 (2 Reviews)