Plantilla BASTRO - Diseña el Blog de tus Sueños

Transcripción

Plantilla BASTRO
El Blog de tus Sueños
Celia
EL PERRO DE PAPEL WWW.ELPERRODEPAPEL.COM
PERSONALIZACIÓN PLANTILLA BASTRO
Una plantilla profesional, original y optimizada para priorizar el
contenido, sobre todo las fotografías, de tu blog. Es responsive
por lo que se adaptará perfectamente a cualquier dispositivo
móvil.
Esta plantilla presenta algunas particularidades para que se vea
bien una vez hayamos activado el slider.
El primer punto a tener en cuenta es el tamaño de las fotografías
que usaremos.
Mira lo que sucede si una vez activado el slider tus fotos no
tienen las mismas dimensiones:
Cada foto tiene un alto diferente y no queda nada bien, por lo
que lo primero que debes hacer es decidir cuál será el tamaño
que usarás en todas tus fotografías.
Para redimensionarlas te será útil esta entrada publicada en El
Perro de Papel:
http://www.elperrodepapel.com/2013/08/optimizar-fotosblogger.html
Cuando tus fotografías (el slider muestra la primera fotografía de
tu entrada) tengan el mismo tamaño, el resultado será mucho
más preciso:
Vamos a ver cómo activar el slider.
Primero asegúrate de tener publicadas al menos tres entradas
con la primera foto de cada una de ellas adaptada a la dimensión
que hayas escogido.
Una vez publicadas, vuelve a editarlas y añade la etiqueta:
featured.
Cuando las hayas actualizado ve a Diseño y edita el gadget btslider-main (Featured Slider).
Escribe featured dentro de Contenido. Guarda los cambios.
Lo que hace el slider es mostrar en la zona superior de tu blog
todas las entradas que etiquetes como featured. Sencillo
¿verdad?
Pero si tienes activada la nube de etiquetas en tu sidebar, aparece
la etiqueta featured.
Para quitarla solo tienes que editar el gadget etiquetas y pinchar
en etiquetas seleccionadas.
Click en EDITAR. Selecciona las etiquetas que quieras mostrar,
pincha en LISTO, guarda los cambios y la etiqueta featured ha
desaparecido de la sidebar.
Vamos a empezar personalizando el gadget de etiquetas para
ponerlo a juego con el diseño de la plantilla.
Entra en tu plantilla HTML.
Haz click en IR AL WIDGET.
Selecciona LABEL1 de la lista.
Encontrarás:
Ahí tienes todos los gadgets que aparecen en tu sidebar, entre
ellos el que buscamos: id=’Label1’.
Ahora usa el buscador interno de tu plantilla para encontrar:
]]></b:skin>
Y justo encima pega:
Label1 {
}
Dentro de las llaves puedes añadir las propiedades que quieras
para tus etiquetas.
Por ejemplo:
Código:
#Label1 {
float:center;
display: block;
padding-bottom: 10px;
margin-top:-10px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 10px;
font-size: 14px;
text-transform: uppercase;
text-align: center;
list-style-type: none;
text-decoration: none;
}
#Label1 a{
float: center;
display: block;
margin: 0 0 0 0;
padding: 4px;
letter-spacing: 1px;
text-decoration:none;
font-size:14px;
color:#000000;
background: #ffffff;
border: 1px solid #000000;
margin-bottom:3px;
}
#Label1 a:hover {
float:center;
display: block;
margin: 0 0 0 0;
padding: 4px;
letter-spacing: 1px;
text-decoration:none;
font-size:14px;
color:#494949;
background: #ffffff;
margin-bottom:3px;
}
O si prefieres que aparezcan juntas:
Código:
.Label a{
padding-left:10px;
background:#ffffff;
padding:0 10px;
color:#000000!important;
height:26px;
line-height:26px;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:3px;
margin-top:3px;
font-size:13px;
}
.Label a:hover{
background:#eeeeee;
}
Esta plantilla es muy compleja, tiene mucho código que a primera
vista puede abrumarte, pero no te preocupes, veremos cómo
cambiar el tipo de letra y los colores para que puedas usar los
tuyos.
No vamos a personalizar la plantilla completa porque sino no
tendría sentido haberla comprado ¿no crees? Para programar una
plantilla de cero podemos usar lo aprendido con la plantilla
sencilla que tiene un código mucho más limpio.
Vamos a personalizar el menú que, como en el caso de la plantilla
Blogstar, aparece incrustado en la plantilla HTML.
Busca en tu plantilla HTML: CONTACT
Encontrarás:
<div class='nav-collapse collapse'>
<ul class='nav' id='menu-primary'>
<li><a class='act' href='#' style='color:#374859;'>Home</a></li>
<li><a href='#'>Theme Options</a></li>
<li><a href='#'>Contact</a></li>
<li class='dropdown'><a class='dropdown-toggle' datatoggle='dropdown' href='#'>Pages<i class='icon-angledown'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Pages</a></li>
</ul>
</li>
<li><a href='#'>Download</a></li>
</ul>
</div>
</div>
</div>
<ul class='share-box pi-social '>
<li><a href='#' target='_blank'
title='Facebook'><i class='fa fa-facebook'/></a></li>
<li> <a href='#' target='_blank'
title='Twitter'><i class='fa fa-twitter'/></a></li>
<li> <a href='#' target='_blank'
title='Google+'><i class='fa fa-google-plus'/></a></li>
<li> <a href='#' target='_blank' title='Dribble'><i class='fa fadribbble'/></a></li>
</ul>
</div>
Ya estás acostumbrada a programar menús así que no creo que
tengas problemas para añadir tus propios nombres de páginas y
enlaces.
Vamos directamente a las opciones de personalización por si
quieres cambiar los colores. Busca en tu plantilla:
menu
Y encontrarás un código un poco caótico:
.nav-menu li a{font-weight:300;font-style:normal;fontsize:13px;}.nav-menu ul ul li a{font-weight:300;fontstyle:normal;font-size:12px;color:#ddd;}
Antes de continuar vamos a colocarlo bien porque lo vas a
encontrar en mitad de un montón de código que da formato a
otras partes de tu plantilla y trabajar así es un poco lío…
El siguiente fragmento:
h1,h2,h3,h4,h5{font-family: 'Open Sans', sans-serif;}
body{ font-family: 'Open Sans', sans-serif;font-weight:300;fontstyle:normal;font-size:14px;lineheight:22px;#787878;background:#fff;overflow-x:hidden;);
background-repeat: repeat;
}h1{font-weight:300;font-style:normal;font-size:24px;lineheight:30px;color:#777;}h2{font-weight:300;fontstyle:normal;font-size:22px;line-height:28px;color:#777;}h3{fontweight:300;font-style:normal;font-size:18px;lineheight:24px;color:#777;}h4{font-weight:300;fontstyle:normal;font-size:16px;line-height:22px;color:#777;}h5{fontweight:300;font-style:normal;font-size:14px;lineheight:20px;color:#777;}h6{font-weight:300;fontstyle:normal;font-size:12px;line-height:18px;color:#777;}#header
h1{font-weight:700;font-style:normal;font-size:40px;lineheight:40px;}.nav-menu li a{font-weight:300;fontstyle:normal;font-size:13px;}.nav-menu ul ul li a{fontweight:300;font-style:normal;font-size:12px;color:#ddd;}.pageinner .page-header{font-weight:300;font-style:normal;fontsize:22px;line-height:30px;color:#666;}.page-desc{fontweight:300;font-style:normal;font-size:13px;lineheight:24px;color:#aaa;}.post-head h2.post-title{fontweight:300;font-style:normal;font-size:23px;line-height:28px;}
Que da pánico solo verlo, debe quedar así:
h1,h2,h3,h4,h5{
font-family: 'Open Sans', sans-serif;
}
body{
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-style:normal;
font-size:14px;
line-height:22px;
#787878;
background:#fff;
overflow-x:hidden;);
background-repeat: repeat;
}
h1{
font-weight:300;
font-style:normal;
font-size:24px;
line-height:30px;
color:#777;
}
h2{
font-weight:300;
font-style:normal;
font-size:22px;
line-height:28px;
color:#777;
}
h3{
font-weight:300;
font-style:normal;
font-size:18px;
line-height:24px;
color:#777;
}
h4{
font-weight:300;
font-style:normal;
font-size:16px;
line-height:22px;
color:#777;
}
h5{
font-weight:300;
font-style:normal;
font-size:14px;
line-height:20px;
color:#777;
}
h6{
font-weight:300;
font-style:normal;
font-size:12px;
line-height:18px;
color:#777;
}
#header h1{
font-weight:700;
font-style:normal;
font-size:40px;
line-height:40px;
}
.nav-menu li a{
font-weight:300;
font-style:normal;
font-size:13px;
}
.nav-menu ul ul li a{
font-weight:300;
font-style:normal;
font-size:12px;
color:#ddd;
}
.page-inner .page-header{
font-weight:300;
font-style:normal;
font-size:22px;
line-height:30px;
color:#666;
}
.page-desc{
font-weight:300;
font-style:normal;
font-size:13px;
line-height:24px;
color:#aaa;
}
.post-head h2.post-title{
font-weight:300;
font-style:normal;
font-size:23px;
line-height:28px;
}
Ha costado ¿verdad? Te he marcado en rojo dos pequeños
fallos… que yo he cambiado así:
Color: #787878;
background:#fff;
overflow-x:hidden;
Creo que tiene más sentido. Es más, estos dos fragmentos que
parecen afectar al menú de páginas no he conseguido saber para
qué sirven:
.nav-menu li a{
font-weight:300;
font-style:normal;
font-size:13px;
}
font-weight:300;
font-style:normal;
font-size:12px;
color:#ddd;
}
Porque si buscas en tu plantilla otro ID de tu menú:
dropdown-menu
Te encuentras otro pedazo de código que no hay quién lo
organice… Por lo que he llegado a la conclusión de que sí, estas
plantillas son muy profesionales en apariencia, pero
personalizarlas y reprogramarlas es tarea de chinos.
Así que te aconsejo borrar los dos primeros fragmentos que
vimos que supuestamente afectaban al menú para ir limpiando el
código. Exactamente estos:
.nav-menu li a{
font-weight:300;
font-style:normal;
font-size:13px;
}
font-weight:300;
font-style:normal;
font-size:12px;
color:#ddd;
}
Cuando lo elimines, verás que no ha pasado absolutamente
nada… Me temo que hay código repetido para aburrir… Una
pena, la verdad. Esta plantilla es genial, pero no creo que esté
pensada para que el cliente la pueda personalizar.
Así que más que personalizar… me parece que vamos a hacer una
pequeña limpieza de código basura y a personalizar lo poco que
nos deje el código restante.
Busca en tu plantilla:
.navbar
Hasta que encuentres:
.container,.navbar-static-top .container,.navbar-fixed-top
.container,.navbar-fixed-bottom .container{width:940px}
Supuestamente debería marcar el ancho de esos elementos,
entre ellos la barra del menú pero si lo borras… ¡no pasa
absolutamente nada!
Que desastre de código…
Busca de nuevo .navbar hasta que encuentres:
.navbar{overflow:visible;marginbottom:20px;*position:relative;*z-index:2;float:left; width:70%;}
Como descifrar y arreglar el código es prácticamente imposible, lo
que vamos a hacer es aplicar modificaciones usando la orden
¡important.
Justo encima de ese fragmento pega:
#masthead {
background-color: #eeeeee !important;
}
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .navcollapse {
font-size: 15px !important;
}
.dropdown-menu a {
}
Y ahora vamos a ver lo que significa:
#masthead puedes modificar el color de fondo de la barra del
menú.
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .navcollapse modificas el tipo de letra, tamaño y color de las opciones
de tu menú.
.dropdown-menu a afecta al tipo de letra, tamaño y colores del
menú desplegable.
Y vamos a cambiar el color de las redes sociales de la barra del
menú, que también se las trae…
Pega debajo del código anterior:
.fb {
color: #000000 !important;
}
.tw {
}
.gm {
}
.db {
}
Lo que te he marcado en negrita son los IDs que les he asignado a
las redes sociales de tu menú. Tú puedes poner los que quieras,
siempre después de realizar una búsqueda del ID que elijas para
asegurarte de que no está duplicado en tu plantilla.
Apunta tus IDs y busca tu menú de páginas. Escribe el nombre de
una de tus páginas para encontrarlo antes:
Baja hasta la parte de las redes sociales y modifícala así:
<ul class='share-box pi-social'>
<li><a class='fb' href='#'
target='_blank' title='Facebook'><i class='fa fafacebook'/></a></li>
<li> <a class='tw' href='#'
target='_blank' title='Twitter'><i class='fa fa-twitter'/></a></li>
<li> <a class='gm' href='#'
target='_blank' title='Google+'><i class='fa fa-googleplus'/></a></li>
<li> <a class='db' href='#' target='_blank' title='Dribble'><i
class='fa fa-dribbble'/></a></li>
</ul>
Hemos añadido los IDs como class para poder dar formato a cada
icono social por separado. Así, si quieres, puedes poner cada uno
de un color y modificarlos individualmente sin problema.
Mi menú de momento luce así:
Con solo estos cambios:
#masthead {
}
}
.dropdown-menu a {
}
.fb {
}
.tw {
}
.gm {
}
.db {
}
Para eliminar el borde superior del submenú solo tienes que
añadir otro pequeño fragmento de código a continuación del
anterior:
.dropdown-menu {
border: none !important;
}
Ahora vamos a personalizar las entradas resumidas que aparecen
en la portada:
Añade el siguiente código a continuación del anterior:
.post figure figcaption {
background-color: #ffffff !important;
border-top: 1px solid #000000 !important;
border-left: 1px solid #000000 !important;
border-bottom: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
margin-right: -100px;
}
.post figure figcaption ul li {
}
La primera parte aplica estilo a la caja contenedora y la segunda a
los iconos de cada opción que presentan las entradas y a los
bordes que los separan.
Y seguimos con el READ MORE o Leer Más.
Al final de todos los códigos que estás añadiendo pega:
.read_more {
text-transform: uppercase !important;
border: 1px solid #000000 !important;
}
.read-more a:hover {
}
Para cambiar el color del texto, tenemos que buscar el código
original de la plantilla que va con ¡important ya de por sí, por eso
cuando intenté modificarlo de esta forma no funcionaba. Ambos
comandos importantes entraban en conflicto.
Cuando hayas añadido los colores, tamaños y bordes que quieras
a tu botón, busca:
a.read_more
Encontrarás:
a.read_more {
font-size: 13px;
/* float: left; */
padding: 5px 12px;
margin-top: 10px;
color: #fff!important;
background-color: #374859;
-webkit-transition: all .2s linear;
transition: all .2s linear;
color: #374859;
}
Puedes poner el código de color de la letra de tu botón dónde te
he marcado en negrita y eliminar el otro código de color que te
he marcado en rojo ya que está duplicado.
Justo debajo encontrarás:
color: #fff;
background-color: #000;
}
Puedes eliminarlo si quieres quedarte con el que hemos añadido
nosotros o poner aquí tus códigos y eliminar el nuestro. Como
prefieras. Pero asegúrate de tenerlo localizado por si necesitas
modificarlo en algún momento.
Y para cambiar el texto busca: Read More
Hasta que encuentres el siguiente fragmento de script:
p.innerHTML = ifrtag + imgtag + '<div class="text_blog"><h2
class="post-title"><a href="'+ y +'">'+ x +'</a></h2><div
class="entry-content cf">'+ stripTags(p.innerHTML, 45) +'</div><a
href="'+ y +'" class="read_more">Read More</a></div>';
}
Lo siguiente que vamos a personalizar es la paginación.
Para ello seguiremos pegando código nuevo marcado como
prioritario como hemos hecho desde que empezamos:
.pagenavi a, .pagenavi span {
background: none repeat scroll 0 0 #ffffff !important;
border-radius: 0 0 0 0 !important;
}
Y antes de pasar a personalizar el footer del blog, vamos a pulir
unos detallitos de nuestras entradas:
Traducir el Share this Post para compartir nuestras entradas.
Busca esa frase en tu plantilla HTML: share this post
Encontrarás:
<div class='post-share'>
<span class='share-text'>Share this post</span>
<ul>
<li>
<a class='twitter df-share' data-hashtags='' datasharetip='Share on Twitter!'
expr:href='"http://twitter.com/share?url=" +
data:post.url + "&title=" + data:post.title'
rel='nofollow' target='_blank'>
<i class='fa fa-twitter'/>
</a>
</li>
<li>
<a class='facebook df-share' data-sharetip='Share on
Facebook!'
expr:href='"http://www.facebook.com/sharer.php?u=&quo
t; + data:post.url + "&title="+ data:post.title'
rel='nofollow' target='_blank'>
<i class='fa fa-facebook'/>
</a>
</li>
<li>
<a class='google df-pluss' data-sharetip='Share on
Google+!'
expr:href='"https://plus.google.com/u/0/share?url="
+ data:post.url' rel='nofollow' target='_blank'>
<i class='fa fa-google-plus'/>
</a>
</li>
<li>
<a class='pinterest df-pinterest' data-sharetip='Pin it'
expr:href='"http://pinterest.com/pin/create/button/?sourc
e_url=" + data:post.url + "&media=" +
data:post.firstImageUrl + "&description=" +
data:post.title' target='_blank'>
<i class='fa fa-pinterest'/>
</a>
</li>
</ul>
</div>
Te he marcado en negrita todo lo que puedes personalizar. Los
enlaces no los toques, que estamos hablando de compartir no de
seguir. Los que vienen son los predeterminados para que al hacer
click tus lectores puedan compartir tu entrada en la red social que
prefieran.
Y traduciremos también el texto de las entradas relacionadas.
Busca:
You May Also Like
Y encontrarás:
document.write('<div class="large-12 column"><h2 class="entrytitle">You May Also Like</h2></div>');
document.write('<div class="clear">');
Cambia la frase que te he marcado en negrita por la que prefieras
para animar a tus visitas a seguir leyendo otras entradas de
temática similar a la que acaban de leer.
Y para finalizar, vamos a personalizar el footer añadiendo nuestro
propio código para modificar al existente. El código del footer
puedes encontrarlo con más facilidad buscando:
Footer-wrapper
Pero ya que hemos empezado a reprogramar con el comando
importante y tenemos nuestras modificaciones localizadas todas
en el mismo sitio, te aconsejo seguir esta dinámica por si quieres
deshacer todos tus cambios, tenerlos localizados.
Así que añadimos un nuevo código junto a los anteriores:
#footer-wrapper {
background: #000000 !important;
border-top: 1px solid #eeeeee !important;
color: #ffffff !important;
font: 11px Verdana !important;
letter-spacing: 2px !important;
}
Y para modificar el contenido busca de nuevo footer-wrapper
hasta encontrar:

