Como tornar um template responsivo- códigos para o Modelo Espetacular

Views:
CORREÇÃO DO VIEWPORT

Localize:
<?xml version="1.0" encoding="UTF-8" ?>

Selecione até achar

<b:skin><![CDATA[/*

E substitua pelo CÓDIGO DE CORREÇÃO DO VIEWPORT, CORREÇÃO DO POSICIONAMENTO DO TÍTULO DO POST E OPENGRAPH DO FACEBOOK:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='pt-BR' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<!-- FACEBOOK -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/>-<data:blog.title/></title>
<b:else/>
<title> Página não encontrada!</title>
</b:if>
</b:if>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<b:skin><![CDATA[/*


CORREÇÃO DA ÁREA DE EXIBIÇÃO DO TEMPLATE

Localize:
/* Columns
----------------------------------------------- */
.content-inner {
  padding: 0;
}

Aí selecione o trecho que marquei em vermelho e troque-o por:

.content-inner {
width: 100%;
max-width: 1440px;
margin: 0 auto
}


AJUSTE DO HEADER

Localize:

/* Header
----------------------------------------------- */

Vá até o final da área e antes de /* Tabs cole o CÓDIGO DE AJUSTE DO HEADER:

#Header1_headerimg {
width: 100%;
max-width: 628px; /* LARGURA DO SEU LOGO OU CABEÇALHO, ALTERE COM A SUA MEDIDA EXATA*/
height: auto;
margin-top: 2.9em; /* DISTANCIA O LOGO EM RELAÇÃO AO TOPO, ALTERE SE PRECISAR*/
margin-bottom: -2em !important;
z-index: 99999;
}

Localize:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

E coloque o comando para centralizar o cabeçalho, ficando assim:

<center><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></center>



AJUSTE DO LAYOUT

Localize:

/* Widgets
----------------------------------------------- */

Selecione até chegar em

.sidebar .widget {

Substitua todo o trecho pelo código abaixo:

/* LAYOUT GERAL
----------------------------------------------- */
.main-inner {
margin-top:0.0em;
}
.main-inner .column-center-inner {
padding: 20px 0;
}
.main-inner .column-center-inner .section {
margin: 0 22px;
}
/* COLUNA LATERAL DIREITA*/
.main-inner .column-right-outer {
width: 30%;
}
.main-inner .column-right-inner {
margin-left: 0.8em;
margin-right: 0.5em;
margin-top: 0.1em;
background: $(widget.outer.background.color);
}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-left: 30px;
}
/* ÁREA DOS POSTS NO LAYOUT*/
.main-inner .column-center-outer {
width: 70%;
background: transparent none repeat scroll top left;
}
/* COLUNA LATERAL ESQUERDA*/
.main-inner .column-left-inner {
margin-right: 10px;
}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: 10px;
background: TRANSPARENT none repeat scroll top left;
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 0.9375em 0;
}


CORREÇÃO DA ÁREA DOS POSTS

Localize:

/* Posts
----------------------------------------------- */

E selecione até achar

/* Comments
----------------------------------------------- */

Troque todo o código selecionado por este:

