Dantronic

Hey all..

I'm a graphic designer.. i make pretty pictures.. i've been thrown into the sharepoint deep end and i need some help.

I've been searching around for a solution to a design mockup that we need to cut up and convert to sharepoint. The problem is rounded corners on webparts. Our client has this thing about rounded corners.. it's part of their brand image.. so we added rounded corners to the webparts on our mockup.

So the question is.. is this possible http://www.users.on.net/~barillaj/dan_random/webpart_rounded.jpg

I've seen a few css and javascript hacks.. but none that really apply to what i'm trying to do.

Any help would be MUCH appreciated.. thanks.



Re: SharePoint - Design and Customization Custom webpart.. rounded corners

Ishai Sagi

Yes and no.

I have seen it done with hacks (as you say) but not with any decent way.

The problem is, you see, that sharepoint renders the web part box, with us having no control over the html that gets rendered. Since proper rounded corners require a table with at least three columns - one on the left for the left rounded corner, and the one on the right for the right one, and each one of the above with it's own distinct css class name so we can specify in css what the image background it has. But sharepoint doesnt provide us with such a structure, so you are stuck with javascript hacks.






Re: SharePoint - Design and Customization Custom webpart.. rounded corners

Dantronic

Thanks Ishai

How's Canberra Stick out tongue

It's Daniel from the Sydney office btw. I guess i should have just sent an internal email about this huh.

So there's no way of accessing the html the webpart generates Damn it.. i was affraid you'd say that.





Re: SharePoint - Design and Customization Custom webpart.. rounded corners

dink337

Actually, I played around with this a little myself and came up with a pretty simple way to accomplish the shadow-ing.

Open the site with SharePoint Designer. On the page you want to work with (my example is on the default.aspx page for a team site *note - not the default.master), locate the code for the web part you want to add a "shadow" effect to:

  • In SPD, select the left zone by clicking on the "left" placeholder panel in the design window.
  • In the html view, you'll notice that all the code for that zone will be highlighted from the opening "<WebPartPages:WebPartZone>" to its closing tag "</WebPartPages:WebPartZone>".

To accomplish the shadow effect, you'll have to wrap a table around this section of code that is 3 columns wide by 3 rows tall - making sure to have the previously highlighted code reside in the center cell:

Code Snippet
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-image:url(/_layouts/images/upleft.jpg); background-repeat:no-repeat;"></td>
<td height="12px" style="background-image:url(/_layouts/images/top.jpg); background-repeat:repeat-x;"></td>
<td style="background-image:url(/_layouts/images/upright.jpg); background-repeat:no-repeat;"></td>
</tr>
<tr>
<td width="16px" style="background-image:url(/_layouts/images/left.jpg); background-repeat:repeat-y;"></td>
<td>
<WebPartPages:WebPartZone>
<!--All Web Part Code Here-->
</WebPartPages:WebPartZone>
</td>
<td width="16px" style="background-image:url(/_layouts/images/right.jpg); background-repeat:repeat-y;"></td>
</tr>
<tr>
<td style="background-image:url(/_layouts/images/botleft.jpg); background-repeat:no-repeat;"></td>
<td height="18px" style="background-image:url(/_layouts/images/bottom.jpg); background-repeat:repeat-x;"></td>
<td style="background-image:url(/_layouts/images/botright.jpg); background-repeat:no-repeat;"></td>
</tr>
</table>

Now, create your shadow effect in an image editing program (Photoshop, etc.):

  • Draw a box with rounded corners
  • Add desired shadow effect
  • Merge layers
  • Break apart image into 8 pieces for placemant in remaining cells in table surrounding web part
  • Top left corner
  • Top
  • Top right corner
  • Left
  • Right
  • Bottom left corner
  • Bottom
  • Bottom right corner
  • Save all the images to the "/_layouts" folder ("<drive>\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES).
  • Reference them as appropriate to the individual cells in the table surrounding the web part making sure to set the tileing options accordingly (see the sections in the above code example for "background-repeat:...")...Also, make sure to add "height" and "width" properties where appropriate (see code) to give the cells a fixed size (or you wont see the shadow since the cells will be blank).

This will now add the shadow effect to the webpart. You may have to play with the shadow layer in your image editing program to get it to look right once you break it apart (adding space appropriately to "slide" the image in the right direction to match up with the "x,y" positioning of the corners, but it isn't too hard to get it to look right.

Screenshot of my example.

All in all, it took around 30 minutes or so to do, so it's not too hard.

Hope this helps Smile

- Dink