Cool Web Parts?

Discussion in 'ASP .Net Web Controls' started by Paul Hale, Nov 23, 2005.

  1. Paul Hale

    Paul Hale Guest

    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
    |_______Title__________|
    | |
    | |
    | Web Part Content Here |
    | |
    |____________________|


    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.
     
    Paul Hale, Nov 23, 2005
    #1
    1. Advertisements

  2. 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
     
    Wouter van Vugt, Nov 23, 2005
    #2
    1. Advertisements

  3. Paul Hale

    Paul Hale Guest

    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.
     
    Paul Hale, Nov 23, 2005
    #3
  4. 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
     
    Wouter van Vugt, Nov 24, 2005
    #4
  5. 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" <>
    | 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: <>
    | References: <>
    | <>
    | <>
    | 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:
    | NNTP-Posting-Date: Thu, 24 Nov 2005 07:21:07 +0000 (UTC)
    | In-Reply-To: <>
    | 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:
    | 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
    |
    |
     
    Steven Cheng[MSFT], Nov 24, 2005
    #5
  6. 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" <>
    | 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: <>
    | References: <>
    | <>
    | <>
    | 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:
    | NNTP-Posting-Date: Thu, 24 Nov 2005 07:21:07 +0000 (UTC)
    | In-Reply-To: <>
    | 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:
    | 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
    |
    |
     
    Steven Cheng[MSFT], Nov 24, 2005
    #6
  7. 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: <>
    <>
    | MIME-Version: 1.0
    | Content-Type: text/plain
    | Content-Transfer-Encoding: 7bit
    | From: (Steven Cheng[MSFT])
    | Organization: Microsoft
    | Date: Thu, 24 Nov 2005 08:15:58 GMT
    | Subject: Re: Cool Web Parts?
    | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
    | Message-ID: <>
    | Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
    | Lines: 66
    | Path: TK2MSFTNGXA02.phx.gbl
    | Xref: TK2MSFTNGXA02.phx.gbl
    microsoft.public.dotnet.framework.aspnet.webcontrols:31296
    | 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
    | 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" <>
    | | 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: <>
    | | References: <>
    | | <>
    | | <>
    | | 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:
    | | NNTP-Posting-Date: Thu, 24 Nov 2005 07:21:07 +0000 (UTC)
    | | In-Reply-To: <>
    | | 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:
    | | 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
    | |
    | |
    |
    |
     
    Steven Cheng[MSFT], Nov 30, 2005
    #7
  8. Paul Hale

    paul Guest

    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.
     
    paul, Dec 9, 2005
    #8
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.