<footer id='footer-wrapper'>
<div class='container'>
<div id='footer'>
<div class='col-lg-6 col-sm-6' id='foot-left'>
<img alt='' src='http://1.bp.blogspot.com/46tdpdasjrg/VTiD_FzwkPI/AAAAAAAACBg/bH58TiAAHNA/s1600/ba
stro.png' title='logo-footer'/>
<p><span>Copyrights @2015 Yours</span></p>
</div>
<div class='col-lg-6 col-sm-6' id='foot-right'>
<ul class='social-icons social-rounded social-colored'>
<li>
<a class='social-twitter' dataoriginal-title='Twitter' data-placement='top' data-toggle='tooltip'
href='#' target='_blank' title=''>
<i class='fa fa-twitter'/> <i
class='fa fa-twitter'/>
</a>
</li>
<li>
<a class='social-facebook' dataoriginal-title='Facebook' data-placement='top' datatoggle='tooltip' href='#' target='_blank' title=''>
</a>
</li>
<li>
<a class='social-google-plus'
data-original-title='Google Plus' data-placement='top' datatoggle='tooltip' href='#' target='_blank' title=''>
<i class='fa fa-googleplus'/><i class='fa fa-google-plus'/>
</a>
</li>
<li>
<a class='social-linkedin' dataoriginal-title='Linkedin' data-placement='top' data-toggle='tooltip'
<i class='fa fa-linkedin'/><i
class='fa fa-linkedin'/>
</a>
</li>
<li>
<a class='social-dribbble' dataoriginal-title='Dribbble' data-placement='top' data-toggle='tooltip'
<i class='fa fa-dribbble'/><i
class='fa fa-dribbble'/>
</a>
</li>
</ul>
</div>
</div>
<div class='clear'/>
</div>
</footer>

