Cool Web Parts?

23 Nov 2005 6:33 PM

Paul Hale

My current project utilises web parts. I've got them working fine however
they look a bit, well, naff. I'm a developer as opposed to a web designer
but im sure there must be something I can do to freshen them up. I had a
look at "my MSN Space" via MSN Messenger which uses web parts and they look
so much cooler than mine. Ideally I would like my web parts to have rounded
corners on each title. Users would then be able to click & drag this web
part title to different zones (just like with msn web space). This at first
seems easy but now im not so sure. I cant for the life of me work out how
Microsoft have done it and would very much appreciate a few clues.

To summarise this is what I would like to achieve...

a_____________________b

a and b are where I would like to include 2 graphics to round off the web
part. Then the user can drag drop the web part to a different zone.
The trouble is I cannot use a table which encapsulates the web part because
when the user drag drops the web part the table (and corner graphics) will
stay where they are as opposed to moving with the web part.

I have tried building the content of my web parts with nicely rounded
corners and placing in a web user control. However, this loses the desired
effect as users have to
drag the default square title of the web part (as opposed to my title
contained within the content) to move the web part.

Hope I have explained what im trying to do adequately.

Any advice would be most gratefully received!

Paul.

23 Nov 2005 10:16 PM

Wouter van Vugt

Hi Paul,

go take a look at my implementation over at www.dive-in-it.nl. It is
able to create rounded webparts (and also ajax style callbacks, but I
haven't made that available yet). You basically have to implement a
customer WebPartZone / WebPartChrome and do the rendering yourself. (be
ware of pre-aplha-ness of my application :)

Grtz, Wouter van Vugt
Trainer - Info Support - www.infosupport.com
www.dive-in-it.nl

23 Nov 2005 11:20 PM

Paul Hale

Thanks for your post Wouter,

I downloaded your code and took a quick look. Its seems a bit of a heavy
weight soloution though. Basically my project is nearly finished and I just
want to polish the way my web parts look by rounding the title edges.

Show quoteHide quote

"Wouter van Vugt" <wout***@infosupport.com> wrote in message
news:1132784184.459707.86490@g44g2000cwa.googlegroups.com...
> Hi Paul,
>
> go take a look at my implementation over at www.dive-in-it.nl. It is
> able to create rounded webparts (and also ajax style callbacks, but I
> haven't made that available yet). You basically have to implement a
> customer WebPartZone / WebPartChrome and do the rendering yourself. (be
> ware of pre-aplha-ness of my application :)
>
> Grtz, Wouter van Vugt
> Trainer - Info Support - www.infosupport.com
> www.dive-in-it.nl
>

24 Nov 2005 7:21 AM

Wouter van Vugt

The just take a look at the implementation of the WebPartZone /
WebPartChrome class found in the SharpCMS.Core assembly. It's just what
your looking for.

Grtz, Wouter

24 Nov 2005 8:15 AM

Steven Cheng[MSFT]

Thanks for Wouter's input.

Hi Paul,

For making your ASP.NET webpart page look nicer, I think a good and simple
approach is looking for some cool CSS styles which can be applied on your
webparts. And the WSS and SPS's buildin styles have some cool css... Here
is the msdn reference mention on this:

#Cascading Style Sheets Class Definitions for Microsoft Windows SharePoint
Services
http://msdn.microsoft.com/library/en-us/spptsdk/html/tsovCSSStyles_SV0107770
9.asp?frame=true

Also, you can also look for some cool webpart pages and then view their
html source in IE and find their CSS refrence, we can pickup some good ones
from them...

Thanks,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

--------------------

| From: "Wouter van Vugt" <wout***@infosupport.com>
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| Subject: Re: Cool Web Parts?
| Date: 23 Nov 2005 23:21:02 -0800
| Organization: http://groups.google.com
| Lines: 6
| Message-ID: <1132816862.776588.70***@o13g2000cwo.googlegroups.com>
| References: <uxKSzxF8FHA.2***@TK2MSFTNGP12.phx.gbl>
| <1132784184.459707.86***@g44g2000cwa.googlegroups.com>
| <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
| NNTP-Posting-Host: 80.60.59.27
| Mime-Version: 1.0
| Content-Type: text/plain; charset="iso-8859-1"
| X-Trace: posting.google.com 1132816867 11526 127.0.0.1 (24 Nov 2005

07:21:07 GMT)

| X-Complaints-To: groups-ab***@google.com
| NNTP-Posting-Date: Thu, 24 Nov 2005 07:21:07 +0000 (UTC)
| In-Reply-To: <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
| User-Agent: G2/0.2
| X-HTTP-UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;

.NET CLR 1.1.4322; .NET CLR 2.0.50727),gzip(gfe),gzip(gfe)

TK2MSFTNGXA02.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onli
ne.de!news.glorb.com!postnews.google.com!o13g2000cwo.googlegroups.com!not-fo
r-mail

| Xref: TK2MSFTNGXA02.phx.gbl

microsoft.public.dotnet.framework.aspnet.webcontrols:31295
Show quoteHide quote

| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
|
| The just take a look at the implementation of the WebPartZone /
| WebPartChrome class found in the SharpCMS.Core assembly. It's just what
| your looking for.
|
| Grtz, Wouter
|
|

30 Nov 2005 1:15 PM

Steven Cheng[MSFT]

Hi Paul,

How are you doing on this issue or does our further suggestions help you a
little ? If there're anything else we can help, please feel free to post
here. Thanks,

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
--------------------

| X-Tomcat-ID: 143431342
| References: <uxKSzxF8FHA.2***@TK2MSFTNGP12.phx.gbl>

<1132816862.776588.70***@o13g2000cwo.googlegroups.com>

microsoft.public.dotnet.framework.aspnet.webcontrols:31296
Show quoteHide quote

| NNTP-Posting-Host: tomcatimport2.phx.gbl 10.201.218.182
|
| Thanks for Wouter's input.
|
| Hi Paul,
|
| For making your ASP.NET webpart page look nicer, I think a good and
simple
| approach is looking for some cool CSS styles which can be applied on your
| webparts. And the WSS and SPS's buildin styles have some cool css...
Here
| is the msdn reference mention on this:
|
| #Cascading Style Sheets Class Definitions for Microsoft Windows
SharePoint
| Services
|

http://msdn.microsoft.com/library/en-us/spptsdk/html/tsovCSSStyles_SV0107770
Show quoteHide quote

| 9.asp?frame=true
|
| Also, you can also look for some cool webpart pages and then view their
| html source in IE and find their CSS refrence, we can pickup some good
ones
| from them...
|
| Thanks,
|
| Steven Cheng
| Microsoft Online Support
|
| Get Secure! www.microsoft.com/security
| (This posting is provided "AS IS", with no warranties, and confers no
| rights.)
|
|
|
|
|
|
| --------------------
| | From: "Wouter van Vugt" <wout***@infosupport.com>
| | Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| | Subject: Re: Cool Web Parts?
| | Date: 23 Nov 2005 23:21:02 -0800
| | Organization: http://groups.google.com
| | Lines: 6
| | Message-ID: <1132816862.776588.70***@o13g2000cwo.googlegroups.com>
| | References: <uxKSzxF8FHA.2***@TK2MSFTNGP12.phx.gbl>
| |    <1132784184.459707.86***@g44g2000cwa.googlegroups.com>
| |    <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
| | NNTP-Posting-Host: 80.60.59.27
| | Mime-Version: 1.0
| | Content-Type: text/plain; charset="iso-8859-1"
| | X-Trace: posting.google.com 1132816867 11526 127.0.0.1 (24 Nov 2005
| 07:21:07 GMT)
| | X-Complaints-To: groups-ab***@google.com
| | NNTP-Posting-Date: Thu, 24 Nov 2005 07:21:07 +0000 (UTC)
| | In-Reply-To: <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
| | User-Agent: G2/0.2
| | X-HTTP-UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;
SV1;
| .NET CLR 1.1.4322; .NET CLR 2.0.50727),gzip(gfe),gzip(gfe)
| | X-HTTP-Via: 1.1 VNDSRVISA04
| | Complaints-To: groups-ab***@google.com
| | Injection-Info: o13g2000cwo.googlegroups.com; posting-host=80.60.59.27;
| |    posting-account=8jVafw0AAADGgLTFuK6jGbYYZlRJ1Iok
| | Path:
|

