ASP.NET Web Parts controls are an integrated set of controls for
creating web sites that enable the
users to modify the content,
appearance, and behavior of web pages directly in a browser. Although
they are very handy controls, specially when you are building a web site which users can customize
by their needs and preferences, they are sometimes not so friendly when you need to customize
Web Parts layout. Few months ago I was working on a web site which has a similar purpose as
pageflakes and I was trying to customize web parts so that they have rounded corners. Only solution
that I found was this David Barkol's post in which he wrote: To get rounded corners you have to
extend both the WebPartZone and
WebPartChrome classes to override a few methods and basically
add
padding to the corners.
This solution obviously works, but it is a little bit complicated. I was thinking that this can't be the
only way to accomplish it. Yesterday, after 2 hours of playing with CSS and Web Parts I
finally found a solution. You don't need to extend any part of Web Parts, you just need to specify few
CSS classes and you have Web Parts with rounded corners.
Note that this solution provides only rounded corners for left and right corners at top.
So, here are the snippets of code.
/*ASPX*/
<asp:WebPartZone ID="Zone1" runat="server" EmptyZoneText="Drag widgets here"
HeaderStyle-CssClass="PartZoneHeader" CssClass="PartZone"
BorderStyle="None"
PartStyle-CssClass="PartStyle" PartTitleStyle-CssClass="PartTitleStyle"
PartChromeStyle-BorderColor="White" MenuPopupStyle-BackColor="#C1D4E3"
MenuPopupStyle-Font-Size="10px">
<ZoneTemplate>
... your controls
</ZoneTemplate>
</asp:WebPartZone>
/*CSS*/
.PartTitleStyle {
background-color:#C1D4E3;
height:25px;
font-size:8px;
padding:0px 0px 5px 10px;
background-image:url(../images/boxHeaderTopLeft.gif);
background-repeat: no-repeat; background-position: left top; }
.PartTitleStyle table {
background-image:url(../images/boxHeaderTopRight.gif);
background-repeat: no-repeat;
background-position: right top;}
.PartTitleStyle table tr td {
padding:10px 10px 0 10px;}
.PartTitleStyle table tr td span {
font-size:12px;
font-weight:bold;
background-color:#C1D4E3;
padding-right: -10px; }
.PartStyle {
background-color: #F8F8f0;
border: solid 1px #DDDDDD; }
.PartZone {
border:dashed 1px #DDDDDD; }
.PartZoneHeader {
height:0px;
display:none; }