SharePoint 2007 Customization Tricks, Create a Stylish Page Curl Using CSS

Creating a stylish page curl with CSS is pretty easy, you just need to create the curl and apply it as a background-image, position it properly and off you go.

This is one example of how you can get creative with WSS v3 sites using only CSS.

Here’s the code you’ll need to add to your style sheet. I recommend using the AlternateCSSUrl method if you are lucky enough to have a MOSS installation.

/* Page Curl */
.ms-bodyareacell
{
background-image:url(“/_layouts/images/pagecurl.gif”);
background-repeat:no-repeat;
background-position:top left;
/* padding should be a few pixels more than the pagecurl image height */
padding:30px;
}

Upload your pagecurl.gif to the images folder in the 12 hive: (Download a quick sample pagecurl.gif)
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES

Before:

before.gif

After:

after.gif
You’ll need to modify the image background color to suit that of your site so I’ve included a large’ish version of the page curl in .PSD format for those that wish to modify it. Download the pagecurl.PSD file

Happy Customizing

This entry was posted in SharePoint 2007. Bookmark the permalink.

4 Responses to SharePoint 2007 Customization Tricks, Create a Stylish Page Curl Using CSS

  1. Arno Nel says:

    hehe, good one shane :)

  2. Will says:

    I’m not seeing this change reflected in my site.

    create the css file
    downloaded/uploaded the gif

    also did the steps in chp12, page 473-474 of beginning sharepoint 2007 administration

  3. Lisa says:

    This does not work for me either (MOSS 2007 site). Any suggestions Mr. Perran?

  4. chia weng yan says:

    hello there,
    hows yoru day? .i found your site over the net and i was hoping you can give me some MOSS 2007 pointers. i want to create a drop down menu in MOSS, ‘horizontally’. Right now i know how to set it up a vertical drop down menu. I was joping you can help me out on this. If you have any leads please do email me.

    Regards,
    Chia