Solo tienes que añadir tu logotipo, créditos y enlaces a redes
sociales donde te he marcado en negrita.
Y justo debajo tienes el código del segundo footer:
<div class='footer' id='footer1'>
<div class='container clearfix'>
<div class='go-top'>
<a href='#'><i class='fa fa-angleup'/></a>
</div>
<div
id='copyright'>Created By<a
href='http://seobloggertemplates.com' id='mycontent' rel='follow'
title='Blogger Templates'>Seo Blogger Templates</a>
</div>
</div>
El primer código es el ID del botón subir, que ahora veremos
cómo cambiarle de color para finalizar con la personalización de
nuestra plantilla Bastro. Y en el segundo puedes añadir tus
créditos finales. El ID de esta zona es copyright, por si quieres
cambiar los colores.
Creamos un nuevo código para personalizar el botón subir:
#footer1 .go-top a {
border-radius: 0px !important;
}
Y cuando esté a tu gusto, terminamos con el segundo footer:
#copyright {
text-align: center !important;
}
#copyright a{
color: #eeeeee !important;
}
#copyright a:hover{
}
#footer1 {
}
Los tres primeros códigos afectan solo a la barrita que contiene
los datos del copyright y el último al segundo footer en general.
¡Lo conseguimos! Hemos personalizado la plantilla sin morir en el
intento.
Después de ver el caos de código repetido, duplicado y con fallos
de esta plantilla, te recomiendo poner encima del código nuevo
que has añadido algo como:
* ------------------ Personalización Celia
------------------------------*
Para tener localizados tus cambios.
Los míos han quedado así:
* ------------------ Personalización Celia
------------------------------*
#masthead {
}
}
.dropdown-menu a {
}
.fb {
}
.tw {
}
.gm {
}
.db {
}
.dropdown-menu {
border: none !important;
}
.post figure figcaption {
border-left: 1px solid #000000 !important;
border-bottom: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
margin-right: -100px;
}
.post figure figcaption ul li {
}
.read_more {
}
}
.pagenavi a, .pagenavi span {
background: none repeat scroll 0 0 #ffffff !important;
border-radius: 0 0 0 0 !important;
}
#footer-wrapper {
border-top: 1px solid #eeeeee !important;
}
#footer1 .go-top a {
border-radius: 0px !important;
}
#copyright {
text-align: center !important;
}
#copyright a{
color: #eeeeee !important;
}
#copyright a:hover{
}
#footer1 {
}
* ------------------ Fin Personalización Celia
------------------------------*
Y la plantilla ha quedado bastante bien.
¿Compartes la tuya en el grupo de Facebook para que podamos
verla todas?
La verdad es que ha sido complicado personalizarla… ¡pero
hemos aprendido un montón!

Plantilla BASTRO - Diseña el Blog de tus Sueños

Transcripción

Documentos relacionados

The Oratory School English Summer Course · The Oratory School

Mark Your Calendar!