Personalización plantilla Kamera. Aisha (Elai the Blogger) para El perro de papel

Transcripción

1 Personalización plantilla Kamera Aisha (Elai the Blogger) para El perro de papel

2 PERSONALIZACIÓN PLANTILLA KAMERA Otra plantilla pensada para blogs donde la fotografía es uno de sus activos más importantes. El gran slider superior hará que las fotografías luzcan mucho. Como es una plantilla responsive, una vez instalada no has de preocuparte de personalizar la opción móvil, aunque sí tienes que tenerla instalada. Ahora vamos a instalar la plantilla Kamera y a trabajar sobre ella. Voy a ir siguiendo el código a medida que nos lo vayamos encontrando. Si alguna de las opciones que vamos a personalizar no quieres cambiarla, simplemente omite el paso. Lo que vamos a hacer ahora son dos pasos previos para desactivar la navbar. Entra en Diseño, y edita la opción de arriba 2

3 del todo Navbar y escoge la opción NO. Guarda los cambios. Y por último, elimina el gadget attribution. En los pdfs del curso habéis visto cómo hacer para que se active la opción eliminar y así desaparezca. Yo soy más expeditiva y lo elimino directamente todo entero. Buscad en vuestra plantilla HTML la palabra: Attribution Desplegáis el gadget y marcáis todo el código que os pongo aquí: <b:widget id='attribution1' locked='true' title='' type='attribution'> <b:includable id='main'> <b:if cond='data:feedbacksurveylink'> <div class='mobile-survey-link' style='text-align: center;'> <data:feedbacksurveylink/> </div> </b:if> <div class='widget-content' style='text-align: center;'> <b:if cond='data:attribution!= ""'> <data:attribution/> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> 3

4 Dais a suprimir y guardáis la plantilla. Para comenzar es necesario tener varias entradas publicadas, con foto, y al menos una etiqueta. De esta forma podemos ver mejor el formato e ir siguiendo los cambios que realicemos. Para que salgan tus imágenes en el slider has de poner a las entradas la etiqueta: zblog. 4

