Cómo añadir espacio entre título y resumen en diapositivas

  • Autor Autor Josetxo
  • Fecha de inicio Fecha de inicio

Josetxo

Dseda
Hola amigos,


Me pregunto si es posible dejar un espacio o dos entre el titulo y el resumen del contenido del pase de diapositivas, como podéis ver en esta imagen esta casi pegado y estéticamente no me gusta nada, me gustaría que quedara como las entradas, con un poco mas de espacio entre texto y explicación:


Uso el theme Graphene, por si es de ayuda.
El blog es: notasdehumo.com



Si alguien sabe ayudarme, gracias por adelantado!!
 
Última edición:
Ciao

Ayudarte con precision és dificil porque has deshabilitado el boton derecho del raton, pero la solucion pasa por añadir un salto de linea o dos debajo del titulo.
 
Federico Piccoli dijo:
Ciao

Ayudarte con precision és dificil porque has deshabilitado el boton derecho del raton, pero la solucion pasa por añadir un salto de linea o dos debajo del titulo.
Hacer clic para expandir...

Gracias Federico,

Soy algo novato con WP y realmente no se donde debo modificar para que aparezca bien, he deshabilitado el pluging de proteccion por lo que el botón derecho ya funciona por si puedes ayudarme con esto.

Las entradas tienen espacios, pero en el general aparece así de mal y es lo que no se corregir
 
Hola,


Dentro de tu archivo: style.css puedes modificar el estilo para el H2 del slider.


Busca donde dice:


Insertar CODE, HTML o PHP: 
.slider_post h2 {
    border-bottom: none;
}

y añade la siguiente línea:


Insertar CODE, HTML o PHP: 
margin: 0 0 1em 0;


Esta línea le da una línea de texto de separación. Puedes jugar un poco con el valor para aumentar o disminuir el espacio. (solo cambia el valor de 1em por el que quieras, ejemplo: 0.5em para la mitad de una línea de texto)


Finalmente te debe quedar así:


Insertar CODE, HTML o PHP: 
.slider_post h2 {
    border-bottom: none;
    margin: 0 0 1em 0;
}

Otra opción es modificar (siempre dentro del archivo style.css) el estilo para el texto dentro del slider. Busca la donde dice:

Insertar CODE, HTML o PHP: 
.slider_post_entry p{
	margin-bottom: 10px;
}

y añade la línea:

Insertar CODE, HTML o PHP: 
	margin-top: 2em;
con lo que finalmente te quedaría así:

Insertar CODE, HTML o PHP: 
.slider_post_entry p{
	margin-bottom: 10px;
	margin-top: 1em;
}


(puedes simplificar el estilo del margen en una sola linea: margin: 10 0 1em 0; si lo prefieres)


Espero que te sea de utilidad.


Saludos.
 
Última edición:
Me ha sido de muchísima ayuda amigo, gracias de corazón :love_heart:

Espero no abusar, pero veo ahora que queda bastante hueco entre la foto y el texto que aparece en el pase de diapositivas y la barra inferior de esta, hay alguna forma de eliminar esos 2 o 3 espacios en blanco que quedan? se que se reduciría el tamaño del pase de diapositivas pero creo que podría quedar bastante mejor.

Bueno, muchas gracias 🙂
 
En tu theme, busca el archivo llamado: SINGLE.php.

Abrelo. Localiza esta linea de código: <?php the_content(''); ?>

Luego, justo antes, coloca lo siguiente: <br>

Debería quedar así:

<br>
<?php the_content(''); ?>


O si quieres mas espacio, colocas dos:

<br><br>
<?php the_content(''); ?>

Con esto, añades el espacio que quieras entre el titulo y el contenido sin tener que poner mas pesado el css...
 
Hola,

Para hacer el cambio que quieres, dentro del style.css busca la línea donde dice:
Insertar CODE, HTML o PHP: 
.sliderpost_featured_image {
	margin: 20px 1em 1em 20px;
}

y modifica el primer "1em" que está en la fila y ponle el espacio que quieras; por ejemplo: 0.5em para la mitad de espacio, 0.33em para un tercio de espacio.

Acá un ejemplo, para tener la mitad del espacio a la derecha:

.sliderpost_featured_image {
margin: 20px 0.5em 1em 20px;
}


Juega un poco con los valores hasta tener el espacio que quieres.

Saludos.
 

Localicé y modifique el valor en varias ocasiones, pero no veo cambios (o por lo menos no los que yo busco).

Ahora no se si estoy haciendo algo mal o si me he explicado mal, por si acaso hice una nueva captura de pantalla indicando con flechas el espacio que quiero reducir (espero que no te moleste)




Salud
 
Última edición:
Hola,

Lo siento... no te había entendido bien (fui mi error), ahora que veo la imagen con las flechitas entendí bien.

Lo que tienes que hacer es modificar en style.css lo siguiente:

Donde dice:

Insertar CODE, HTML o PHP: 
.featured_slider [B]Enlace eliminado[/B]  {	background: [B]Enlace eliminado[/B] ;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	height: 240px;
	width: 100%;
}

modifica el valor de height y ponle el valor que tú quieras para el espacio.

Por ejemplo, con height: 180px; te deja el texto pegado con un pequeño espacio con la linea verde. Aquí puedes ver como queda el código:

Insertar CODE, HTML o PHP: 
.featured_slider [B]Enlace eliminado[/B]  {	background: [B]Enlace eliminado[/B] ;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	height: 180px;
	width: 100%;
}

Repito: juega un poco con los valores de height para conseguir el espacio que quieras. Y ten en cuenta que en lo posible siempre es mejor hacer los cambios en style.css y no tocar otros archivos (siempre en lo posible) porque es más fácil corregir los cambios y no afectar la distribución original del theme.

Saludos.
 
Bizware, mil gracias por tu ayuda 🙂

Aquí tienes un amigo (algo novato pero tiempo al tiempo)
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

¿Cómo mantener pase de diapositivas al cambiar a página estática?
Respuestas
0
Visitas
630
Josetxo
Cómo ajustar tamaño texto en Style.css para pase diapositivas?
Respuestas
9
Visitas
903
Josetxo
Cambiar color de títulos en pase de diapositivas
Respuestas
0
Visitas
416
Josetxo
Menú
Acceder
Registro