Tag Archives: Style Library

Javascript, SharePoint

The Best Way to Add Custom JavaScript and jQuery to SharePoint

Leave a comment

During extensive SharePoint user interface customization you’ll likely encounter a scenario where you need to make a web part or user control do something it was not intended to do or have a look that cannot be accomplished using the CSS hooks provided out-of-the-box. The solution is to create a custom master page and include a reference to a JavaScript file where you can modify the Document object. While straight JavaScript will do, I prefer to use the jQuery JavaScript library, which is far more robust, easier to use, and allows for plugins. Follow the steps below to add jQuery to your master page.

  1. Go to jquery.com and download the latest jQuery library to your desktop. You want to get the compressed production version, not the development version.
  2. Open SharePoint Designer (SPD) and connect to the root level of your site’s site collection.
  3. In SPD, open the “Style Library” folder.
  4. Create a folder named “Scripts” inside of the Style Library.
  5. Drag the jQuery library JavaScript file from your desktop into the Scripts folder.
  6. In the Scripts folder, create a new JavaScript file and name it (e.g. “actions.js”).
  7. Open your master page file in SPD.
  8. Within the <head> tag of the master page, add a script reference to the jQuery library just above the content place holder named “PlaceHolderAdditonalPageHead” (and above your custom CSS references, if applicable) as follows:
    // <![CDATA[
    src=”/Style%20Library/Scripts/{jquery library file}.js” type=”text/javascript”>
    // ]]>
  9. Immediately after the jQuery library reference add a script reference to your custom scripts file as follows:
    // <![CDATA[
    src=”/Style%20Library/Scripts/actions.js” type=”text/javascript”>
    // ]]>

Your custom master page now includes jQuery and a reference to your custom scripts file where you can add jQuery scripts. SharePoint includes a number of JavaScript files throughout the site, so be careful that the scripts you add do not conflict with SharePoint’s; the jQuery library itself does not conflict with SharePoint.

SharePoint

The Best Way to Add Custom CSS to SharePoint

Leave a comment

To thoroughly customize your SharePoint site, you’ll need to use a custom CSS. SharePoint offers a way to specify a single CSS file to use via the “Master page” settings for the site. However, using this approach still limits you to customizing only those IDs and classes that are included on the pages by SharePoint. Moreover, using this setting applies to both site and system pages, which may not be desirable.

With these downsides in mind, the best approach is to create a custom master page and include references to one or more custom CSS files. Follow the steps below to include a custom CSS file in your master page.

    1. Open SharePoint Designer (SPD) and connect to the root level of your site’s site collection.
    2. In SPD, open the “Style Library” folder.
    3. Create a new CSS file and name it (e.g. “customstyles.css”).
    4. Open your master page file in SPD.
    5. In the tag add a link to your custom CSS just above the content place holder named “PlaceHolderAdditonalPageHead” as follows:
<link href=”/Style%20Library/customstyles.css” rel=”stylesheet” type=”text/css” />
Your custom master page is now using your new CSS file in addition to all of the CSS files SharePoint uses out-of-the-box. The idea is that you are taking advantage of the “cascading” property of cascading style sheets by layering your custom styles on top of what SharePoint creates in order to alter the SharePoint look-and-feel as desired—like a skin.