Round corners em Plone
Friday, March 2nd, 2007CSS 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: code, css, opensource, plone
