Tag: my work

Adding rounded corners to web part header for SharePoint 2010

I wanted to add rounded corners to the out-of-the-box web part header in a SharePoint 2010 site. Looking around in Google’s initial results, I found a couple references to Heather Solomon’s article about adding rounded corners to a web part header in a 2007 site, but I didn’t especially love that the rounded corner didn’t go all the way to the right edge:

At this point, I have to admit that I didn’t dive much further into Google results, but decided to have a go at it on my own. If I had spent a little bit of extra time, I might have found Rich Whitworth’s article about using jQuery to add classes to the table cells of the web part header which would then give you an easy way to hook in the CSS. Or I might have seen Kyle Schaeffer’s article on using CSS and images to add rounded corners, which is pretty close to what I ended up doing. … But I didn’t, so here’s what I ended up doing on my own.

I’m going to go through a couple different examples:

  • A gradient rounded header bar using images and CSS
  • A rounded header bar using CSS3

These will all be based on the same general principle, but perhaps the slight differences and examples will be helpful.

The basic idea

Here is the HTML for the table that holds the web part header. As you can see, the row has a class of .ms-WPHeader. Then, there are up to five table cells involved:

  • td.ms-wpTdSpace – the first spacer cell on the left
  • td.ms-WPHeaderTd – the cell that holds the title
  • td.ms-WPHeaderTdMenu – the cell with the dropdown arrow; only shows if you have editing privileges
  • td.ms-WPHeaderTdSelection – the cell with the select checkbox; only shows if you have editing privileges and if it’s available
  • td.ms-wpTdSpace – the last spacer cell on the right

In order to attach a background image or color, I’ll apply styles to all the table cells by using .ms-WPHeader td. To add on the rounded corners, I’ll apply styles to td.ms-wpTdSpace – the spacer cells on the left and right – and use the :first-child pseudo-class to target the left spacer cell and modify it as much as I need to. Finally, I’ll work with .ms-WPHeaderTdMenu, which has some border styles applied by the default core CSS and a hover background effect, so that it doesn’t clash with my new header bar styles.

Ready? Let’s go!

A gradient rounded header bar using images and CSS

Let’s start with a gradient rounded header bar using images and CSS, which will compatible across most browsers, including IE7 and 8. Here are the two images I’ll be using – “bg-bar.png” for the repeated background, and “bg-barcorners.png” for the left and right corners.

Now, let’s add the CSS. I’ll start with applying the repeated background image to all the table cells:

.ms-WPHeader td { background: url('../images/bg-bar.png') repeat-x; border-bottom: none !important;  }

Here’s what it looks like:

That little gap on the right has to do with some of the border settings on the .ms-WPHeaderTdMenu cell — we’ll deal with that later.

For now, let’s apply the rounded corners to the left and right table cells. I’ll apply the background image to any table cell with .ms-wpTdSpace and position it to show the top right, then use the :first-child pseudoclass to move the background image to the top left so that the corner shows up properly.

.ms-WPHeader td.ms-wpTdSpace { background: url('../images/bg-barcorners.png') top right; }
.ms-WPHeader td:first-child.ms-wpTdSpace { background-position: top left; }

Wasn’t that easy?

The rest of this is just fine-tuning. I’m going to change the color of the title text to be white (both the normal title text and any linked title text) and remove the border from .ms-WPHeaderTdMenu to get rid of that gap. I’ll also add some styling to the .ms-WPHeaderTdMenu hover state so that the hover effect goes more with my color scheme.

.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

Here’s how it looks now:

Here’s the complete CSS code for those of you who like to just copy and paste:

