Photobucket

18 de fev. de 2008

Main Wrapper - Área de Postagem

Hoje vou mostrar como personalizar a área de postagem, esse vai ser mais um post da 'saga' Códigos Básicos. Lembrando que eu uso o Template Mínima do Blogger como base (aquele primeiro dos modelos disponibilizados!). Vamos lá!


Basicamente são dois trechos que se tratam desse elemento o primeiro é a área total de post e outro os elementos de dentro do post (título, data), para esse post não ficar muito extenso dividirei em dois posts. Esse será sobre a área total de post (MAIN-WRAPPER):


#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Nesse trecho é possível basicamente:

Alterar o tamanho da coluna de post - para fazer isso é só mudar o número na parte destacada em vermelho.
Atenção: Cuidado na hora de fazer isso, lembre-se do total do seu template (outer-wrapper) e das margens para não deixar seu template desalinhado e todo torto!

Colocar um background (fundo) - isso é bem simples também, adicione 'background' a esse trecho como mostrado abaixo:

Cor:
background: #000000;

Imagem:
background: url (IMAGEM) repeat;

Ficará assim:

#main-wrapper {
background: #000000;
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


ATENÇÃO: Para mais informações sobre como alterar o background clique aqui e procure por background no post!

Adicionar borda - Isso também é simples, é só adicionar a seguinte opção no trecho:

border: 1px solid #000000;

Ficará assim:

#main-wrapper {
background: #000000;
border: 1px solid #000000;
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Para saber como modificar as opções de borda clique aqui.

Mudar o posicionamento das postagens - isso já é um pouco mais complicado, e vai depender muito do seu template.
O posicionamento é definido pelo FLOAT. No Mínima, as postagens estão a esquerda da coluna, ou seja, ÁREA DE POSTAGEM - COLUNA por isso está float: $startSide;.

Como no Mínima:
Se no seu está assim também e você quer que seja COLUNA - ÁREA DE POSTAGEM, mude o $startSide para $endSide.
Só que será necessário mudar também a coluna (sidebar), provalvemente estará assim:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Mude o $endSide para $startSide, visualize, e veja como ficou!

Diferente do Mínima (Left, Right):
Se o seu template não está $endSide - $startSide, mas sim Left (direita) - Right (esquerda), como abaixo:

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Altere Right e Left como preferir. E pronto o posicionamento fica como você preferir!

Adicionar/ Alterar margin - talvez a área de postagem precise de margens, ou seja, ficar mais longe de determinado elemento ou mais perto. Lembre-se que margem é a relação entre um elemento e outro (coluna e área de postagem, por ex.).
Adicione o trecho abaixo em main-wrapper, caso já haja esse trecho você apenas modifica os valores:

margin: 0px 0px 0px 0px;


Modifique 0 (zero) para o número que você quiser, sempre visualizando antes de salvar, para ver o resultado!
Lembrando que na linguagem do código o sentido é horário, ou seja, o primeiro é topo, segundo direita, terceira abaixo e, quarto esquerda!
É provável que para alinhar as postagem você precise também alterar a margem da coluna, faça isso da mesma forma que modificou a área de postagem.

Adicionar/ Alterar padding - padding é a distância das bordas da área de postagem para seus elementos internos. Para alterar é o mesmo esquema da margem.

Padding: 0px 0px 0px 0px;

Por esse post é isso, esses são basicamente os elementos que podemos mudar na área total de postagem, no próximo post explicarei como alterar os elementos internos!
Dúvidas, já sabem, só falar!

Até a próxima!

19 Comments:

Kika Honeycutt said...

Ro, ainda não li o post todo com calma, mas já vi que serei uma frequentadora assídoa nessa saga dos códigos base. ^^

Bjos pra ti.

Rô Rezende said...

Kika Honeycutt: Fico feliz, moça!!! Seja muito bem-vinda! Espero poder ajudar, se tiver dúvidas ou achar que me expressei mal em algum momento, por favor, avise!
Bjos

jaime said...

Moça, como forma de agradecer pelas dicas que você disponibiliza, coloquei um link em meu blog pro Cria Recria.

Kika Honeycutt said...

Ro, obrigada pelo commentário lá no meu blog. Fiquei muito feliz com ele. ^__^
Bom, o template que está lá não é meu, peguei no Templates para Novo Blogger. Mas achei ele tão lindo que não tenho nem coragem de colocar outro. :)

Bom, sobre ajudar... Eu to precisnado de ajuda. >.<
Estou tentando entrar agora de cabeça nos códigos do blogger e meu primeiro template está um pouco complicado... Ele já está pronto. Tudo está onde supostamente deveria estar exceto pela coluna do perfil. Que eu gosteria que estivesse no topo da ágina e não está.