5 Comenzamos la plantilla a partir de este apartado: /***************************************** Global Links CSS ******************************************/ a{ color: #555; outline:none; text-decoration: none; } a:hover,a:focus { color: #000; text-decoration:none; } body{ background: $(body.background.color); color: #333; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; }.clr { clear:both; float:none; }.clearfix{position:relative;}.clearfix:after,.clearfix:before{display:table;content:"";line-height:0} a{ color: #555: cambia el color de los enlaces generales del blog. Post populares, etiquetas, etc. a:hover,a:focus { color: #000: cambia el color de los enlaces cuando pasamos el ratón por encima. color: #333: cambia el color de los títulos del post (cuando estamos dentro del post) y de los títulos de los gadgets de la sidebar. Seguimos bajando hacia abajo y encontramos: /***************************************** Header CSS ******************************************/ #header { display: inline-block; text-align: center; width: 100%; } #header-inner{ margin: 50px 20px 30px; padding: 0; } 5

6 #header h1 { font-family: "pacifico",cursive; font-size: 70px; font-style: normal; lineheight:150%; } #header h1 a, #header h1 a:hover { color: #333; } #header p.description{ color: #333; font-size: 12px; font-style: italic; text-shadow: 1px 1px #FFFFFF; margin: 0; padding: 0; text-transform:capitalize; } #header img{ border:0 none; background:none; width:auto; height:auto; margin:0 auto; max-height:190px;} Este es el apartado del título del cabezal en caso de que no utilicéis un logo en formato imagen. Y justo debajo encontramos el código que da formato a los botones de redes sociales que están justo debajo del cabezal. /* SOCIAL SHARE */.blog_share ul li a i { width: 40px; height: 40px; display: block; font-size: 24px; color: #444; border: 1px solid #444; border-radius: 3px; padding: 7px; } 6

7 width: 40px; y height: 40px;: este es el tamaño del ancho y alto de los cuadrados que contienen el logotipo de las RR.SS. Para que queden bien ambos apartados han de tener el mismo valor. font-size: 24px;: tamaño del logotipo de las RR.SS. color: #444;: color del logotipo de las RR.SS. border: 1px solid #444;: ancho y color del recuadro que enmarca la red social. border-radius: 3px;: redondeo de los cantos del borde. Por ejemplo, si pones el valor a 20px, te quedarán unos círculos en vez de un cuadrado. padding: 7px;: separación entre los botones. Seguimos avanzando y tenemos: /***************************************** Main Menu CSS ******************************************/.nav-menu { background: $(primary.background.color); border-bottom: 7px solid #F1F4F9; margin: 0 auto; padding: 0; width: 100%; z-index: 299; }.nav-menu ul{ list-style:none; margin:0; padding:0; z-index: 999; text-align: center; }.nav-menu ul li { display: inline-block; line-height: 1; list-style: none; padding: 0; }.nav-menu li a { color: #f3f3f3; display: block; font-size: 13px; font-weight: 300; padding: 15px 18px; position: relative; text-decoration: none; text-transform: uppercase; letter-spacing:1px;}.nav-menu li a:hover { color: ; }.sticky { position: fixed; top: 0px; border-bottom: 1px solid #ddd; z-index: 99999; } 7

8 7px solid #F1F4F9: grueso y color de un reborde que hay justo debajo del menú principal. Lo he puesto en un color rojo contrastado para que veas qué zona es. nav-menu li a { color: #f3f3f3: color de los enlaces del menú superior. Seguimos avanzando hasta llegar a: /***************************************** - main Section Stylesheet - ******************************************/ Y buscamos esta porción de código: span.rdmre a { color: #333; border: 1px solid #888; padding: 8px 15px ; border-radius: 20px; line-height: 1; 8

9 display: block; font-weight: 300; letter-spacing:.75px; } color: #333;: color de la palabra Read more en los cajetines de los sumarios. border: 1px solid #888;: grosor y color del reborde que envuelve Read more. Esta otra porción de código da formato a los títulos de los post en los cajetines de los sumarios..gallery_excerpt h2,.post_title { font-size: 21px; 9