TK2MSFTNGXA02.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onli

|

ne.de!news.glorb.com!postnews.google.com!o13g2000cwo.googlegroups.com!not-fo
Show quoteHide quote

24 Nov 2005 8:15 AM

Steven Cheng[MSFT]

Thanks for Wouter's input.

Hi Paul,

For making your ASP.NET webpart page look nicer, I think a good and simple
approach is looking for some cool CSS styles which can be applied on your
webparts. And the WSS and SPS's buildin styles have some cool css... Here
is the msdn reference mention on this:

#Cascading Style Sheets Class Definitions for Microsoft Windows SharePoint
Services
http://msdn.microsoft.com/library/en-us/spptsdk/html/tsovCSSStyles_SV0107770
9.asp?frame=true

Also, you can also look for some cool webpart pages and then view their
html source in IE and find their CSS refrence, we can pickup some good ones
from them...

Thanks,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

--------------------

| From: "Wouter van Vugt" <wout***@infosupport.com>
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| Subject: Re: Cool Web Parts?
| Date: 23 Nov 2005 23:21:02 -0800
| Organization: http://groups.google.com
| Lines: 6
| Message-ID: <1132816862.776588.70***@o13g2000cwo.googlegroups.com>
| References: <uxKSzxF8FHA.2***@TK2MSFTNGP12.phx.gbl>
| <1132784184.459707.86***@g44g2000cwa.googlegroups.com>
| <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
| NNTP-Posting-Host: 80.60.59.27
| Mime-Version: 1.0
| Content-Type: text/plain; charset="iso-8859-1"
| X-Trace: posting.google.com 1132816867 11526 127.0.0.1 (24 Nov 2005

07:21:07 GMT)

