Saturday, November 19, 2011

Quick method for testing CSS style changes on a SharePoint site

I've got a good trick for rapidly evaluating CSS style changes on a SharePoint site without having to go through all the steps required for uploading a custom style sheet.  This works great if you simply wish to tweak the style rules to determine how changes will impact the look of a given page.  The method involves using a standard Content Editor web part to host a CSS style element and will operate in the same fashion as if you were applying a custom stylesheet against the particular page you're viewing.  The following steps are applicable to SharePoint 2010, but the same technique can be used on SharePoint 2007 with minor variation to the steps:
  1. Open your web browser to the page of your SharePoint site which you'd like to view your CSS style changes 
  2. Click on Site Actions -> Edit Page
  3. Locate the Bottom Zone and click Add a Web Part
  4. Under Categories, select Media and Content
  5. Under Web Parts, select Content Editor
  6. Click the Add button
  7. Locate the newly added web part and click on the dropdown arrow in the upper right hand corner
  8. Select the Edit Web Part option
  9. Under Layout, place a check in the Hidden checkbox
  10. In the Content Editor web part, click on the link that reads Click here to add new content link
  11. In the Format Text ribbon, click on the HTML button and select Edit HTML Source
  12. In the HTML Source dialog, enter the following HTML:
    <style> 
    Insert CSS rule changes here...
    </style>
  13. Click OK
  14. Click OK
You will now be able to view how the CSS style updates will impact your page without having to jump through the hoops of uploading a custom stylesheet.  Once you've finalized all of your style changes, you can then add them to a custom CSS file, apply the custom CSS to your site, and then delete this Content Editor web part.

    No comments:

    Post a Comment

    Note: Only a member of this blog may post a comment.