En la comunidad
Todo Blogger en español, se ha estado preguntado cómo cambiar ciertas cosas en el diseño de la plantilla "
Magazine" de las vistas dinámicas.
A raíz de estar probando en distintos navegadores algunas cosas, me di cuenta de algunos detalles que hoy veremos cómo mejorar/cambiar, y también pensé en otras cosas que pudieras estar interesado en personalizar si usas las vistas dinámicas y hoy las voy a compartir contigo.
Aunque la mayoría de los trucos son para la plantilla "Magazine", algunos de ellos afectan al resto de las vistas dinámicas.
Todo el código CSS que facilito, lo vas a pegar en el diseñador de plantillas de Blogger, en la opción
Añadir Css.
Veamos de qué se trata cada truco ;)
Truco #1. Ampliar el ancho de la entrada de la tercera sección.
La plantilla "Magazine" muestra primero una entrada que ocupa todo el ancho, luego, debajo, cuatro entradas lineales en forma horizontal, y debajo, el resto de las entradas que ocupan mas o menos dos terceras parte del ancho completo. Esa es la parte que vamos a ampliar, para que ocupe el ancho completo.
Para lograrlo, solo vas a la pestaña
Plantilla, luego a
Personalizar >
Avanzado >
Añadir CSS, y ahí pegas lo siguiente:
#fold .item {
width: 97.5% !important;
}
#fold .has-thumbnail .story {
width: 630px !important;
}
Luego, guardas los cambios en
Aplicar al blog. Puedes ver el resultado en la siguiente imagen. :
Esta imagen, muestra también el texto del título en mayúsculas, y el texto del sumario más grande y más separado (ver truco #4)
Truco #2. Hacer visible los iconos de cada gadget.
Las vistas dinámicas, muestran algunos gadgets en unas pestañas que están a la derecha, en la ventana del navegador, y tienes que poner el puntero del ratón encima para que sean visibles.
Lo que haremos entonces es que, el icono de la pestaña siempre sea visible. En la siguiente imagen puedes ver el antes y después de implementar el truco.
Para lograr ésto, solo tienes que ir a la pestaña
Plantilla, luego a
Personalizar >
Avanzado >
Añadir CSS, y ahí pegas lo siguiente:
#gadget-dock {
right: 0 !important;
}
Luego, guarda los cambios en "
Aplicar al blog".
Nota: Este es un truco que afectará a todas las vistas, y en la vista Mosaico, los iconos quedan arriba de las imágenes a la derecha, en la vista "Mosaico".
Truco #3. Hacer que el texto de la última linea sea visible...
La plantilla Magazine, como te lo mencionaba, muestra las entradas en tres secciones distintas. En la segunda sección, donde se muestran cuatro entradas lineales en forma horizontal, la última linea de texto no se ve completa en algunos navegadores como Internet Explorer, cuando el título de la entrada es largo.
El texto se ve incompleto cuando el título es largo.
En la imagen a la derecha, hemos forzado a que el título ocupe solo una linea. La letra se muestra en mayúsculas, ver truco #5. y la fuente del sumario es más grande ver truco #4.
La solución más sencilla, es forzar al título a que ocupe una sola linea, y separar el texto de los resúmenes, tal y como ocurre en la vista "Timeslide".
Para hacer lo anterior, haces click en pestaña
Plantilla del panel de Blogger, luego vas a
Personalizar >
Avanzado >
Añadir CSS, y ahí pegas lo siguiente:
.item .title {
white-space: nowrap;
}
#feature .story {
line-height: 19px;
}
Luego, guarda los cambios en "
Aplicar al blog".
Con el CSS del primer bloque, estamos forzando al texto para que no de el salto en linea. Por defecto, las vistas dinámicas traen consigo otro CSS que hace que se corte la linea del título para que no se desborde, y agrega tres puntos al final (...).
Con el segundo bloque, estamos dando una altura a la linea de texto, para que se separe, y esto evitará que vea incompleto el texto en algunos navegadores como Internet Explorer.
Truco #4 Separar todas las lineas y cambiar el tamaño de la fuente del texto de los sumarios
Por defecto, el texto de los sumarios es de 13 pixeles y el texto se ve algo pegado entre cada linea. Podemos cambiar ésto, y apara ello, vas a la pestaña Plantilla, luego a Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:.summary.entry-summary{
font-size: 14px; /*El tamaño del texto*/
line-height: 19px; /*la altura de linea*/
}
Luego, guardas los cambios en "Aplicar al blog".
Con
font-size:14px,cambiamos el tamaño de la fuente.
Con
line-height: 19px, separamos las lineas de texto de los sumarios.El valor que uses, dependerá de el tamaño de la fuente que uses. Este no debe ser mayor al valor asignado a
line-height, para obtener resultados satisfactorios. Tú puedes probar y ver los resultados ;)
Truco #5 Cambiar el color del título de la entrada, al poner el puntero del ratón encima de éste.
Desde el diseñador de plantillas, podemos cambiar el color que muestra el título de la entrada, pero no el color al poner el puntero encima de éste (:hover).
Para personalizar el color del texto al poner el puntero del ratón encima, agregas lo siguiente, haces click en la pestaña
Plantilla, luego vas
Personalizar >
Avanzado >
Añadir CSS, y ahí pegas lo siguiente:
.item .title:hover, .item .title a:hover{
color:#8A0829;
}La regla de CSS anterior, hará que cambie el color del título de la entrada al poner el puntero del ratón encima, y además los puntos al final de ésta (...), pensando en que has aplicado el
truco #3. El color es: #8A0829. Para poner el color que quieras, consulta esta
tabla de colores.
Truco #6. Transformar el texto del título de la entrada a mayúsculas
Podemos hacer que el título de la entrada se muestre en mayúsculas (ver imagen del truco 3) y para ello, ve a la pestaña Plantilla > Personalizar > Avanzado > Añadir CSS
.item .title {
text-transform: uppercase;
}
Luego, guarda los cambios en "
Aplicar al blog".
Si ya usaras el truco #3, solo agrega la linea que resalte de azul, al primer bloque de CSS. Entonces dicho bloque quedaría así:
.item .title {
white-space: nowrap;
text-transform: uppercase;
}
Truco #7. Cambiar el color de los listones, al poner el puntero del ratón sobre éste (:hover)
Si bien es posible cambiar el color de fondo del listón, así como el color del texto desde el diseñador de plantillas yendo a Plantilla, luego a
Personalizar >
Avanzado >
Cinta de fecha, no es posible cambiar el color del listón cuando pones el puntero del ratón encima del listón, desde el diseñador de plantillas.
Por defecto, el fondo cambia al poner el puntero encima. Este color es como marrón,
es este que ves de fondo.
Para cambiar el color de fondo, y el color de texto, haces click en la pestaña
Plantilla, luego vas a
Personalizar >
Avanzado >
Añadir CSS, y ahí pegas lo siguiente:
a.ribbon:hover .ribbon-piece {
background-color: #aaa; /*color de fondo*/
color: #fff; /*Color del texto*/
}
Luego, guarda los cambios en "Aplicar al blog".
Truco #8. Personalizar el borde y sombra del blog y evitar que se desborde el fondo en Firefox.
En la plantilla Magazine de las vistas dinámicas, la segunda sección muestra 4 imágenes lineales, esa sección en Firefox, se desborda el fondo en ambos lados, no es muy notorio, pero, al desbordarse no se ve ningún borde, como en el resto de la plantilla.
Lo que haremos entonces es poner un borde a todo el contenido, anular el borde que ya tiene esa vista y no se ve en dicha sección, y poner sombra en el contenido. Para ello, haces click en la pestaña
Plantilla del panel de Blogger, luego vas a
Personalizar >
Avanzado >
Añadir CSS, y ahí pegas lo siguiente:
#content {
border-image: none !important;
border: 1px solid #ddd; /*El color del borde*/
-moz-box-shadow: 0 0 5px #ddd; /*Las sombras*/
-webkit-box-shadow: 0 0 5px #ddd;
box-shadow: 0 0 5px #ddd;
}
Luego, guarda los cambios en "
Aplicar al blog".
En border:
1px solid #ddd, cambias el color del borde.
#ddd es el color que tiene. Puedes consultar esta tabla de colores. Lo mismo para las sombras, todos los valores de la sombras deben quedar igual como se muestra.
Puedes ver todos los cambios hechos
en este blog.
Espero sea útil, y no olvides compartirlo con tus amigos, solo toma unos segundos ;)
Crédito por las imágenes en los posts de la demostración y que se muestan en este tutorial:
nonsen sesociety.