.ms-WPHeader td { background: url('../images/bg-bar.png') repeat-x; border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { background: url('../images/bg-barcorners.png') top right; }
.ms-WPHeader td:first-child.ms-wpTdSpace { background-position: top left; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

A rounded header bar using CSS3

For an even quicker solution that doesn’t involve using images, you can use CSS3 to add rounded corners to the header bar. This solution won’t work in IE7 or IE8 but should work in IE9, Firefox, Safari, and Chrome.

If you look at the code below, I used a background color in place of a background image, then rounded the corners using CSS3 properties.

.ms-WPHeader td { background: #7bb42d; border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }
.ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

Here’s what it looks like:

You can even use CSS3 to add a background gradient to duplicate the look from my first example.

.ms-WPHeader td { background: #7bb42d; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(124,180,45)), color-stop(1, rgb(176,210,128))); background-image: -moz-linear-gradient( center bottom, rgb(124,180,45) 0%, rgb(176,210,128) 100%); border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }
.ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

Just for an extra variation and a slightly different look, you can add rounded corners to the bottom edges of the web part header by using more border-radius properties. Notice that I also added .ms-WPBorder { border: none; } to remove the border from any web parts that might have the border showing.

.ms-WPHeader td { background: #7bb42d; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(124,180,45)), color-stop(1, rgb(176,210,128))); background-image: -moz-linear-gradient( center bottom, rgb(124,180,45) 0%, rgb(176,210,128) 100%); border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; }
.ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }
.ms-WPBorder { border: none; }

Hope you find this helpful!

References and additional resources

Advertisements

Nothing But SharePoint Logo Design

Nothing But SharePoint is a joint venture between Jeremy Thake’s SharePoint Dev Wiki, Mark Miller’s End User SharePoint, and Joel Oleson’s SharePoint Land, combining the resources from these three popular SharePoint resource sites into one location. Originally, Marcy Keller was handling their design and SharePoint branding needs, but when she had to step out for personal reasons, they approached Heather Waterman of Synteractive, who I like to refer to as “SharePoint Queen,” for some help with getting the sites finished. Heather decided it would be a good training opportunity for me to get familiar with SharePoint branding, so we took on the task of creating additional design comps and building out the SharePoint sites. (You can read more about the full development process at Jeremy’s intro article – talk about a team effort!)

And along the way, I got to design the logo for Nothing But SharePoint, which is what this post is really about.

I was given full creative license. So I pulled out my sketchbook and started sketching.

This was one of the rare occasions where I barely did anything before an idea that was intriguing popped out to me. I could have spent more time sketching, but I had limited time for producing this logo so I decided to run with it. I liked the repeated shapes between the curvy “N” and “S” and “b” and “p,” so I moved into Illustrator to try to create those shapes. I drew paths with the pen tool and circle/rounded rectangle tool, then stroked them with a thick stroke, playing with the size and widths of the letter shapes:

I wasn’t really loving the curvy “N” shape, though. I gave up my attachment to having mirrored shapes and went with a curvy lowercase “n” shape instead. Much better! I liked the stacked arrangement of the letters – it would be nicer as a compact icon for the site, and I liked the reflection between the “b” and “p.”

Now to find fonts. I tried several approaches with mixing different types of fonts, but I kept coming back to Quicksand (used in all the “NOTHING BUT” text and also in #3, #5 and #6) because of its inherent curvy shapes. To match it, I changed the stroke on the logo paths to have a rounded cap instead of a straight cap.

The others agreed that they liked the Quicksand font, too, so my next step was to tweak the letter shapes slightly to match the logo. I replaced the “s,” “p,” and “n” with my logo shapes (I had to play with the stroke weight to match the font weight), then made a custom “a” shape by flipping and modifying the “p.”

Mark thought the new “a” looked kind of weird, though, so I tried another version that everyone liked better. For the final logo, I also widened the “h” just slightly so that the “s” didn’t look so wide. (In the overlapping version in the screenshot below, #9 is cyan and #10 is magenta.)

The next step was to pick colors. I presented a few options:

The general consensus was c6, and with that, our logo design was complete!

This was a fun logo to work on – not just because it seemed to come together with hardly any work, but because I enjoy the detail work of tweaking letter shapes. There were several people providing input which usually can lead to a “design by committee” situation, but in this case everyone came together to agree on the final version. I’m pleased with the final result and glad I was able to contribute!

Customizing the HTML code of a Content Query Web Part

I’m learning all about SharePoint branding as part of my new job at Synteractive, so this post started out as a reference file and notes on the steps I was taking. It ended up being an insanely long blog draft and I decided to throw it out there to see if more experienced SharePoint superstars can give me some tips on how I could have done this more easily or maybe to help other newbie SharePoint developers.

Some facts and disclaimers:

  • I’m working with a SharePoint 2010 Publishing site and using SharePoint Designer 2010 for modifying some of the site files.
  • I’m not going to go into CSS in this article, so I won’t talk about how I style the web part. This article is really just about getting the HTML I want to be generated from a customized Content Query Web Part.
  • At this point, I’m literally just under three weeks into learning about SharePoint branding, customizing master pages, working with XSL, etc. I have a lot to learn.

Here is the challenge that I had:

First, here’s a screenshot of my custom query web part:

  • The CQWP pulls from a list of publishing pages and displays the title, a description, an image, and links to the page.
  • Of the three dummy data items there, #1 only has a title and link, #2 has a title, description, image, and link, and #3 only has the title, description, and link.
  • The CQWP is set up to use the “image on left” Item Style.

If you view the HTML source, there is a TON of HTML code that goes into the above; there are several nested tables and stuff for allowing you to click on the header to edit it. Here is just a small sampling…

<table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr class="ms-WPHeader">

				<td align="left" class="ms-wpTdSpace"> </td>
				<td title="Recent News - Displays a dynamic view of content from your site." id="WebPartTitleWPQ2" class="ms-WPHeaderTd"><h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle"><nobr><span>Recent News</span><span id="WebPartCaptionWPQ2"></span></nobr></h3></td>

The actual data part – the list of news items – has HTML code that looks like this:

<ul class="dfwp-column dfwp-list" style="width:100%" >
<li class="dfwp-item"><div class="item"><div class="link-item"><a href="#" title="">New SPDevWiki site released!</a><div class="description"></div></div></div></li>
<li class="dfwp-item"><div class="item"><div class="link-item"><a href="#" title="">SharePoint 2010 SDK released</a><div class="description">SharePoint 2010 SDK released for RTM</div></div></div></li>
<li class="dfwp-item"><div class="item"><div class="link-item"><a href="#" title="">Announcing Community Kit for SharePoint</a><div class="description">CodePlex projects teams get together to release CKS:Dev!</div></div></div></li>
</ul>

There are plenty of classes to work with… but if I were to modify the .dfwp-xxx classes, those would affect all of the web parts using that type of display, and in my specific situation, I couldn’t throw the web part into my own custom <div> with an ID or class that would allow me to target only that web part.

But I’m getting ahead of myself. Let me show you what I was shooting for. Here’s my HTML that I would ideally want:

<div class="blogfeed-wrapper">
	<div class="blogfeed">
		<h2>Recent News</h2>
		<ul>
			<li>
				<p class="date">Jun 5, 2010</p>
				<p class="image"><img src="images/pic.png" alt="image" width="50" height="50" /></p>
				<h3><a href="#">Article title</a></h3>
				<p class="blurb">Article blurb</p>
			</li>
			<!-- repeat LI for each data item -->
		</ul>
	</div>
</div>

To accomplish this, I would have to:

  1. Figure out how to wrap the DIVs and UL around the repeated list items, along with the H2 heading
  2. Modify the code for the repeated list items to use the HTML code I want (and to show the additional “article date” field)

I looked around for information about customizing the Content Query Web Part and found this article, “Display Content Query Web Part Results in a Grid/Table” by Paul Galvin which seemed like it might do the trick. He references Heather Solomon’s blog post, “Customizing the Content Query Web Part and Custom Item Styles.” Here are the step-by-steps of what I did:

  1. I followed Heather Solomon’s article, steps 5-11, and Paul Galvin’s step 4 to create a test item style in ItemStyle.xsl in order to list out the data already being pulled into the web part. I named my custom style “TestList” – I’ll keep it around for testing other web parts.
    1. In SharePoint Designer 2010, open Style Library/XSL Style Sheets/ItemStyle.xsl. Note that this file is only available in a root or top-level SharePoint site, not in subsites.
    2. Click the “Edit” link (in the “Customization” section).
    3. In ItemStyle.xsl, you’ll see a few <xsl:variable /> tags at the top, followed by sections of <xsl:template /> code. Each <xsl:template /> has a name associated with it which corresponds to the Item Style dropdown in the Web Part editor.
    4. Here’s the code I added – just to keep it easy to find, I put it under the “Default” template section. Also notice that the value for name and @Style must be identical.
      <xsl:template name="Default" match="*" mode="itemstyle">
      ....
      </xsl:template>
      <!-- custom item style template for listing out fields -->
      <xsl:template name="TestList" match="Row[@Style='TestList']" mode="itemstyle">
      	<xsl:for-each select="@*">
      		<xsl:value-of select="name()" /><br />
      	</xsl:for-each>
      </xsl:template>
    5. Back in the browser, click to edit the web part. In the web part editor, under Presentation > Styles, pick the new “TestList” from the list of Item Styles:
    6. Here’s what I ended up with:
    7. If you want, copy and paste the list into a text editor for reference just in case.
  2. Now, following steps 12-13 in Heather’s article, I went to find the specific column “Internal Names” for fields that I wanted to add to the web part.
    1. Go to Site Settings > Site Administration: Site Libraries and Lists. This page shows a list of the various types of lists and libraries in your site.
    2. I picked the “Pages” list because that’s what my Content Query Web Part is pulling, but you’ll want to go to whichever list you’re trying to pull data from. This takes you to the List Information page.
    3. Scroll down to the Columns section to view all the columns that are available for that type of content.
    4. Hover or click on the link for the columns that you want to add to the Content Query Web Part results. I’m primarily interested in the “Article Date” column. At the very end of the link is the “Field” parameter, followed by the internal column name. In my case, the Article Date column’s internal name is ArticleStartDate.
  3. Following steps 16-18 in Heather’s article, I export the CQWP, modify the code to include the extra column(s), then import it back in as a new web part.
    1. Back on the web site, expand the edit menu and choose “Export.”
    2. Save the .WEBPART file to your computer, then open it in a text editor.
    3. Look for “CommonViewFields” and you’ll see something like this:
      <property name="CommonViewFields" type="string" />
    4. Following Heather’s instructions, I modify the tag to include my additional ArticleStartDate column.
      <property name="CommonViewFields" type="string">ArticleStartDate, DateTime</property>

      Note: From this MSDN article, “How to Display Custom Fields in a Content by Query Web Part,” there’s an additional step (Step 4) to map the new column to existing/available fields in the web part. This only works if your custom field can replace the Title, Description, LinkURL, or ImageURL web part fields – which could save you a few steps if, say, you wanted to show a different text column in place of the “description” field. In this case, though, since I want to display the article date, I’m going to have to do some actual customization to the XSL files, described below.

    5. Save the file. Back in the browser, click the “Edit” button to edit the page so that you can add more web parts to the page.
    6. Click “Add a Web Part”, then click “Upload a Web Part” and browse to your .WEBPART file, then click Upload.
    7. You’ll have to click “Add a Web Part” again, but this time you’ll see an additional folder for “Imported Web Parts” with your new web part listed. Add this to your page. (Mine is called “Recent News” because it exported my original Content Query Web Part, which had “Recent News” as the title.)
    8. The new web part will show up on the page. Notice that the new column is included with the other data:
    9. Delete the original web part just to get it off the page.
  4. Now, I wanted to figure out how to modify the HTML to display what I wanted: Some outer wrapper DIVs for styling, an H2 heading for the “Recent News” title, a wrapper UL for the list items, and then using a simple LI for each list item. Bear with me as I explain the overall approach:
    1. First – I’m going to get rid of the existing “Recent News” heading by changing the Chrome of the web part to hide the current title and ONLY show the list itself. This will allow me to get rid of the funky tables and code that are really difficult to style. (I’m going to be inserting my own heading in the HTML instead.)
    2. Then – I’m going to do the “easy” part, which is to edit ItemStyle.xsl with my HTML for each list item (the <LI> and everything in between from the top of this page in my “ideal” HTML code). This will allow me to get rid of the various DIVs from the default “Image on Left” code, remove displayed fields that I don’t need, and add in the additional fields that I want to display (in this example, ArticleStartDate). Both Paul and Heather’s articles cover this part. Note: As mentioned in Heather’s article, ItemStyle.xsl “repeats” itself for each data item, which is why I would only put in the <LI> code. If I added <UL>, I would get a separate UL list for each item.
    3. Finally – the “hard” part, which is to edit ContentQueryMain.xsl to put in my wrapper DIVs, H2 heading, and UL, which will go around the stuff being generated in ItemStyle.xsl and make everything look pretty. This is where I turned to Paul’s article.
  5. Here we go! Starting with 4a: Hide the web part title bar by editing the web part and changing the Chrome Type to “None.”

    Note: If you were to save/close or check in the page, you’ll just see the list of data fields without the title bar.

    If you’re like me, you may freak out initially: “What have I done?! Now I can’t edit the web part!” No worries – as soon as you click “Edit page,” you’ll see your web part zones and the title bar will reappear for editing.
  6. Pulling from Heather’s article (steps 19-24), I open ItemStyle.xsl (again) in SharePoint Designer for editing.
    1. At this point, I already have an idea of the Item Style that I want to start from – the “Image on Left” style, because it already will contain the code I need for the image, title, and description, so all I need to do is move things around and add the date. You will need to figure out which Item Style you want to start with and find the corresponding code.
    2. In this case, “Image on Left” happens to be the same as the “default” template, so I find the 60 or so lines of code that make up the Default template, copy, and paste it under my TestList template.
      <xsl:template name="Default" match="*" mode="itemstyle">
      ....
      </xsl:template>
    3. My first step is to replace <xsl:template name=”Default” match=”*” mode=”itemstyle”> with something that looks more like my TestList template line, but with yet another custom Item Style name. I’ll call mine “News”:
      <xsl:template name="News" match="Row[@Style='News']" mode="itemstyle">

      In other words, replace name=”YourCustomStyleName” and match=”Row[@Style=’YourCustomStyleName‘]” in your <xsl:template> tag.

    4. Now, each xsl:template section has some variables or parameters at the top, followed by recognizable HTML code mixed in with various xsl tags for testing conditionals or displaying data. I copy the “ideal HTML” that I want to have and paste it into the top of that section to start me off.
      <li>
      	<p class="date">Jun 5, 2010</p>
      	<p class="image"><img src="images/pic.png" alt="image" width="50" height="50" /></p>
      	<h3><a href="#">Article title</a></h3>
      	<p class="blurb">Article text</p>
      </li>
      
    5. Then, start moving the relevant XSL code into your HTML tags.You can see what I did below. I had to add the ArticleStartDate field (see Step 20 in Heather’s blog) and formatted it by following the steps at Josh Gaffey’s blog for Custom Date Formats in SharePoint so that the date is displayed as m/d/yyyy. (Note that I put stuff I don’t really care about… or don’t understand what they do… in a comment tag to hide them.)
      <!-- custom item style template for recent news -->
      <xsl:template name="News" match="Row[@Style='News']" mode="itemstyle">
          <xsl:variable name="SafeLinkUrl">
              <xsl:call-template name="OuterTemplate.GetSafeLink">
                  <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
              </xsl:call-template>
          </xsl:variable>
          <xsl:variable name="SafeImageUrl">
              <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                  <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
              </xsl:call-template>
          </xsl:variable>
          <xsl:variable name="DisplayTitle">
              <xsl:call-template name="OuterTemplate.GetTitle">
                  <xsl:with-param name="Title" select="@Title"/>
                  <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
              </xsl:call-template>
          </xsl:variable>
      
      	<li>
      		<!-- Here is where I add in my ArticleStartDate field. It would typically look like
      		<xsl:value-of select="@ArticleStartDate" />
      		but the extra stuff is to format the date. -->
      		<p class="date"><xsl:value-of select="ddwrt:FormatDate(@ArticleStartDate,1033,1)" /></p>
      
      		<xsl:if test="string-length($SafeImageUrl) != 0">
                  <p class="image">
                      <a href="{$SafeLinkUrl}">
                        <xsl:if test="$ItemsHaveStreams = 'True'">
                          <xsl:attribute name="onclick">
                            <xsl:value-of select="@OnClickForWebRendering"/>
                          </xsl:attribute>
                        </xsl:if>
                        <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                          <xsl:attribute name="onclick">
                            <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                          </xsl:attribute>
                        </xsl:if>
                        <img class="image" src="{$SafeImageUrl}" title="{@ImageUrlAltText}">
                          <xsl:if test="$ImageWidth != ''">
                            <xsl:attribute name="width">
                              <xsl:value-of select="$ImageWidth" />
                            </xsl:attribute>
                          </xsl:if>
                          <xsl:if test="$ImageHeight != ''">
                            <xsl:attribute name="height">
                              <xsl:value-of select="$ImageHeight" />
                            </xsl:attribute>
                          </xsl:if>
                        </img>
                      </a>
                  </p>
              </xsl:if>
      
      		<h3><a href="{$SafeLinkUrl}" title="{@LinkToolTip}"><xsl:value-of select="$DisplayTitle"/></a></h3>
      		<p class="blurb"><xsl:value-of select="@Description" /></p>
      
      		<!--
      		<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
                  <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
                    <xsl:if test="$ItemsHaveStreams = 'True'">
                      <xsl:attribute name="onclick">
                        <xsl:value-of select="@OnClickForWebRendering"/>
                      </xsl:attribute>
                    </xsl:if>
                    <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                      <xsl:attribute name="onclick">
                        <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                      </xsl:attribute>
                    </xsl:if>
      
                  </a>
                  -->
      	</li>
      </xsl:template>
      
    6. When you’re done, go back into the browser to edit the web part. You should see your new custom item style in the Item Style select box. In the screenshot below, you can see that “News” (the name of my custom Item Style) showed up properly, so I was able to pick it and apply it. Of course, I’m still missing the wrapper HTML code (for the UL, etc.) so I moved on to the next step…
  7. Now I want to get the wrapper HTML code (below) around the LIs.
    <div class="blogfeed-wrapper">
    	<div class="blogfeed">
    		<h2>Recent News</h2>
    		<ul>
    		...
    		</ul>
    	</div>
    </div>
    

    At first glance, Paul’s article seems perfect for what I need to do. His method is to edit ContentQueryMain.xsl to pass in parameters that identify the “current position” and “last row” so that ItemStyle.xsl can put in special code at the start of the list (when current position = 0) and the end of the list (current position = last row). Unfortunately, after following his detailed and clear instructions, I found that it didn’t work for me. I’m not sure if it’s because of a difference in SharePoint 2007 and 2010, but basically what was going on was that the .dfwp-xxxx UL and LIs were still being wrapped around my code. So while Paul’s technique “worked” in the sense that the wrapper code showed up before the first item and after the last item, the other stuff was getting in the way and creating havoc with the code:

    <ul class="dfwp-column dfwp-list" style="width:100%" >
    <li class="dfwp-item">
    	<div class="blogfeed-wrapper">
    		<div class="blogfeed">
    			<h2>Recent News</h2>
    			<ul>
    			<li>...</li>
    </li>
    <li class="dfwp-item">
    			<li>...</li>
    </li>
    <li class="dfwp-item">
    			<li>...</li>
    			</ul>
    		</div>
    	</div>
    </li>
    </ul>
    

    Diving deep into the ContentQueryMain.xsl file, I was able to locate various variable definitions that hold the HTML code for the UL and LI tags. There were some variables near the top of the file and more inside the OuterTemplate.Body template.

    <xsl:variable name="BeginList" select="string('&lt;ul class=&quot;dfwp-list&quot;&gt;')" />
    <xsl:variable name="EndList" select="string('&lt;/ul&gt;')" />
    <xsl:variable name="BeginListItem" select="string('&lt;li class=&quot;dfwp-item&quot;&gt;')" />
    <xsl:variable name="EndListItem" select="string('&lt;/li&gt;')" />
    
    <xsl:template name="OuterTemplate.Body">
    	...
    	<xsl:variable name="BeginColumn1" select="string('&lt;ul class=&quot;dfwp-column dfwp-list&quot; style=&quot;width:')" />
    	<xsl:variable name="BeginColumn2" select="string('%&quot; &gt;')" />
    	<xsl:variable name="BeginColumn" select="concat($BeginColumn1, $cbq_columnwidth, $BeginColumn2)" />
    	<xsl:variable name="EndColumn" select="string('&lt;/ul&gt;')" />
    

    If you do a quick search in the code for $BeginList, $EndList, etc., you’ll see that those variables are printed out several times in different places. Not being at all an expert, though, it was pretty hard for me to figure out what was going on, so I resorted to an elegant solution to find the places to target. And by “elegant,” I mean “amateurish and hackish.” If you aren’t too embarrassed to follow my example, here’s what you do…

  8. Go through all of the code, looked for all the instances where those variables are printed out, and add test text before them that will print out in the HTML and show which conditionals were being fulfilled. Here’s one example:
    TEST1
    <xsl:value of disable-output-escaping="yes" select="$BeginColumn" />
    

    You’ll want to repeat that for each time you see an <xsl:value /> tag for $BeginList, $EndList, $BeginListItem, $EndListItem, $BeginColumn, and $EndColumn.

    When I saved and refreshed my browser, this is what I saw:

  9. Now you can go through the code, find the places where your test code was added, and replace them with your custom code. Below are the steps that I took, but you’ll need to figure out what will work for you.
    1. My first step was to set up my own custom variables for the wrapper. Inside the OuterTemplate.Body, under the existing variable definitions for BeginColumn1, BeginColumn2, etc., I added this custom code below. Since I didn’t feel like dealing with lots of &lt; and &gt;, I put my HTML code inside a CDATA section:
      <!-- my custom variables for the news section -->
      <xsl:variable name="newsStart">
      	<![CDATA[
      		<div class="blogfeed-wrapper">
      			<div class="blogfeed">
      				<h2>Recent News</h2>
      				<ul>
      
      	]]>
      </xsl:variable>
      <xsl:variable name="newsEnd">
      	<![CDATA[
      				</ul>
      			</div>
      		</div>
      
      	]]>
      </xsl:variable>
      
      
    2. Okay, NOW I’m ready to replace my “TEST#” stuff with actual useful code. I looked for TEST1 (start of list), TEST9 (start of list item), TEST10 (end of list item), and TEST6 (end of list) in the ContentQueryMain.xsl file. I added <xsl:choose /> and <xsl:when /> statements to put in my custom variables when the Item Style = “News” (the name of my custom item style).Here is the original code (with the first TEST1 stuck in there):
      <xsl:choose>
          <xsl:when test="$cbq_isgrouping != 'True'">
              <xsl:if test="$CurPosition = $FirstRow">
      		TEST1
      		<xsl:value-of disable-output-escaping="yes" select="$BeginColumn" />
              </xsl:if>
          </xsl:when>
      

      And here’s my edited code:

      <xsl:choose>
          <xsl:when test="$cbq_isgrouping != 'True'">
              <xsl:if test="$CurPosition = $FirstRow">
              <!-- customized stuff -->
      		<xsl:choose>
              	<xsl:when test="@Style='News'">
              		<xsl:value-of disable-output-escaping="yes" select="$newsStart" />
      			</xsl:when>
      			<xsl:otherwise>
      				<!-- this was the original code -->
      				<xsl:value-of disable-output-escaping="yes" select="$BeginColumn" />
      			</xsl:otherwise>
              </xsl:choose>
              <!-- end customized stuff -->
      
              </xsl:if>
          </xsl:when>
      
    3. I repeated the process for the other sections. Because my <li> and </li> is inside the ItemStyle.xsl file, I didn’t need to define variables for those and left those “when” statements empty.
      <!-- customized stuff -->
      <xsl:choose>
      	<xsl:when test="@Style='News'">
      		<xsl:value-of disable-output-escaping="yes" select="$newsEnd" />
      	</xsl:when>
      	<xsl:otherwise>
      		<!-- this was the original code -->
      		<xsl:value-of disable-output-escaping="yes" select="$EndColumn" />
      	</xsl:otherwise>
      </xsl:choose>
      <!-- end customized stuff -->
      
      ...
      
      <xsl:template name="OuterTemplate.CallItemTemplate">
          <xsl:param name="CurPosition" />
          <xsl:param name="LastRow" />
          <!-- customized stuff -->
      	<xsl:choose>
          	<xsl:when test="@Style='News'" />
      	<xsl:otherwise>
      		<!-- this was the original code -->
      		<xsl:value-of disable-output-escaping="yes" select="$BeginListItem" />
      	</xsl:otherwise>
          </xsl:choose>
          <!-- end customized stuff -->
      
      ...
      
      <!-- customized stuff -->
      <xsl:choose>
      	<xsl:when test="@Style='News'" />
      	<xsl:otherwise>
      		<!-- this was the original code -->
      		<xsl:value-of disable-output-escaping="yes" select="$EndListItem" />
      	</xsl:otherwise>
      </xsl:choose>
      <!-- end customized stuff -->
      
      
    4. And after saving the page, going back to the browser, and refreshing, I finally have my desired result! (Note that the colors and layout are all part of my stylesheet, which I’m not delving into for this article.)

      Here is what the HTML looks like (I took out the URLs and added line breaks for legibility). It’s much cleaner than the original generated HTML and includes the classes that I need to hook in my CSS!

      <div class="blogfeed-wrapper">
      	<div class="blogfeed">
      		<h2>Recent News</h2>
      		<ul>
      			<li xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
      				<p class="date"></p>
      				<h3><a href="..." title="">New SPDevWiki site released!</a></h3>
      				<p class="blurb"></p>
      			</li>
      			<li xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
      				<p class="date">8/3/2010</p>
      				<p class="image"><a href="..."><img class="image" src=".../image.png" title="" /></a></p>
      				<h3><a href="..." title="">SharePoint 2010 SDK released</a></h3>
      				<p class="blurb">SharePoint 2010 SDK released for RTM</p>
      			</li>
      			<li xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
      				<p class="date">6/4/2010</p>
      				<h3><a href="..." title="">Announcing Community Kit for SharePoint</a></h3>
      				<p class="blurb">CodePlex projects teams get together to release CKS:Dev!</p>
      			</li>
      		</ul>
      	</div>
      </div>
      

Whew! That was really long. Here’s a summary of the steps that I took:

  1. Created a custom “test” Item Style to list out the fields being passed to the web part, which also helped after Step 3 to see if the new fields were added in properly or not.
  2. Figured out the internal column name(s) for the additional field(s) to add to the web part.
  3. Exported the Custom Query Web Part that was on the page, modified the code to add the fields, and imported the modified web part back in and added it to the page.
  4. Changed the Chrome type to “none” to hide the title bar.
  5. Created a custom “News” Item Style and modified the code to get the HTML that I wanted to display for each item.
  6. Hacked ContentQueryMain.xsl to figure out where to modify the code, then added custom code specific to the “News” Item Style for my wrap-around code.

I definitely appreciate any comments that more experienced SharePoint developers have about how to modify the ContentQueryMain.xsl file more elegantly or other ways to accomplish this! If you have questions, please feel free to post them but remember that I’m new to this as well and may not be able to answer them. 😉

References and acknowledgements

The Mission Church of Boston site redesign

I’ve worked with PK of Imperial Consulting on several different projects. One of our recent projects was a site design for The Mission Church of Boston where I provided the site design and HTML/CSS and PK hooked in the content management system and other nifty back-end features.

PK IMed me this morning letting me know that there was a huge traffic spike because apparently that is where Senator Kennedy’s funeral is taking place this weekend. I made sure the site was still looking mostly polished and decided this would be a good chance to finally motivate myself to post another design process blog.

The Mission Church is a huge Boston landmark and still functions as a church, but the original site didn’t really do it justice. Here’s a screen shot of what the site looked like originally:

Old Mission Church site

After finding out the main things they wanted to feature on the home page, I came up with four different design ideas.

1

2

3

4

This provided the church a starting point for discussion. They decided that they wanted a briefer header — no big image at the top — but they liked the use of photographs for the four different sections. The next iteration resulted in this:

5

As it so often happen with “design by committee,” the discussion went full circle, so a photo went back into the top and the layout dimensions shifted again. I also made a design choice to colorize the photos so that they blended better visually and toned down the overall look of the site. I can’t remember why we went from the parchment letter in the left column to small icons, but I like it better below.

6

The final change was to add a background color to the page and make the content area pop out more with a drop shadow. We tried white, yellow, and blue. They picked blue.

7

7b

7c

The transition from full control over HTML/CSS to CMS-generated content (content management system) went fairly smoothly with only a few minor tweaks. Here is the site as it stands today:

missionchurch

As usual, I appreciated PK acting as the manager and middleman so that I didn’t have to sit through hours of design-by-committee meetings. 🙂

Will design logo for iPhone

Or, My Fastest Logo Design Job Ever.

My coworker-friend-whom-I’ve-never-met-in-person, AKA SharePoint Queen herself, Heather Waterman, happened to ask me the other day if I wanted her old iPhone since she upgraded to a 3G. After finding out that it would impact us by $30/month for the data plan, I decided to go for it and asked how much she wanted for it. She said, “If you want to do a text logo for ‘Waterman Design Group’ we can trade for the iPhone… something simple.”

I had some time this afternoon while I was waiting for Steven to take a nap and pulled out my sketchbook to play with letter shapes. After several false starts, I started going with a W-crown, thinking of Heather as “SharePoint Queen,” but somehow that just didn’t fit the “Design Group” idea. I happened to notice an earlier idea (upper right) where the D and G shapes reflected each other and came up with the two on the bottom right, which were pretty close to how the final logo turned out.

sketches

Of course I had to mock it up in Illustrator to make sure it would work. I did 1-3 first and sent a quick screenshot to Heather, who happened to be on IM. She liked the D/G of 3 and the W/M of 1. I put those together to make 5, then tried #4 for more of an overlapped “N” shape. We both liked #5 better — I liked that the overlapped “M” could also be viewed as a backwards “N,” so you can either emphasize WaterMan or WatermaN — or kind of have WaterMaN all smushed up in there. Heather has a nice last name for a wordmark!

logo-idea1

Next I tried some color variations…

logo-idea2

But ultimately Heather decided she liked the original black/grey version, so then I played with the final logo with her company name.

logo-idea4

Total time: 1 hour, 10 minutes! That’s what you get when you have a dash of inspiration with fast Illustrator skillz and immediate feedback.

As it turned out, my logo rates compared to the amount she was thinking of selling it for turned out to be just about the same, so we were both very happy with the trade. Now I’m looking forward to joining the iPhone crowd!

Print Design: FBC Brochure

This is a project I completed several months ago, but it’s taken me a while to actually take pictures of the completed product!

A couple years ago, I had created a simple tri-fold, two-color brochure for my church. This year, they asked me to put together a full-color, updated brochure based on a shorter, wider tri-fold style. Here are the two sides of what I came up with:

Brochure side 1

Brochure side 2

A different designer had redesigned the church’s templates used for weekly bulletin and sermon notes, and I tied in some of the elements from their design with this brochure: The gold circular icons, the “strip of photos” treatment, and the use of a serif type for the titles. I tried to make the design a bit more fluid by adding in some multi-level lines connected with curves and plenty of rounded corners. I also tied in some of the photos that I’ve used for the FBC web site.

As I don’t have a background in print design, I depend heavily on the printers telling me what they need from me. Luckily the Illustrator files I provided with embedded photos seemed to be enough! I was surprised one Sunday by seeing the new brochure, printed on glossy card stock, in the chair rack in front of me.

Here are a couple photos…

The front of the brochure:

FBC brochure - front

First open: The right side is still folded over although the connected gold line gives the illusion that it’s one spread. (I was impressed that the printer was able to match up the lines in the design from one side to the other.)

FBC brochure - opened

“3D” photo of the brochure:

Brochure unfolded

Web design: The EHR Group

I wrapped up a web design project a couple months ago for The EHR Group.

Original EHR Group web site Mike Uretz, the Executive Director, came to me with a several-year-old FrontPage web site. Mike thought the web site looked dated and wanted something more contemporary. As his business consults with medical professionals about what electronic health record system would be best for them, he wanted his web site to appeal to both people who would be familiar with technology but also to be easy enough to navigate for people who weren’t very computer savvy.

I started out with some rough greyscale screenshots to provide different layout options. These are some of the ones that weren’t chosen:

EHR Group wireframes

The chosen design used tabs to help indicate the section and had both dropdown menus and left column submenu areas to provide obvious ways for a user to navigate the site.

I then started to work on some rough ideas for the home page layout, then worked on color schemes, shown in the screenshots below:

EHR Group color ideas

At this point, Mike still wasn’t sure exactly what he wanted on the home page. He had some ideas about the types of content areas he wanted but hadn’t yet pulled together the specific marketing text and messages that he wanted to convey. My initial round of screenshots had used a wireframe concept to lay out the content areas, using grey boxes and short placeholder text to delineate content areas. However, we hit an impasse as Mike expressed dissatisfaction with the direction of the design. Both Mike and I were still feeling each other out and trying to figure out how to best work together and communicate; it took a few phone conversations for me to realize that Mike was a very visual person and actually didn’t work well wireframes and content placeholders. So, I asked Mike to develop the specific content and wording he wanted for the home page while I built the HTML and CSS for the other pages. Then we went back to redesigning the home page, which went a lot better once he could see the actual content in the screenshot.

EHR Group home page layouts

Below is the final result for the home page. Mike liked heavier use of graphics for the home page, including the two bottom left graphics, which we used in the other pages as well.

EHR Group home page

I had tried using smaller graphics to accent the pages initially, but Mike thought they were too artificially slapped into the content area. He liked it much better when I tried putting a larger graphic into the background behind the text. Each page has a different image related with the content.

EHR Group about page

By the end of the project, our working relationship had smoothed into a good flow. I understood Mike’s communication style; he was able to trust my design and working process. We were both very happy with the final result, which allows Mike to use Microsoft Expression Web to make minor changes to the wording himself. This is a project that I’m excited to add to my portfolio and which has taught me many valuable lessons about customizing my process to fit the needs and personality of the client.

Exercise in Photo Editing

I thought some people might be interested in seeing some examples of photo editing. As I mainly work in web design, I have an easier time with photo editing because web images are relatively low resolution and don’t require as much painstaking attention to detail.

Below are two photos of a condo development and some comments about the process.

Here is the original photo. I was asked to remove the tree on the right side, and, of course, straighten the photo.

Original photo

I used the Crop tool in Photoshop to crop the photo, rotating the cropped area to straighten the building. I also used the Levels command to lighten the picture slightly.

Straightened and cropped

I created a new layer and then worked on cloning the sky to cover up the tree (the cloned areas are tinted green). The clone tool has an option where you can “select all layers” — this allows you to clone from below layers onto a new layer. By cloning onto a new layer, you don’t “mess up” the original photo and can make edits more easily later. This is one example of nondestructive editing!

I then used the marquee tool to select a part of the building (the next “section” over) that didn’t have a tree over it and pasted it into a new layer (tinted purple). I created a layer mask for that layer and carefully blended out the edges.

Edited photo

Here is a closeup of the photo with tree:

Closeup

And a closeup of the edited sky is below. The landscape is a bit blurred together, but when shrunk down to web resolution, it doesn’t really matter.

Closeup edited

And a closeup of the edited building as well:

Closeup edited

Now, the final picture at approximately the final dimensions:

Final photo

The next photo was a bit more challenging. Here’s the original:

Original photo

Unfortunately, the marina buildings (with the red frame and yellow stairs) were blocking the specific units that needed to be shown in the image. I was asked to do some “Photoshop magic” to show those units as well as get rid of the light posts — the one on the left of the building, and the one sticking up right in the middle.

I worked a little differently on this photo. Instead of working first with a high resolution photo, I worked directly with the smaller web-resolution photo size. I wouldn’t recommend this, but I was basically short on time and needed to work faster! (So, no close-ups for this picture.)

Cropped photo

First, I copied the middle two floors on the left side and pasted them onto a new layer (purple). Moving these down “one floor,” I was able to get the bottom unit to show up. I used a layer mask to fade out the edges, then used the Warp Transform command to add the tiny bit of perspective needed for the bottom floor to look “right.”

Creating a new blank layer, I used the clone tool to remove the light posts. You can see the edited results in the pink-tinted layer.

Unfortunately I had no idea what the bottom part of the building looked like just below the windows and balconies. I copied the middle bottom section (where the formerly edited light post used to be) with the bottom wall and balcony shadow and pasted it twice to continue the wall to the left (yellow). Finally, I removed the marina buildings by grabbing a piece of the retaining wall into its own layer, then stretching it and masking it (green).

Photo editing

And here’s the final edited photo. It’s a pretty rough job, but again, at web resolution, it doesn’t matter too much and gives the viewer a decent idea of what the building looks like!

Final photo

Shameless plug: I have a few tidbits about photo editing in my book, The Photoshop Anthology, which is written specifically for web developers/designers who want to learn more about Photoshop. Through the different solutions presented in the book, I talk about the clone tool, layer masks, and the other tools and techniques mentioned here. If you found this article interesting and would like to buy the book, please consider purchasing it through my affiliate link above!

Gear Desk Logo Design

A project I’ve wrapped up recently also has the distinction of being the first job I’ve gotten from a blog reader, P.K. I was asked to design a logo for Gear Desk, a (beta) directory for high-end build-it-yourself audio gear (updated 8/24 – sorry, P.K.!).

P.K. had some specific ideas initially and asked for some sketches involving either a dial/knob or a power button. My first round of sketches stayed within the boundaries he had defined. In our first conversation, he had also mentioned that a bonus would be to have a business card that looked like audio equipment with the logo, so I sketched a few possibilities for how the logo shape might integrate on a business card.

Gear Desk logo design, round 1

After round 1, the power button idea was thrown out altogether and I was asked to play more with the dial/knob shape.

Gear Desk logo design, round 2

P.K. tended to like minimalistic, clean shapes. While he liked 6a and 6b, he was afraid that it was too abstract and didn’t really say “gear.” This was true of most of the knob shapes – taken without any context, it could be difficult to figure out what the shape was. P.K. gave me carte blanche to find a new direction for the logo, agreeing to an extra round of sketches.

I went back to the original photos of high-end gear and audio equipment that P.K. had originally provided, doing some sketches of the ones that looked nice and trying to distill elements that would really speak “gear.” Some of the notes I made below: “Rounded corners look more high-class (like ipod)” “Feet really help make it look like ‘gear'” “Dials by themselves do not communicate ‘gear'” I sketched out a few more ideas, basing them on actual pieces of equipment but simplifying the shapes.

Gear Desk logo design, round 3

After looking at this round of sketches, P.K. felt comfortable letting me run with three options and creating digital versions.

Gear Desk logo design, round 4

P.K. really liked the simplicity of #1, but thought a “dimple” would make the knob look more like a knob, and less like a projector lens. I did one more round of digital sketches, along with some color samples so that he could see what it looked like with color.

Gear Desk logo design, round 5

Gear Desk Logo

After a few more screenshots with different fonts and colors, we finally ended up with a logo that we were both happy with. The final logo used a “tick” instead of a dimple, which we thought helped to make it look more like a knob (and less like a projector lens highlight), incorporated the rounded corners and feet to make the box look more like equipment, and used a clean serif font for a more “expensive” feel.

P.K. was great to work with. It was a new experience for me as he was the first of my clients to use IM and was able to give me instant feedback. I appreciated that he was very open throughout the whole process, willing to scrap our original ideas and go in a totally different direction — which thankfully worked out!

Now I just need to take the time to update my portfolio…