Altura de cabecera plantilla blogger (modificar)

leo01 · 30 Oct 2018

Hay una plantilla blogger que estaba pensando usar pero reduciendo la altura de la cabecera. La descargué y estoy mirando el codigo pero no veo en que parte puedo modificar la altura.

La plantilla es esta: Compact - HTML5ISM

alguien encuentra la parte del codigo donde se especifica la altura? gracias

QuesoConJamon · 30 Oct 2018

quitale el float:left al header y dale un height

J0ss · 30 Oct 2018

También puedes cambiar estos valores:

header {
background-image: url("../images/overlay.png"), url("../images/background.jpg");
background-color: #23b5ab;
background-size: cover !important;
padding: 38px 0px 20px 0px; /* Antes padding: 38px 0px 230px 0px; */
float: left;
width: 100%;
background-position: center top;
background-attachment: fixed;
}

.home-screen {
float: left;
width: 100%;
margin: 50px 0px 0px 0px; /* Antes margin: 150px 0px 0px 0px; */
}

Y quedaría algo así:

leo01 · 30 Oct 2018

J0ss dijo:
También puedes cambiar estos valores:

muchas gracias J0ss :encouragement:

Es posible esto otro que quiero hacer? Aumentar el tamaño de la letra sin que aumente el tamaño del botón (o sino achicar la altura del botón sin que se achique la letra)

belze7 · 30 Oct 2018

leo01 dijo:
muchas gracias J0ss :encouragement:

Es posible esto otro que quiero hacer? Aumentar el tamaño de la letra sin que aumente el tamaño del botón (o sino achicar la altura del botón sin que se achique la letra)

Ver el archivo adjunto 127888

Para cambiar el tamaño del boton cambia el padding:

