Área do post dentro de caixinha (Main)

Olá, boa tarde abiguinhos, tudo bem? Fresco por ai? Aqui está chovendo e baixou a temperatura drasticamente (estava quase 40º) caiu para 20º. Adoro tempo chuvoso e fresco pois podemos ficar na cama vendo filmes, séries ou qualquer coisa que estejamos a fim.. Eu sou a pessoa que ama inverno e tento entender com todas as forças quem diz que ama verão, sério véi, verão é bom apenas para quem tem dinheiro o bastante para ficar o dia inteiro no ar, ir para praia, viajar etc.. Verão definitivamente não foi feito para os pobres :v Digo todas essas coisas com propriedade pois me incluo na lista de pobres e que odeiam verão =(

Então, desabafei meus pensamentos sobre o tempo e irei ir ao ponto rsrs, uma leitora me pediu para ensinar como por a área de post dentro de uma caixinha, confesso que eu amo layouts assim e não consigo mais fazer layout sem que esteja dentro dessas caixinhas, eu acho que ficam muito fofos e super organizados quando trabalhados corretamente. E sobre esse tuto, eu já tenho um aqui no blog  explicando como editar o main porém acredito que as pessoas não entenderam muito bem ele então como uma boa pessoa e que escuta as pessoas, eu estou aqui de novo criando este tuto e desta vez mais explicado que o último, assim eu espero que seja rsrs.

Primeiro antes de começar, esse tutorial eu estou fazendo com os códigos que eu uso praticamente em todos os meus layouts, e para chegar no resultado que cheguei hoje, eu fucei muita coisa, testei vários códigos para finalmente chegar no que eu queria, então para mim esses códigos deram muito certo e ainda dão hoje em dia, então por favor, não se baseiem por outros tutoriais até porque esses códigos são meus, vocês até podem achar tutoriais ensinando a editar o main mas não acharão post igual ao meu, fica a dica. Bora lá?

Antes de tudo, salve o seu modelo, tudo o que for alterar vá salvando e conferindo se está tudo certo e caso não esteja, volte e use o seu modelo primário novamente. Prestem muita atenção e tentem efetuar o passo a passo certinho para não dar nada errado.

Vá até o seu modelo, clique em editar o html e dentro procure por /* Main, se você não mexeu em nada, os códigos estarão mais ou menos assim:

Depois de ter localizado a parte do main dentro do html, você irá apagar tudo e deixar os códigos exatamente como no print abaixo:

Apagou certo? Agora vamos editar todo ele e por favor prestem atenção ok? Abaixo colocarei os códigos certos então copiem e colem como está citado abaixo, eu deixei colorido todos os códigos que vocês deverão mudar:

.main-inner {

overflow-y:auto;

overflow-x: hidden;

height: ALTURA DA CAIXA NO LAYOUT px; 

width: LARGURA DA CAIXA px;

margin-top: ALTURA NO TOPO DA CAIXA px;

margin-bottom: ALTURA NA PARTE DE BAIXO DA CAIXA px;

padding-top: ALCOCHOAMENTO NA PARTE DE CIMA px;

padding-bottom: ALCOCHOAMENTO NA PARTE DE BAIXO px;

padding-left: ALCOCHOAMENTO NO LADO ESQUERDO px;

padding-right: ALCOCHOAMENTO NO LADO DIREITO px;

background:# COR DO FUNDO;

border-right: solid #COR DA BORDA LADO DIREITO / TAMANHO DA BORDA px;

border-top: solid #COR DA BORDA DO TOPO / TAMANHO DA BORDA px;

border-bottom: solid #COR DA BORDA DE BAIXO / TAMANHO DA BORDA px;

border-left: solid #COR DA BORDA LADO ESQUERDO / TAMANHO DA BORDA px;

outline: 1px solid # COR DA BORDA DE FORA;

background-attachment: fixed;

background-size: auto;

z-index: 99px;

                                  min-width: 0;                              

max-width: 100%;

width: auto;

-webkit-border-radius: BORDA EM VOLTA DA CAIXA TAMANHO px;

-moz-border-radius: BORDA EM VOLTA DA CAIXA TAMANHO px;

border-radius: BORDA EM VOLTA DA CAIXA TAMANHO px;

text-decoration: none;

}

.main-inner .column-center-outer {

background:;

background-image: none;

margin-top: px;

text-decoration: none;

}

.main-inner .column-right-inner { SE ESCOLHEREM O LADO DIREITO DA SIDEBAR

width: TAMANHO DA SIDEBAR px;

margin-top: ALTURA DA SIDEBAR NO TOPO px;

margin-left: ALTURA DO LADO ESQUERDO DA SIDEBAR px;

position:;

text-decoration: none;

}

.main-inner .column-left-inner { SE ESCOLHEREM O LADO ESQUERDO DA SIDEBAR

width: TAMANHO DA SIDEBAR px;

margin-top: ALTURA DA SIDEBAR NO TOPO px; 

margin-left: ALTURA DO LADO ESQUERDO DA SIDEBAR px;

position:;

text-decoration: none;

}

.main-inner .column-center-inner {

padding: 0;

}

.main-inner .column-center-inner .section {

margin: 0;

}

.main-outer {

border-top:;

}

.fauxcolumn-left-outer .fauxcolumn-inner {

border-right: px solid;

}

.fauxcolumn-right-outer .fauxcolumn-inner {

border-left: px solid;

}

E aqui abaixo coloquei os códigos usados no tema que verão abaixo que deixei como teste:

/* Main

----------------------------------------------- */

.main-inner {

overflow-y:auto;

overflow-x: hidden;

height:425px; 

width: 420px;

margin-top:10px;

margin-bottom:-25px;

padding-top:13px;

padding-bottom:-25px;

padding-left:60px;

padding-right:35px;

background:#e3d0e6;

border-right: solid #fff 5px;

border-top: solid #fff 13px;

border-bottom: solid #fff 13px;

border-left: solid #fff 13px;

outline: 1px solid #ccb9cf;

background-attachment: fixed;

background-size: auto;

z-index: 99px;

min-width: 0;                              

max-width: 100%;

width: auto;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

text-decoration: none;

}

.main-inner .column-center-outer {

background:;

background-image: none;

margin-top: px;

text-decoration: none;

}

.main-inner .column-right-inner {

width:220px;

margin-top:68px;

margin-left: 25px;

position:;

text-decoration: none;

}

.main-inner .column-left-inner {

width:px;

margin-top:px;

margin-left: px;

position:;

text-decoration: none;

}

.main-inner .column-center-inner {

padding: 0;

}

.main-inner .column-center-inner .section {

margin: 0;

}

.main-outer {

border-top:;

}

.fauxcolumn-left-outer .fauxcolumn-inner {

border-right: px solid;

}

.fauxcolumn-right-outer .fauxcolumn-inner {

border-left: px solid;

}

Aqui segue o link para preview de como ficou o tema teste, assim vocês terão noção de como fica o tema com os códigos citados acima - PREVIEW

Então, acha que acabou? Doce engano rsrs, vocês perceberam que eu escrevi nos códigos sobre a sidebar certo? Pois bem, tem código de sidebar pois quando vocês optam por usar o main assim, a sidebar fica desconfigurada, no caso ela fica fora do lugar e claro, fora da caixa. E é por isso que vocês tem que prestar atenção no que eu irei informar abaixo.

A sidebar, vocês irão continuar a usar o modelo que usam, o corpo dela, e até a parte do título dela, no entanto, vocês terão que usar os códigos abaixo para poder mexer ela dentro da caixa do main.

Exemplo, vocês tem que nomear a sidebar de vocês certo? A do tema do preview eu coloquei welcome, e vocês irão por o nome que quiserem, e após ter feito isso, vocês irão no html, e dentro irão procurar pelo o nome da sidebar de vocês.

Aqui abaixo é como vocês irão achar o código da sidebar dentro do tema:

Estão vendo que a id dela é HTML3? Então, a de vocês pode ser que estejam com a numeração diferente no final, independente da numeração que esteja, vocês irão no tema, irão procurar por ]]></b:skin> e acima dele, irão copiar o seguinte código:

#HTML3 { SUBSTITUA PELA NUMERAÇÃO DA SUA

padding-left:  ALCOCHOAMENTO DO LADO ESQUERDO px;

padding-right: ALCOCHOAMENTO DO LADO DIREITO px;

padding-top: ALCOCHOAMENTO DO TOPO px;

padding-bottom: ALCOCHOAMENTO DE BAIXO px;

background:# COR DO FUNDO;

border-radius: 1px;

z-index:1;

-webkit-transition-duration: .50s;

}

Salve tudo e confira se está tudo certo, se sim, parabéns, você seguiu o tuto bem certinho e não esqueça de que se você tiver mais de uma sidebar você terá que incluir cada uma dela dentro do html e ir numerando elas conforme constar na ID de cada uma, é isso ai e caso ficou alguma dúvida é só me chamar, pode usar as minhas redes sociais pra isso.. Beijos more =3