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.1.4

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!

Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentarios (6)

Muchas gracias Cristian! Sus clases me han ayudado mucho a modificar el theme y dejarlo más a mi gusto.

Si me permite una pregunta, cómo hago para modificar el thumbnail que orbital va a buscar cuando elijo que un cluster se presente como una columna (o sea, coagindo todo el ancho de contenedor)? Es que tengo subidas las imágenes originales a 720×401 px pero cuando se da ese escenario, orbital pilla la versión 329X200, la amplia e quedando esta pixelada. Porque no coge directamente la que tiene mas resolución? Tienes idea de cómo solucionar eso? Muchas gracias y un saludo.

Responder

Hola Antonio,
Comprendo tu problema, pero no creo que exista un método para elegir otra resolución sin modificar el código fuente del Orbital.
Te dejo un video que habla de las imágenes, quizá te ayude. https://ichrissm.com/template/imagenes-perfectas-siempre/

Saludos,
CM

Mil gracias por tu pronta respuesta!!
Te comento que en mi plantilla (ORBITAL) no veo la pestaña de “avanzado”. Me puedes indicar dónde es que la ves tú?

Responder

Hola Daniel,

Claro, mira el video PARTE 2 ▶︎ Modificando los Clusters ◀︎ POR FIN ☞ ORBITAL THEME CSS en el segundo 37 explico justamente como agregar esas clases diferentes.

Saludos,

CM

Hola Enhorabuena por tu trabajo!!!
Quisiera saber cómo puedo establecer distintas configuraciones en los clusters, por ejemplo 3 tipos de clusters. No sé cómo diferenciarlos en el apartado de CCS ADICIONAL.
Un abrazo y gracias anticipadas!!

Responder

Hola Daniel,
Si te gustaría agregar diferentes css a los clusters. Debes asignarle una clase “nombre” diferente a los clusters.
Debes seleccionar el cluster, y en la pestaña “avanzado” agregas un nombre.

Después, en el css adicional, puedes agregar el código que afectará solo a los clusters que tengan el nombre designado.

Por ejemplo:
Supón que tienes 3 cluster, con nombres de clases (cluster1, cluster2 y cluster3);

El css adicional para modificar el tamaño y espesor del título sería:
.cluster1 .entry-title{font-weight:100; font-size:1em !important;}

Espero haber respondido a tu consulta.

Saludos,
CM