10 line-height: 1.2; text-transform: capitalize; padding: 0; padding-bottom: 10px; margin-top: 0; margin-bottom: 10px; font-family: raleway,sans-serif; font-weight: 700; letter-spacing:.5px; position: relative; } Puedes cambiar el tamaño y la tipografía. Y si quieres cambiar el color a los títulos de los post en los cajetines, entonces deberás seguir un poco más abajo hasta que encuentres:.gallery_excerpt h2 a,.overlay.back h2 a{color:#444;} Seguimos bajando y encontramos:.soc_sharing ul li a { display: block; width: 27px; height: 27px; color: #fff; font-size: 21px; } 10

11 color: #fff;: cambia el color de los botones para compartir post que aparecen al pasar por encima del cajetín el ratón. font-size: 21px;: cambia el tamaño de los botones de las RR.SS. A continuación vamos a dar formato a los cajetines:.post.hentry { background: white; margin: 10px; border-radius: 3px; overflow: hidden; border-bottom: 1px solid #D6D6D6; box-shadow: 0px 2px 10px -7px #000; } 11

12 background: white;: color del fondo del cajetín, en este caso está puesto en color blanco. border-bottom: 1px solid #D6D6D6;: fina línea que está justo abajo del fondo. Te lo he marcado en color rojo: box-shadow: 0px 2px 10px -7px #000;: color del sombreado tenue para dar profundidad al cajetín. Seguimos avanzando hasta la siguiente porción de código y encontramos:.post_title { font-size: 36px;margin: 0; padding: px;text-transform: capitalize; } h1.post_title:after, h1.post_title:before {background: #333;}.post_title:after{left:-24px;} 12

13 .post_title:before{left: -19px;} background: #333;: esto cambia el color de las líneas a la izquierda del título del post, cuando estamos dentro del post. En el siguiente apartado puedes cambiar el color del texto resumen que aparece en los cajetines..post-body { color: #666; text-transform: auto; word-wrap:break-word; } 13

14 Seguimos y encontramos:.post-header { border-bottom: 1px solid #F5F5F5; color: #999999; font-size: 12px; line-height: normal; margin: px; padding: px; text-transform: capitalize; } border-bottom: 1px solid #F5F5F5: cambia el color de la línea que aparece debajo del título del post cuando estamos dentro del mismo. color: #999999: cambia el color del autor y la hora..post-header a { color: #999; } Esta otra porción cambia el color de: Leave A Comment 14

15 Verás que me he saltado algunas líneas con códigos de color pero, después de haberlos cambiado, e incluso añadir!important, no he conseguido que cambien nada. El siguiente apartado que nos encontramos es: /***** Page Nav CSS *****/.showpagepoint { background: #101010; color: #FFFFFF; margin: 0 10px 0 0; padding: 5px 10px; text-decoration: none; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; } background: #101010: cambia el color del fondo de los botones de paginación que están debajo de los cajetines. color: #FFFFFF: cambia el color de los números de los botones de paginación..showpage a:hover,.showpagenum a:hover { background: #101010; color: #fff; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-borderradius: 3px; text-decoration: none; } Cambia los mismos valores pero para cuando pasamos el ratón por encima de los números de paginación. 15

16 Y un poco más abajo encontramos lo siguiente: /***************************************** Post Highlighter CSS ******************************************/ blockquote { border-color: #F1F4F9; border-style: solid; border-width: 1px 0; color: #888888; font-style: italic; margin: 10px 0 20px; padding: 15px 40px; } En ese apartado se da format al texto citado. border-color: #F1F4F9: color del borde border-width: 1px 0: ancho del borde color: #888888: color del texto Después de este apartado nos encontramos la porción de código que da formato a la barra lateral. /***************************************** Sidebar CSS ******************************************/ Y un poquito más abajo encontramos:.sidebar.widget { background: #fff; padding: 25px 20px; clear: both; font-size: 13px; line-height: 23px; margin-bottom: 30px; box-shadow: 0px 0px 20px -10px #000; -moz-box-shadow: 0px 0px 20px -10px #000; -webkit-box-shadow: 0px 0px 20px -10px #000;} background: #fff: cambia el color del fondo de toda la barra lateral. 16

17 webkit-box-shadow: 0px 0px 20px -10px #000;: el código de color corresponde a la sombra que da realce a todo el contenedor de la barra lateral. Y un par de líneas más abajo encontramos:.sidebar li { border-bottom: 1px solid #F1f4f9; line-height: normal; list-style: none!important; margin: 8px 0; overflow: hidden; padding: px; } border-bottom: 1px solid #F1f4f9;: cambia el grosor y el color de las líneas de separación de los gadgets: Popular posts y Pages 17

18 A continuación encontramos el área de los créditos del blog que está en el footer. /***************************************** Footer Credits CSS ******************************************/.footer-credits { background: #FFFFFF; color: $(primary.background.color); display: block; font-size: 13px; font-style: normal; line-height: 23px; margin: 20px 0 0; padding: 40px 0; text-align: center; }.footer-credits p a { color: $(primary.background.color);border-bottom: 1px dotted $(primary.background.color); }.footer-credits p { letter-spacing:.5px; } background: #FFFFFF: cambia el color del fondo de todo él área de créditos. Seguimos avanzando y encontramos el apartado que da formato a diferentes gadgets del blog. /***************************************** Custom Widget CSS ******************************************/ El primero que encontramos es el del formulario de contacto. /***** Search Form *****/ Pero no he conseguido que se aplicase ninguno de los cambios. Ni siquiera forzando el cambio con!imporant. 18

19 A continuación viene el gadget de etiquetas: /***** Custom Labels *****/ Y en esta línea podemos cambiar el color de los enlaces en el gadget de etiquetas en formato nube..cloud-label-widget-content.label-size a { color: #000!important; float: left; padding: 5px; } Bajamos hasta encontrar el bloque que da format al formulario de contacto: /***** Blogger Contact Form Widget *****/.contact-form- ,.contact-form-name,.contact-form- -message,.contactform- hover,.contact-form-name:hover,.contact-form- -message:hover,.contact-form- focus,.contact-form-name:focus,.contact-form- message:focus { background: #F8F8F8; border: 1px solid #D2DADD; box-shadow: 0 1px 1px #F3F4F6 inset; max-width: 300px; color: #999; }.contact-form-button-submit { background: #000; border: medium none; float: right; height: auto; margin: 10px 0 0; max-width: 300px; padding: 5px 10px; width: 100%; cursor: pointer; }.contact-form-button-submit:hover { background: #2980B9; border: none; } background: #F8F8F8: cambia el color de fondo de los campos donde introducimos los datos. border: 1px solid #D2DADD: grosor y color del borde de los campos del formulario. box-shadow: 0 1px 1px #F3F4F6: color de la sombra. Color: #999: Color del texto que introducimos. background: #000: color de fondo del botón Enviar. 19

20 background: #2980B9: color del botón Enviar cuando pasamos el ratón por encima. El siguiente gadget que encontramos es el del perfil. /***** Profile Widget CSS *****/.Profile img { border:1px solid #cecece; background:#fff; float:left; margin:5px 10px 5px 0; padding: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; borderradius: 50%; }.profile-data { color:#999999; font:bold 20px/1.6em Arial,Helvetica,Tahoma,sansserif; font-variant:small-caps; margin:0; text-transform:capitalize;} border:1px solid #cecece: grosor y color del reborde que aparece alrededor del logo/foto del pefil. background:#fff: color del fondo de la foto del perfil. profile-data { color:#999999; font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;: esta parte da formato al color de letra y familia de la tipografía de los datos de nuestro perfil. El siguiente apartado se refiere al apartado debajo de los posts sobre el autor. /***** Meet The Author *****/ #About { background: #FFFFFF; display: inline-block; padding: 25px 3%; width: 100%; } 20

21 #About.widget-content { position: relative; width: 100%; } #About.widget-content.main-wrap { width: auto; margin-right: 370px; } #About.widget-content.main-wrap.info { float: left; position: relative; width: 90%; padding: 10px 5%; } #About.widget-content.side-wrap { width: 340px; float: right; text-align: center; } #About.widget-content.main-wrap.info h5 { border-bottom: 1px solid #F1F4F9; color: #000000; font-size: 16px; font-weight: bold; margin: px; padding: 0 0 5px; text-transform: capitalize; } #About.widget-content.main-wrap.info p { color: $(secondary.background.color); font-style: italic; } #About.widget-content.side-wrap.author-img { border: 1px solid #CECECE; height: 150px; vertical-align: bottom; width: 150px; -webkit-border-radius: 50%; -mozborder-radius: 50%; border-radius: 50%; } ul.author-social { display: inline-block; margin: 10px 0 0; padding: 0; } ul.author-social li { background: url(" Mu6D1ld_3TE/U35bF1XXIVI/AAAAAAAADBM/VaHEtkyX3MA/s1600/sprites.png") no-repeat; display: inline-block; font-weight: bold; font-size: 12px; line-height: 16px; list-style: none; padding: 0 20px; } ul.author-social li.facebook { background-position: 0-80px; } ul.author-social li.twitter { background-position: 0-100px; } ul.author-social li.googleplus { background-position: 0-120px; } ul.author-social li.rss { background-position: 0-176px; } ul.author-social li a { color: #000; } ul.author-social li a:hover { color: #666; } 21

22 A partir de este bloque comienza el código donde puedes dar formato al slider. /* blog featured posts */ /*------* * * Featured Blog Posts * * * */.blog_featured_post a:hover:before { opacity: 0.6; box-shadow: inset 0px -3px 200px 5px #000; } Este color es la sombra que se pone sobre la imagen del slider al pasar el ratón por encima..blog_featured_post a:before { display: block; position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; box-shadow: inset 0px -3px 300px 5px #000; opacity: 0.5; -webkit-transition: all 0.2s; transition: all 0.2s; } 22

23 Color de la sombra que está encima de las fotos del slider sin pasar el ratón por encima..blog_contents span { font-weight: 300; letter-spacing:.5px; display: inline-block; padding: 8px 20px; font-size: 14px; line-height: 1; text-shadow: none; margin-top: 20px; background: #fff; border-radius: 25px; bottom: 0; font-family: open sans,sans-serif; color: #333; } Color del fondo de las etiquetas y del texto de las mismas que aparece debajo del título en el slider. 23

24 .blog_featured_post a.blog_contents h3 { font-size: 34px; display: inline-block; line-height: 1; letter-spacing: 2px; padding: 10px 20px; background: #fff; text-shadow: none; color: #333; font-weight: 300; } 24

25 Color de fondo y de la letra del título del post en el slider. Seguimos avanzando y nos encontramos con el apartado que da formato al autor del post. /*------[author-box ] */.avatar-container {width: 170px;float: left;}.avatar-container img {width: 125px;height: auto;border: 5px solid transparent;boxshadow: 0px 0px 20px -5px #000;-moz-box-shadow: 0px 0px 20px -5px #000;-webkitbox-shadow: 0px 0px 20px -5px #000;-ms-box-shadow: 0px 0px 20px -5px #000;-obox-shadow: 0px 0px 20px -5px #000;} Esta primera porción da formato al avatar del autor. 25

26 .author_description_container {margin-left: 170px;}.author_description_container h4 {font-weight:600;font-size: 16px;display: block;margin-bottom: 10px;}.author_description_container h4 a{color: #333;}.author_description_container p {font-size: 12px;line-height: 1.7;margin-bottom: 15px;} Esta otra parte da format a la descripción sobre el autor.authorsocial a {display: inline-block;margin-right: 5px;text-align: center;float:left;margin-right:2px;}.authorsocial a i {width: 30px;height: 30px;padding: 8px 9px;display: block;background: #E9E9E9!important;color: $(secondary.background.color);} Y por ultimo el format a las RR.SS. del autor. El siguiente apartado corresponde a los posts relacionados. /*------* * * Related Posts * * * */ Bajamos un poquito y encontramos: div#related-posts h5 {font-size: 16px;text-transform: uppercase;margin: px;padding-bottom:15px;font-weight: 900;letter-spacing: 1px;textalign:center;position:relative;} Esta porción da format al títlo RELATED POSTS. En caso de que quieras cambiar el color al título deberás añadir el código. Este sería el código añadiendo el color: div#related-posts h5 {font-size: 16px;text-transform: uppercase;margin: px;padding-bottom:15px;font-weight: 900;letter-spacing: 1px;textalign:center;color:#ff0000;position:relative;} 26

27 div#related-posts h5:after {content: "";position: absolute;width: 4px;height: 4px;background: #222;border-radius: 50%;bottom: 0;left: 47%;box-shadow: 1em 0px 0px 0px #222,2em 0px 0px 0px #222;} Estos códigos de color son para los tres puntos que están debajo del título RELATED POSTS. Hay que cambiar los tres porque cada uno corresponde a un punto. A continuación tenemos la porción de código para dar formato a las RR.SS. del footer del blog. /* footer _ widget s*/ Bajamos unas líneas y encontramos la porció donde podemos cambiar el tamaño de los iconos y donde podremos apadir el código de color..social-widget a div { display: inline-block; width: 50px; height: 50px; 27

28 font-size: 26px; line-height:1; padding: 14px 0; text-align: center; color: $(primary.background.color); } font-size: 26px;: cambia el tamaño de los iconos. En caso de que quieras cambiarles el color deberás añadir la línea de código..social-widget a div { display: inline-block; width: 50px; height: 50px; font-size: 26px; color: #ff0000!important; line-height:1; padding: 14px 0; text-align: center; color: $(primary.background.color); } 28

29 A continuación vienen dos apartados que no detallaré ya que con la base que tenéis, en caso de que queráis cambiar algo, podéis hacerlo vosotros solos. Ya sabéis que en caso de que algo no os funcione podéis pedir ayuda en el grupo de Facebook. El primer apartado es el de estilos para los comentarios: /***************************************** Comments CSS ******************************************/ Y el siguiente apartado el de los estilos para las plantillas vistas en dispositivos móviles y tablets. /***************************************** Responsive styles ******************************************/ Para cambiar los enlaces del menú buscamos la palabra Portfolio en nuestra plantilla y encontramos: <!-- Main_navigation_Menu --> <ul class='blog_menus'> <li><a expr:href='data:blog.homepageurl'>home</a></li> <li><a href='/p/blog-page.html'>portfolio</a></li> <li><a href='#'>gallery</a></li> <li><a href='#'>archive</a></li> <li><a href='#'>blog</a></li> <li><a href='/p/blog-page.html'>about</a></li> <li><a href='#'>contact</a></li> 29

30 </ul> <div class='clr'/> </div><!-- /ct-wrapper --> </div><!-- /sub-nav-menu --> Aquí podemos cambiar los nombres de los apartados del menú superior y poner los enlaces. Para poder poner el link a nuestros perfiles en los botones superiores de las RR.SS., buscamos: <!-- blog_social_share_buttons --> Y encontraremos lo siguiente. Sólo tienes que cambiar el link general a la red social en cuestión por el de tu perfil. <div class='blog_share'> <ul> <li><a href=' class='fa fa-facebook'/></a></li> <li><a href=' class='fa fa-twitter'/></a></li> <li><a href=' class='fa fa-instagram'/></a></li> <li><a href=' class='fa fa-dribbble'/></a></li> <li><a href=' class='fa fa-pinterest'/></a></li> </ul> </div> 30

31 Y para poner los enlaces a tus perfiles de RR.SS del footer del blog busca los siguiente: <!-- footer_social_icons --> Y te saldrá el apartado donde puedes cambiarlo. <div class='social-widget'> <a href='#' target='_blank'><div class='social-facebook'><i class='fa fafacebook'/></div></a> <a href='#' target='_blank'><div class='social-twitter'><i class='fa fatwitter'/></div></a> <a href='#' target='_blank'><div class='social-pinterest'><i class='fa fapinterest'/></div></a> <a href='#' target='_blank'><div class='social-instagram'><i class='fa fainstagram'/></div></a> <a href='#' target='_blank'><div class='social-google-plus'><i class='fa fa-googleplus'/></div></a> <a href='#' target='_blank'><div class='social-dribbble'><i class='fa fadribbble'/></div></a> <a href='#' target='_blank'><div class='social-linkedin'><i class='fa falinkedin'/></div></a> <a href='#' target='_blank'><div class='social-vimeo'><i class='fa fa-vimeosquare'/></div></a> <a href='#' target='_blank'><div class='social-youtube'><i class='fa fayoutube'/></div></a> <a href='#' target='_blank'><div class='social-rss'><i class='fa fa-rss'/></div></a> </div> 31

32 Y por último, para cambiar los créditos del blog buscamos: all rights reserved Y nos aparecerá esta porción de código: <div class='textwidget'> <p>copyright <a expr:href='data:blog.homepageurl'><data:blog.title/></a> and all rights reserved. <br/> Proudly present by <a href=''>blogger.</a> </p> Aquí ponemos lo que nos interese que aparezca en el footer del blog como créditos. Y hasta aquí los cambios que podemos hacer. La plantilla es bastante sencilla pero para según qué temáticas están muy bien. Eso sí, la he visto recientemente funcionando en un blog y fallaba la zona de posts que se superponía sobre la sidebar. O sea que mi consejo es probarla bien primero para no encontrarnos con algún problema más adelante. También hay apartados, como Meet the author que parece que son para cambiar el estilo de ese apartado, pero no hace nada. Te encuentras más adelante el código. A veces he llegado a pensar si no será cosa de los programadores para despistar. Pero esto es una opinión totalmente personal. 32

33 Si tienes dudas sobre lo explicado ya sabes que puedes contactarnos en el grupo de facebook, o por , y resolveremos todas tus dudas. Compartes la tuya en el grupo de Facebook para que podamos verla todas? 33