When working with customers one often hears the following complaint: “Wow, this SharePoint is sooo ugly…”. I personally think SharePoint 2010 has very nice nice and professional design, but since customer is always right, from time to time I need to make it look more pretty. For some customers the “fix” is very simple, just add some nice looking buttons on the home page and they will be very happy with this improvement.

Couple of things that your customer needs to be able to do:

  • Add/Remove buttons easily
  • Add icons to buttons
  • Rearrange buttons as web parts
  • Change layouts i.e. order buttons vertically vs. horizontally

To allow them such a functionality I created a SharePoint Sandboxed solution that glues together some JQuery UI Buttons and a SharePoint Links list. When combined together these solutions allow you to get buttons like these:

To deploy this web part you need to do the following:

  • Download and unpack solution package
  • Go to your Site Collection > Site Actions > Site Settings
  • Browse Galleries > Solutions
  • Click on the Solutions ribbon tab and click Upload Solution button
  • Upload the WSP package you downloaded and Activate it
  • Navigate to the Site Settings > Site Collection Administration > Site Collection Features of your site collection and make sure feature SharePoint Accelerators – Cool Buttons Web Part is activated
  • Navigate to the desired SharePoint (sub)site and activate SharePoint Accelerators – Cool Buttons site feature
  • Navigate to Cool Links list and add some links  (if defined, icons will be displayed with your link description)
  • Add Cool Links Web Part to a SharePoint Page

Web Part Options

Cool Links WebPart has the following options that allow SharePoint admins to change how these buttons will be generated. All these options are accessible via Edit Web Part in the Miscellaneous section.

  • Links list – The names of lists with links that will be displayed. Defaults to Cool Links.
  • List View – List view that will be used to filter and sort items. Defaults to default view.
  • Display Type – Choose if your buttons will be ResizableFixedSize (defined via  Button width property) or full size of the webpart (WebPartSize).
  • Button Layout – Choose between Horizonatal and Vertical button layout.
  • Button width (px) – When FixedSized display type is used, it allows you to define button width in px.

Leave a Reply