| X-Complaints-To: groups-ab***@google.com
| NNTP-Posting-Date: Thu, 24 Nov 2005 07:21:07 +0000 (UTC)
| In-Reply-To: <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
| User-Agent: G2/0.2
| X-HTTP-UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;

.NET CLR 1.1.4322; .NET CLR 2.0.50727),gzip(gfe),gzip(gfe)

TK2MSFTNGXA02.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onli
ne.de!news.glorb.com!postnews.google.com!o13g2000cwo.googlegroups.com!not-fo
r-mail

| Xref: TK2MSFTNGXA02.phx.gbl

microsoft.public.dotnet.framework.aspnet.webcontrols:31295
Show quoteHide quote

| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
|
| The just take a look at the implementation of the WebPartZone /
| WebPartChrome class found in the SharpCMS.Core assembly. It's just what
| your looking for.
|
| Grtz, Wouter
|
|

9 Dec 2005 3:33 PM

paul

Thanks for your reply Steven (and yours Wouter),

I am still struggling trying to make my web parts look cool.
I really like the ones used on "My MSN Space" (link from MSN
messenger).
Have taken a look at the HTML code from the "My MSN Space" and can see
that they use CSS style sheets. However, I cant get my head round how
you implement this though.

Basically all my zones, and user controls are set up and working fine.
I would like to make the title bars of the web parts have little
rounded edges (as Microsoft demonstraight on My MSDN space).

Im confused as regard to where I implement the CSS. Do I do this for
the User Control or the Web Part Zone? For example, If I select a Web
Part Zone and select the "Header Style" property I can see a property
named "CssClass". So if i put a class name in here and call it say
".myHeader" how do I refer to this in the HTML?

Sorry im very confused with all this. I am trying though. Just bought a
book "Professional Web Parts and Custom Controls with ASP.NET 2.0"
(ISBN 0-7645-7860-X). Understand most of it but am still utterly lost
as regard to drilling down and customizing how my parts look.

Any other pointers would be very much appriciated.

Appologies for delay in replying. Got side tracked on another project.

Regards,

Paul.

Steven Cheng[MSFT] wrote:
Show quoteHide quote

> Thanks for Wouter's input.
>
> Hi Paul,
>
> For making your ASP.NET webpart page look nicer, I think a good and simple
> approach is looking for some cool CSS styles which can be applied on your
> webparts. And the WSS and SPS's buildin styles have some cool css... Here
> is the msdn reference mention on this:
>
> #Cascading Style Sheets Class Definitions for Microsoft Windows SharePoint
> Services
> http://msdn.microsoft.com/library/en-us/spptsdk/html/tsovCSSStyles_SV0107770
> 9.asp?frame=true
>
> Also, you can also look for some cool webpart pages and then view their
> html source in IE and find their CSS refrence, we can pickup some good ones
> from them...
>
> Thanks,
>
> Steven Cheng
> Microsoft Online Support
>
> Get Secure! www.microsoft.com/security
> (This posting is provided "AS IS", with no warranties, and confers no
> rights.)
>
>
>
>
>
>
> --------------------
> | From: "Wouter van Vugt" <wout***@infosupport.com>
> | Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
> | Subject: Re: Cool Web Parts?
> | Date: 23 Nov 2005 23:21:02 -0800
> | Organization: http://groups.google.com
> | Lines: 6
> | Message-ID: <1132816862.776588.70***@o13g2000cwo.googlegroups.com>
> | References: <uxKSzxF8FHA.2***@TK2MSFTNGP12.phx.gbl>
> |    <1132784184.459707.86***@g44g2000cwa.googlegroups.com>
> |    <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
> | NNTP-Posting-Host: 80.60.59.27
> | Mime-Version: 1.0
> | Content-Type: text/plain; charset="iso-8859-1"
> | X-Trace: posting.google.com 1132816867 11526 127.0.0.1 (24 Nov 2005
> 07:21:07 GMT)
> | X-Complaints-To: groups-ab***@google.com
> | NNTP-Posting-Date: Thu, 24 Nov 2005 07:21:07 +0000 (UTC)
> | In-Reply-To: <e5qh1RI8FHA.1***@tk2msftngp13.phx.gbl>
> | User-Agent: G2/0.2
> | X-HTTP-UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;
> .NET CLR 1.1.4322; .NET CLR 2.0.50727),gzip(gfe),gzip(gfe)
> | X-HTTP-Via: 1.1 VNDSRVISA04
> | Complaints-To: groups-ab***@google.com
> | Injection-Info: o13g2000cwo.googlegroups.com; posting-host=80.60.59.27;
> |    posting-account=8jVafw0AAADGgLTFuK6jGbYYZlRJ1Iok
> | Path:
> TK2MSFTNGXA02.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onli
> ne.de!news.glorb.com!postnews.google.com!o13g2000cwo.googlegroups.com!not-fo
> r-mail
> | Xref: TK2MSFTNGXA02.phx.gbl
> microsoft.public.dotnet.framework.aspnet.webcontrols:31295
> | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
> |
> | The just take a look at the implementation of the WebPartZone /
> | WebPartChrome class found in the SharpCMS.Core assembly. It's just what
> | your looking for.
> |
> | Grtz, Wouter
> |
> |