Restyle do site com o webdesign e logotipo por Helder Luis da Notype.

Hoje, estive a corrigir o código html e css, conseguindo assim validar os testes W3C para CSS, XHTML 1.0 Transitional e Feeds. O site ainda não está terminado, mas não suportava a ideia de ter um site que não respeita os standards.

Mais um novo restyling ao site, desta vez em tons mais escuros…

O último restyle foi em finais de Março, 3 meses. Espero que este aguente mais tempo (no anterior restyle tinha dito o mesmo).

Estou farto de CSS e o plone tem MUITO CSS!!!!

CSS, CSS, CSS, CSS, CSS, CSS, CSS… cada dia estou mais farto de CSS.

Espero que este restyle me agrade durante mais tempo que os anteriores.

Estou a trabalhar numa nova skin para Plone, feita com o DIYPloneStyle, para o futuro site de AUZProjekt.

Pela primeira vez tentei usar “round corners” em Plone, tudo com CSS e usando as classes .portletTopLeft, .portletTopRight, .portletBottomLeft e .portletBottomRight.

O conceito é simples, criar 4 imagens que ficarão colocadas nos 4 cantos dos portlets…. mas na realidade não foi tão fácil, porque as imagens ficavam nos cantos do browser e não nos cantos do portlet… e no plone.org não encontrei nenhum tutorial ou howto explicativo (o único disponível usa imagens únicas para o header e footer do portlet, obrigando a uma largura fixa).

Depois de superada esta dificuldade, aqui fica o código CSS necessário para roundcorner em Plone:

.portletHeader,

.portletFooter,

.lastItem {

    position: relative!important;

}

.portletTopLeft {

    background: transparent url(imgtopoesq.ext) top left no-repeat;

    position: absolute;

    height: 8px;

    width: 8px;

    border: 0;

    left: 0;

    top: 0;

}

.portletTopRight {

    background: transparent url(imgtopodir.ext) top right no-repeat;

    position: absolute;

    height: 8px;

    width: 8px;

    border: 0;

    top: 0;

    right: 0;

}

.portletBottomLeft {

    background: transparent url(imgfundoesq.ext) bottom left no-repeat;

    position: absolute;

    height: 8px;

    width: 8px;

    border: 0;

    bottom: 0;

    left: 0;

}

.portletBottomRight {

    background: transparent url(imgfundodir.ext) bottom right no-repeat;

    position: absolute;

    bottom: 0;

    right: 0;

    height: 8px;

    width: 100%;

    margin-right: 0;

}

Colocarei um howto no plone.org para que outros não percam o tempo que eu perdi :)

Hoje fiz algumas correcções de CSS e aproveitei para modificar um pouco o design do site.