TheGoldenAura

Round corners em Plone

Friday, March 2nd, 2007

CSS para round corners dos portlets em Plone CMS.

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 :)

Tags: , , ,