Tutorials

Start learning SharePoint now!

Events

View up and coming events.

Contact Us

We would love to hear from you!

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

4
By shane.perran in : SharePoint 2007 // Dec 19 2006

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

About the Author

shane.perran has written 606 articles for SharePoint Nation.

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

  1. Arno Nel December 19, 2006 10:58 pm

    hehe, good one shane :)

  2. Will July 24, 2007 12:24 pm

    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 August 29, 2007 12:19 pm

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

  4. chia weng yan December 20, 2007 6:36 pm

    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

Leave a Reply

You must be logged in to post a comment.