Portlets com bordas arredondadas no Plone

Um detalhe que pouca gente presta atenção é que o Plone trás no código de seus portlets marcações padronizadas com as classes específicas para cada um de seus quatro cantos. Com essas marcações  podemos, entre outras coisas criar bordas as arredondadas de nossos layouts. É isso o que veremos neste post.

Em primeiro lugar crie as quatro bordas no seu editor de imagens favorito.  Os quatro cantos do portlets serão colocadas em um mesmo arquivo portlet-corners.gif, como no exemplo abaixo:

portlet-corners.gif

Depois aplique o seguinte estilo em seu site:

.portlet { border-bottom:0pt none; margin-left:2px; margin-bottom:0px;} .portlet dd {margin-left:0px;} dd.portletFooter{border-top:0px !important;} .portletHeader, .portletFooter, .lastItem {     position: relative !important;     border:none;     background-color:transparent; } .portletTopLeft {     background: transparent url(portlet-corners.gif) top left no-repeat;     position: absolute;     height: 5px;     width: 5px;     border: none;     left: 0px;     top: 0px; } .portletTopRight {     background: transparent url(portlet-corners.gif) top right no-repeat;     position: absolute;     height: 5px;     width: 5px;     border: none;     top: 0px;     right: 0px; } .portletBottomLeft {     background: transparent url(portlet-corners.gif) bottom left no-repeat;     position: absolute;     height: 5px;     width: 5px;     border: none;     bottom: 0px;     left: 0px; } .portletBottomRight {     background: transparent url(portlet-corners.gif) bottom right no-repeat;     position: absolute;     height: 5px;     width: 5px;    border: none; bottom: 0px;     right: 0px;     margin-right: 0px; }

Este css simplesmente posiciona e exibe em cada um dos cantos do portlet a porção equivalente da imagem que criamos. Essa técnica de usar vários posicionamentos de uma mesma imagem de fundo é um recurso bastante poderoso que pode ser usado em várias situações. Em breve abordaremos elas aqui no blog também.