Corrigindo a área útil para a implementação de layouts

[Bráulio Bhavamitra]

Olá comunidade,

No CIRANDAS e no ESCAMBO, para implementação dos layouts foi necessário
aumentar a área útil de conteúdo (elemento #content), que hoje gira por
volta de 940px (938px no softwarelivre.org e 941px no blogoosfero), para o
padrão de 960px usado pelos designers em muitos sites.

Isto é extremamente importante para que as grades de layouts, com seus
módulos e intercolúnios, se encaixem neste valor de 960px.
Também dá mais espaço para aplicativos web que existem dentro de uma rede
noosfero.

No caso do CIRANDAS, este "conserto" foi feito no tema. Para ajudar o
alinhamento dos muitos itens do layout e criar a harmonia do alinhamento,
se aumentou a largura do blocos e se diminuiu a área de conteúdo, ajudando
a experiência de leitura.

Já estamos há algum tempo com este ajuste e não registramos problemas em
relação a isto.

Segue abaixo o código que usamos.

abraços,
bráulio

/* Fix to 960px effective content */
#wrap-1 {
  position: relative;
}

#wrap-1,
#footer-content,
#theme-footer {
  width: 1040px;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
}

#wrap-1 {
  background: transparent url(images/content-bg.png) center top repeat-y;
}

#wrap-2 {
  padding: 24px;
  padding-top: 0;
  background: transparent;
  border-color: transparent;
  border: none;
  border-top: 1px solid #D3D7CF;
}

.box-2,
.box-3 {
  width: 220px;
}

body.template-default .box-1 {
  margin: 0 244px 0 244px;
}
body.template-2leftbars .box-1 {
  margin: 0 0 0 488px;
}
body.template-rightbar .box-1 {
  margin: 0 244px 0 0;
}
body.template-leftbar .box-1 {
  margin: 0 0 0 244px;
}

#content .link-list-block li a.link-this-page {
  max-width: none;
}

#profile-activity ul,
#profile-network ul,
#profile-wall ul {
  width: 100%;
}
.ui-tabs .ui-tabs-panel {
  padding: 0;
}

#main-content-wrapper-1,
#main-content-wrapper-2,
#main-content-wrapper-3,
#main-content-wrapper-4,
#main-content-wrapper-5,
#main-content-wrapper-6,
#main-content-wrapper-7,
#main-content-wrapper-8 {
  background: transparent;
  padding: 0;
}

/* end */
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listas.softwarelivre.org/pipermail/noosfero-br/attachments/20130512/081982f6/attachment.html>