.button a {
background-color: #23b5ab;
color: #fff;
text-decoration: none;
padding: 12px 13px;
font-size: 14px;
text-transform: uppercase;
border-radius: 5px;
font-weight: bold;
letter-spacing: 1px;
display: inline-block;

De esa forma de queda un buen tamaño. El valor original era de 20px y 30px, por eso se ve grande.

En cuanto a la letra modifica lo siguiente a tu gusto:

.big a {
font-size: 25px;
}

Con 25 ya es suficientemente grande, siendo que el valor original es de 17px.

Y para lo que sea que quieras hacer usa el botón secundario en el elemento que quieres modificar y luego "inspeccionar elemento" para ver que tienes que modificar exactamente.

leo01 · 30 Oct 2018

belze7 dijo:
Y para lo que sea que quieras hacer usa el botón secundario en el elemento que quieres modificar y luego "inspeccionar elemento" para ver que tienes que modificar exactamente.

Muchas Gracias belze7 . Cuando hago "inspeccionar elemento" veo todo lo que comentas, pero en la plantilla descargada no se visualiza.

Esto es lo que aparece en el html de la plantilla:

/*=====================================
= Button
=====================================*/
input[type="submit"], input[type="reset"], input[type="button"], .button { -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; background-color: #23b5ab; border-radius: 4px; border: 0; color: #ffffff !important; cursor: pointer; display: inline-block; font-weight: 700; height: 3.15em; line-height: 3.25em; padding: 0 1.1em; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
input[type="submit"] a, input[type="reset"] a, input[type="button"] a, .button a { color:#fff; text-decoration:none; } input[type="submit"]:hover , input[type="reset"]:hover , input[type="button"]:hover , .button:hover { background: #111; } .big{font-size:18px;}

belze7 · 30 Oct 2018

leo01 dijo:
Muchas Gracias belze7 . Cuando hago "inspeccionar elemento" veo todo lo que comentas, pero en la plantilla descargada no se visualiza.

Esto es lo que aparece en el html de la plantilla:

/*=====================================
= Button
=====================================*/
input[type="submit"], input[type="reset"], input[type="button"], .button { -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; background-color: #23b5ab; border-radius: 4px; border: 0; color: #ffffff !important; cursor: pointer; display: inline-block; font-weight: 700; height: 3.15em; line-height: 3.25em; padding: 0 1.1em; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
input[type="submit"] a, input[type="reset"] a, input[type="button"] a, .button a { color:#fff; text-decoration:none; } input[type="submit"]:hover , input[type="reset"]:hover , input[type="button"]:hover , .button:hover { background: #111; } .big{font-size:18px;}

Creo que están así cuando están comprimidas para tener mayor velocidad o algo así, pero además, también es normal que tengan más secciones, es decir, que en esa parte que copiaste no esté el codigo que quieres modificar sino que está en otra parte de la plantilla. En ese caso, cuando estés en la parte donde editas la plantilla usa "control + F" y escribe las partes que quieres modificar:

Para las partes que te pase usa control + F y escribe:

".button a"

y cambias lo que tengas que cambiar, el padding en este caso y luego

".big a"

Se pueden repetir varias veces, simplemente busca hasta que encuentres el indicado.

leo01 · 30 Oct 2018

belze7 dijo:
Creo que están así cuando están comprimidas para tener mayor velocidad o algo así, pero además, también es normal que tengan más secciones, es decir, que en esa parte que copiaste no esté el codigo que quieres modificar sino que está en otra parte de la plantilla. En ese caso, cuando estés en la parte donde editas la plantilla usa "control + F" y escribe las partes que quieres modificar:

Para las partes que te pase usa control + F y escribe:

".button a"

y cambias lo que tengas que cambiar, el padding en este caso y luego

".big a"

Se pueden repetir varias veces, simplemente busca hasta que encuentres el indicado.

el tamaño de la letra lo pude modificar sin problemas, pero lo de "padding" no lo logré. Lo unico que está visible es:

padding: 0 1.1em;

será que el autor de la plantilla no permite que se modifique?

belze7 · 30 Oct 2018

leo01 dijo:
el tamaño de la letra lo pude modificar sin problemas, pero lo de "padding" no lo logré. Lo unico que está visible es:

padding: 0 1.1em;

será que el autor de la plantilla no permite que se modifique?

Cuando lo revise, lo encontré con lo de "inspeccionar elemento" y si está ahí, definitivamente tiene que estar en la plantilla.

Algo más directo que se me ocurre es que uses control + F y escribas sin comillas: "padding: 20px 30px;" o "padding:20px 30px;". Nota el cambio en los espacios y si no aparece así varia la búsqueda, pero ahí debe de estar.

leo01 · 30 Oct 2018

belze7 dijo:
Cuando lo revise, lo encontré con lo de "inspeccionar elemento" y si está ahí, definitivamente tiene que estar en la plantilla.

Algo más directo que se me ocurre es que uses control + F y escribas sin comillas: "padding: 20px 30px;" o "padding:20px 30px;". Nota el cambio en los espacios y si no aparece así varia la búsqueda, pero ahí debe de estar.

yo tambien pensaba que con "control f" tenia que aparecer pero no hubo manera. Lo dejo así, muchas gracias igualmente por tomarte el tiempo de responder :encouragement:

belze7 · 30 Oct 2018

leo01 dijo:
yo tambien pensaba que con "control f" tenia que aparecer pero no hubo manera. Lo dejo así, muchas gracias igualmente por tomarte el tiempo de responder :encouragement:

Claro, no hay de que.

Solo una ultima recomendación. Una forma de modificarlo de golpe sería usar un media query (o algo así se llaman)
@ media screen and (max-width: 1110px) {
.button a {padding: 12px 13px;}
}

Ponlo así en tu css (el media y el arroba van juntos, pero aquí en el foro me lo toma como una cita a un usuario) y en resoluciones de 0 a 1110px se debería ver pequeño el boton, y más grande de 1110px va a regresar a su tamaño normal. En este caso puedes mover el max-width a tu gusto.

Altura de cabecera plantilla blogger (modificar)

leo01

QuesoConJamon

J0ss

leo01

belze7

leo01

belze7

leo01

belze7

leo01

belze7

Temas similares