Custom Style Any SharePoint Web Part with Option to Add a ‘View More’ Link

This script utilizes the TITLE URL and DESCRIPTION Fields in the Advanced section of web part properties to dynamically add unique classes, so you can style each web part individually – and as a bonus allows you to add a “VIEW MORE” link to any web part.

Requirements

  1. Make sure your master page or page layout has the latest version of jQuery attached

What the Script Does

  1. If TITLE URL field in advanced settings is filled it uses that url to create a “VIEW MORE” link at the bottom of the web part and uses the DESCRIPTION field as the text for the button
  2. Also uses the DESCRIPTION field to add unique classes to the .ms-webpart-chrome div to be able to style web part individually

Download the Code

Update History

  • 5/27/2015
    • updated to compensate for list view webparts that already link their titles to their respective lists – must now add ‘:MORELINK‘ at the end of the Description field – like so…
      View More CUSTOMIZE :MORELINK
    • also added ability to have no title for the webpart – must choose ‘Title Only’ as chrome type and then just delete the Title of the web part – SharePoint will then replace that with the word ‘Untitled’ – which the code now utilizes to remove the title

How to Use It

  1. Attach the CustomWebparts script to your master page or page layout or copy the script into an already attached javascipt file
  2. From any web part’s properties go to the advanced section and use this syntax
    1. “VIEW MORE” LINK
      1. Type URL for link in the TITLE URL field
      2. Type the text of the “VIEW MORE” link in the Description field
    2. ADD A UNIQUE CLASS
      1. Type the class you want to add in the Description field (this will be added to the nearest .ms-webpart-chrome div) but ALWAYS precede it with a comma – for example ,orangewebpart
  3. NOTE: you combine the 2 methods to allow for custom styling as well as “VIEW MORE” link like so
    1. http://www.sonnyeom.com typed into the TITLE URL field and…
    2. View More,orangewebpart CUSTOMIZE typed into the Description field would give you…
      custom-webpart-properties
    3. A link to sonnyeom.com at the bottom of your webpart that reads “View More” and the class “orangewebpart” added to the .ms-webpart-chrome div
      custom-webpart-output
  4. REMINDER – you must add a space and the word CUSTOMIZE at the end of the DESCRIPTION field for this to work

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

11 + 5 =