mscommunity.net

Interactive mscommunity.net online activities
Signed in as anonymous | Edit Profile | Sign out | Help
in Search

Weblog :: Boris Ševo

Sporadic posts about my interests, e.g. software development (mostly .NET), technology in general and some occasional rant.

Rounded corners for Web Parts in ASP.NET 2.0 using only CSS

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; }





 






Comments

 

tbronzin said:

Excelent example, much more simple, good work!

listopad 4, 2007 3:12
 

anonymous said:

Do you happen to have the image files?    The original blog points to the webpart components workspace at GotDotNet but that is no longer available.    Before I make my own images I thought I'd check..  

Thanks!

Gary

veljača 1, 2008 7:02
 

boris.sevo said:

veljača 1, 2008 8:05
 

anonymous said:

Thanks!

veljača 1, 2008 9:45
 

anonymous said:

There is a way to only use CSS and PNGs so that all webparts in a site share the same skin. Here it is: madalina.blog.com/2705257

veljača 15, 2008 11:12
 

anonymous said:

Excellent example.

However, I am trying to make the web part headers in such a way that they are gradients (with rounded corners) instead of a single background colour. Changing the corner images and putting gradient image as a repeating background didnt work. Can you please provide any assistance in this regard? Thanks a lot

srpanj 6, 2008 10:30
 

anonymous said:

Excellent example..

thx

but I can't find a way that repeated middle image..

Can't U help me?

srpanj 24, 2008 9:30
 

boris.sevo said:

I'm sorry but I don't understand the problem with the middle image because there is no repeated middle image. There is only 2 images - one for the top left corner and one for the top right corner. The space between this two images isn't repeated image. This space just has colored background.

srpanj 24, 2008 8:18
 

anonymous said:

reply thx.

yea..  sorry, my English not good...

I wanna find a way that 3 Image's Rounded Titlebar.

Sadly I can't find that...

All on the Net, Just In The MOSS  :(

srpanj 25, 2008 8:23
 

anonymous said:

do you have similar for MOSS 2007 web parts?  I am pulling my hair out trying to style them.

studeni 27, 2008 12:19
 

anonymous said:

The code is given above is not working. I think there is a problem in

background-image:url(../images/boxHeaderTopLeft.gif);

background-image:url(../images/boxHeaderTopRight.gif);

These images are not reflecting the changes in IE.

prosinac 4, 2008 9:49

Leave a Comment

(required) 
(optional)
(required) 
Submit
Powered by Community Server (Commercial Edition), by Telligent Systems