More SharePoint Rounded Corners

Late last year I posted an item on rounding the corners of the SharePoint quick launch menu using jQuery. Recently I have completed a project where rounded corners were required on outlined blocks of information rendered in a custom web part, so I thought I'd share with you another way of using the jCorner library.

The requirement was for the web part to render a series of information blocks. The design I adopted was to drive the displayed information blocks from two lists:

• Heading list - a custom list to define the heading and icon for each block
• Links list - a custom list with a lookup field (pointing back to the heading list) and a URL field

Each item in the heading list is rendered as a block in the custom web part, and each block contains a heading, an icon and a series of links (coming from the links list). An example of the styling of one of the blocks is shown below:

The HTML markup that produces this box is as follows (not very semantic, unfortunately, and a few too many tags, but I needed it to get it to work within a deadline!) :

<div class='infoblocks'>

  <div class='infoblocksinglecontainer'>

    <div class='infoblockouterforcorner'>

      <div class='infoblock'>

        <div class='infoblockicon'>

          <img alt='Insurance' src='http://.../Umbrella_Icon.jpg' /><div>

          <div class='infoblocktitle'>Insurance</div>

          <div class='infoblocklinks'>

            <a class='infoblocklink' href='http://...' title='Get quotes'>Get quotes< /a>

          </div>

      </div>

    </div>

  </div>
<div>

The custom web part retrieves the list items from the headings list, and outputs a "infoblocksinglecontainer" DIV element for each list item, populating the various contained DIVs with the data from the list item.

The round corners are then formed with a combination of CSS and JavaScript calling methods in the jQuery.corner library.

The JavaScript is contained in a JS file deployed to the LAYOUTS folder in the 12 hive and then referenced by a SCRIPT tag output by the web part used on the page. One point to notice about the jQuery selector is the use of a locally-scoped context to improve performance. I picked up this tip from the great article entitled "Improve your jQuery - 25 Excellent Tips" by Jon Hobbs-Smith - if you use jQuery then I thoroughly recommend you have a read of that one!

$(document).ready(function() {

  AddRoundCorners();

});

function AddRoundCorners() {

  var blocksContext = $('.ms-WPBody');

  $('.infoblockouterforcorner', blocksContext).corner('9px');

  $('.infoblock', blocksContext).corner('7px');

}

The CSS is as follows:

.infoblocks {

    width:250px;

}

.infoblocks-twocolumns {

    width:520px;

}

.infoblocksinglecontainer {

    float:left;

    display:inline;

    height:1px; /* Switches on layout for this element, thereby forcing the element to contain the image */

    margin:5px;

    width:1px;

}

.infoblockouterforcorner {

    background-color:#b9d5f1;

    display:inline;

    height:1px; /* Switches on layout for this element, thereby forcing the element to contain the image */

    padding:1px 2px 1px 2px;

}

.infoblock {

    background-color:white;

    border:solid 1px #000;

    display:inline;

    height:1px; /* Switches on layout for this element, thereby forcing the element to contain the image */

    margin:2px -2px 2px 2px;

    padding:2px 2px 2px 2px;

    width:245px;

}

.infoblocktitle {

    height:1px; /* Switches on layout for this element, thereby forcing the element to contain the image */

    color:#06c;

    font-size:10pt;

    font-weight:bold;

    padding-top:3px;

    margin:0 0 0 70px;

}

.infoblockicon {

    display:inline;

    float:left;

    width:65px;

    height:100%;

}

.infoblockicon img{

    vertical-align:middle;

}

.infoblocklinks {

    margin:3px 5px 3px 70px;

    display:block;

}

.infoblocklinks a:link,.infoblocklinks a:visited{

  font-size:8pt;

  font-weight:normal;

}

Note that this CSS assumes that the icon in a block will be 60x60 in size. The CSS handles any number of infoblocklink elements correctly by allowing the block to grow in depth (not width). And to finish, here's another useful behaviour of these blocks; by setting the width of the "infoblocks" class to 520px you can have two columns of blocks rather than one.