Pode dar uma olhadinha no endereço e se tiver alguma luz, me fala?
www.gtbykika.blogspot.com

O template eu fiz com 3 colunas: newsidebar sobre sidebar e main. o resultado final deve ser algo próximo dessa idéia: www.gtbykika.weblogger.terra.com.br

Bjinhos moça. ^^

Rô Rezende said...

Jaime:Obrigada pelo link, moço...te linkarei por aqui também!



Kika Honeycutt: O template é lindo mesmo, moça.

Sobre o problema do seu...você já conseguiu resolver, pq não vi problemas por lá...

Bjos

Kika Honeycutt said...

Consegui resolver sim Rô, obrigada. ^___^

coloquei uma margin-top com valor negativo para a sidebar que te a imagem. Daí tudo se ajustou. ^^""

Bjinhos. ^^

Rô Rezende said...

Kika Honeycutt: Que bom que conseguiu arrumar, moça! E desculpe não ter podido ajudar.

Bjs

Johnny Mordred said...

realmente, parabéns pelo tuto, muito bom ele...
bem, mas ainda me restou algumas duvidas...
estou tentando modificar (novamente) o layout do meu blog, mas a área de postagem ainda está longe do q eu queria...
bem, gostaria q ela ficasse igual a area de psotagem desse site:

http://www.meikai-animes.com/

note q a data, o assunto e o nome de quem postou está acima do conteúdo em si...

enfim, se vc conseguisse para mim isso...
quero q apareça a imagem da pessoa q postou, se tratando q meu blog tem muitos autores (ou ao menos, ainda terá, já q nao mandei os convites xD)

agradeço desde já a ajuda...

meu blog: http://1mm-project.blogspot.com/

Edu Chaves said...

OI,
estou criando meu blog, comecei na quinta-feira dia 8 mas estou fazendo as alterações em um blog teste, pra depois passar para o meu blog.
A minha dúvida é que quando mudo o widght do main wrapper e do sidebar eles se afastam, queria que eles ficassem um pouco juntos.
O código está assim
(por enquanto)
#main-wrapper {
background-color:#FFFFFF;
border: 1px solid $bordercolor;
padding: 5px 5px 0 5px;
width: 600px;
margin: 0 0 0 0px;
_margin: 0 0 0 0px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 180px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Me ajudaria?
ficarei grato.

Anônimo said...

Colocar um background é fácil, pórem, como se faz para que esse background color ou imagem apareça apenas na página inicial do blog .. e não em todas as páginas do blog... e agora?

lmcgsr said...

ALguém sabe como colocar "caixas" diferentes para posts diferentes?
Para entre os posts ficar um espaço em que se via o background do próprio blog. Não sei se me fiz entender...
Mesmo que ninguém saiba explicar que me encaminhe para onde possa ver...

Anônimo said...

Boa Tarde,

Muito obrigada pelas dicas; estão a ajudar-me imenso!!!

Estive a alterar o Sidebar-wrapper no meu blog. Uso o modelo Sample blog: Thisaway Rose.

Consegui alterar com uma cor de fundo e imagem. O problema é que os "desenhos" base da coluna permanecem na coluna, ficando a cor com desenhos. Será que me pode dizer como retirar os tais desenhos?

Muito obrigado!!!

Mariza

Anônimo said...

Uso o modelo Sample blog: Thisaway Green e gostava de saber como separar a coluna sidebar e a Main-wrapper.

Gostava também se saber se é possível alterar as medidas destas colunas?

Cumprimentos

Pedro

Anônimo said...

Boa Tarde,

Estou a fazer um template/fundo para o meu blog mas não acerto com as medidas. A imagem de fundo fica sempre mal.

Será que me pode ajudar?

Mariza

Rô said...

Moça, passa seu e-mail para q eu possa te ajudar.

Anônimo said...

O meu email é
mariza_fernandez@hotmail.com

Obrigado pela ajuda!

Começei nestas andanças há nem uma semana, agradeço muito às pessoas que têm estas iniciativas de partilhar os seus conhecimentos!

Mariza

Bells said...

oi, eu preciso muito da sua ajuda, eu coloquei uma imagem no fundo do post, só que eu qria detalhei mais essa imagem e os textos do blog estão desalinhados ao bg que eu coloque.

pra c mais especifica vou colocar o link do blog:

http://sugarstarbr.blogspot.com/

c vai v na area do post o problema... qria muito q ficasse nesse estilo, pq muitas pessoas fazem templates assim.

Bells said...

vlw mesmo pela ajuda Rô; abraços!

Alan said...

Valew, Me Ajudou Muito!!!!!