/* ÁREA DA DATA E POSTS
----------------------------------------------- */
body .main-inner .Blog { padding: 0; margin-bottom: 1em; background-color: transparent; border: none;}
.main-inner .section:last-child .Blog:last-child { padding: 0; margin-bottom: 1em;}
.main-inner .widget h4.date-header {
margin: 0 -15px 1px;
padding: 0 0 $(date.padding.bottom) 0;
font:$(date.font);
text-align: center;
color: $(date.text.color);
background: $(date.background);
  border-top: $(date.border.size) solid $(date.border.color);
  border-bottom: 1px solid $(widget.border.bevel.color);
  -moz-border-radius-topleft: $(date.header.border.radius.top);
  -moz-border-radius-topright: $(date.header.border.radius.top);
  -webkit-border-top-left-radius: $(date.header.border.radius.top);
  -webkit-border-top-right-radius: $(date.header.border.radius.top);
  border-top-left-radius: $(date.header.border.radius.top);
  border-top-right-radius: $(date.header.border.radius.top);
  position: $(date.position);
  bottom: 100%;
  $(date.side): $(date.header.position);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget h4.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

.date-outer {
  position: relative;
  margin: $(date.space) 0 20px;
  padding: 0 15px;
  background-color: $(post.background.color);
  border: 1px solid $(post.border.color);



  -moz-border-radius: $(widget.border.radius);
  -webkit-border-radius: $(widget.border.radius);
  -goog-ms-border-radius: $(widget.border.radius);
  border-radius: $(widget.border.radius);
}

.date-outer:first-child {
  margin-top: 0;
}

.date-outer:last-child { margin-bottom: $(date.last.space.bottom);}
.date-posts {
  margin: 0 -$(separator.outdent);
  padding: 0 $(separator.outdent);
  clear: both;
}

.post-outer, .inline-ad {
  border-top: 1px solid $(post.border.bevel.color);

  margin: 0 -$(separator.outdent);
  padding: 15px $(separator.outdent);
}

.post-outer {
  padding-bottom: 10px;
}

.post-outer:first-child {
  padding-top: $(post.first.padding.top);
  border-top: none;
}

.post-outer:last-child, .inline-ad:last-child {
  border-bottom: none;
}
/* AJUSTES DA ÁREA DOS POSTS
----------------------------------------------- */
.post-body { position: relative;}
.blogger-post-body img {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
.blogger-post-body img{margin-top:10px;padding: 5px; margin-left: -1em;float: center !important;width:auto;height:auto;}
.blogger-post-title {
text-align: center;
font: $(post.title.font);
text-transform: none;
margin-top: 10px;
margin-bottom: 15px;
color: $(post.title.text.color);
}
.blogger-post-labels {
margin-top: 1em;
display:block;
padding:4px;
text-align: center;
font: normal 14px 'open sans';
text-transform: none;
}
.post-header { margin: 0 0 1em;}
.post-body { line-height: 1.4;}
.post-outer h2 { color: $(body.text.color);}
.post-footer {text-align: center; margin: 1.5em 0 0;}
#blog-pager {
  padding: 15px;
  font-size: 100%;
  background-color: $(pager.background.color);
  border: 1px solid $(widget.border.color); 
  margin-top: $(pager.space.top);
}

.blog-feeds, .post-feeds { margin: 1em 0; text-align: center; color: $(feed.text.color);}
.blog-feeds a, .post-feeds a { color: $(feed.link.color);}
.blog-feeds a:visited, .post-feeds a:visited { color: $(feed.link.visited.color);}
.blog-feeds a:hover, .post-feeds a:hover { color: $(feed.link.hover.color);}
.post-outer .comments { margin-top: 2em;}



AJUSTES E CORREÇÕES

Localize:

]]></b:skin>

E cole os CÓDIGOS DE CORREÇÃO E AJUSTES acima dessa tag:

/* CORREÇÃO DE ERROS
----------------------------------------------- */
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* RESPONSIVOS by Elaine Gaspareto */
img, embed, iframe, object, video, #player {
max-width: 100%;
border:0;
}

/*** AJUSTES ***/
#navbar-iframe {display: none !important; }
 body .navbar {height: 0 !important}
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {display: none;}
.feed-links {height:0px;visibility:hidden;display:none;}
.Attribution{display: none; !important;}
.feed-links { display: none; }
.sidebar ul li {list-style: none;vertical-align: top;padding: 0;}


CÓDIGO QUE DEFINE A RESPONSIVIDADE

Localize:

<b:template-skin>

Selecione a área toda, até </b:template-skin>

E troque pelo código abaixo:

<style type='text/css'>
/* MEDIA QUERIES- DEFINE A RESPONSIVIDADE NAS PÁGINAS INTERNAS DO POST
----------------------------------------------- */
@media screen and (max-width : 1152px) {
.blogger-post-body img{margin-top:10px;padding: 5px; margin-left: -1em;float: center !important;width:auto;height:auto;}
}
@media screen and (max-width : 900px) {
.main-inner .column-center-outer {width:100%; }
.main-inner .column-center-inner {padding: 0 1em;}
.main-inner .column-right-outer{width:100%;}
.main-inner .column-right-inner {margin-right: 15px;}
}
@media screen and (max-width: 800px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {
width: 100%!important;
margin-right: 0!important;}
.post-body img{margin-top:10px;padding: 5px; margin-left: -1em;float: center !important;width:auto;height:auto;}
}
</style>
<!--MEDIA QUERIES- FINAL-->


Formulário de contato

Nome

E-mail *

Mensagem *