This solution is for when you need to publish a button on a page, not on the Top Nav or Quick Launch.

I prefer using one single image per button and make the image "shift up and down" depending on whether is just active or being hovered. But there are going to be situations where two images are necessary. This is one solution I use for those cases.

For this solution I use:
    - Two images (one for each button status)
    - CSS
    - Content Editor Web Part

Step 1 - Create The Necessary Images Using a Graphics Tool

Create your own button using an application such as Photoshop or Fireworks, or use one from a trusted source.

The trick is to make the images look exactly the same size so when they swap they do so seamingless. You should also make sure that the label you will be using is of the exact same font type and size for both images. Feel free to change the font colour if the background of oneof the images merges too much with it. However, make sure to keep it the same size and font family, as well as position within the image, so they swap smoothly.

Once you have created or acquired the necessary images, upload them to the SharePoint library of your choice.

For our example we're going to pretend that our images are catalog.jpg and cataloghov.jpg.

Step 2 - Create The Necessary CSS Styles

Within your copy of Microsoft's original css file, create two classes. One will be used for one button status, while the other one will be used for the other button status.

Button Normal Status:

Change width and height to match your image width and height, as well as the location to the file itself.

Button Rollover Status:

Replace the id value above with the name of your own CSS, as well as the title applicable to your own situation. Don't forget to also replace the URL to point to the file, site, Web site, library, etc., applicable to your needs.

I love the fact that Microsoft now included Fields to display options within a Content Query Web Part (CQWP). In more than one ocassion where I didn't need to get too fancy about styles, I was able to do with this option instead of having to create custom styles in my Style Sheets. I'm saying this because the solution I'm about to present has been simplified to take advantage of these new SharePoint 2010 features. So let's dive in.

More than once I've been asked to use "nicer" images or small logos in place of the typical HTML bullet or the little orange square bullet that SharePoint usually displays for bulleted lists.

Step 1 - Create, Reuse, or Adapt Image to be used as Bullet

So the first thing I usually do is I create or adapt a bullet from images the customer might provide, or I create one from scratch using an imaging application such as Photoshop or Fireworks.

So once you have your image, upload it to a library of your choice. When it comes to elements that I'm going to be using as part of my custom look and feel, I have a tendency to "hide" them in places my users won't be able to find easily. More than once I ended up with that "loverly" red X in place of images because my customers would not know what the file is and delete it. So I usually create a Master Page folder within the Style Library and I upload (and publish) all my images for custom look and feel there. So this example will assume that. We will also assume the name for the image is divbullet.gif.

Step 2 - Create The Necessary CSS Class Definitions

In my copy of the corev4.css file, I create a class that usually looks something like this:

.myBullet
{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 8pt;
    padding: 4px 0px 0px 18px;
    color: #ffffff;
    text-align: left;
    background-image: url(PathToYourImage/divbullet.gif);
    background-repeat: no-repeat;
    background-position: inherit;
}
 

You may need to adapt the padding settings to better accomodate for the image of your choice.

Step 3 - Create The Necessary Item Styles

After making a copy of Microsoft's original Style Sheet, modify your copy to include a style that will be used by the CQWP.

<xsl:template name="MyLinks" match="Row[@'MyLinks']" mode="itemstyle">
  <xsl:variable name="DisplayTitle">
   <xsl:call-template name="OuterTemplate.GetTitle">
    <xsl:with-param name="Title" select="@MyLink"/>
    <xsl:with-param name="UrlColumnName" select="'URL'"/>
   </xsl:call-template>
  </xsl:variable>
  <xsl:variable name="LinkTarget">
   <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
  </xsl:variable>
  <div id="linkitem" >

<!-- Apply special bullet styles -->

   <div class="myBullet" >

<!-- Link to item -->

    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
    <a>
     <xsl:attribute name="href">
      <xsl:value-of select="substring-before($DisplayTitle,', ')"></xsl:value-of>
        </xsl:attribute>
        <xsl:attribute name="title">
         <xsl:value-of select="@Description"></xsl:value-of>
     </xsl:attribute>
     <xsl:value-of select="substring-after($DisplayTitle,', ')"></xsl:value-of>
    </a>

   </div>
  </div>
 </xsl:template>


 

Step 4 - Add and Modify Content Query Web Part (CQWP)

Go to the page where you would like to display the links, insert a CQWP, open its tool pane, select the custom links list within Query, apply filters if any (such as DisplayYN),  remove chrome, provide a name and make any other changes that you may see fit. Then export the web part to your computer, open it using Notepad, and make the following changes:

Save the modified CQWP, upload it to the page where it should display, edit the web part, and verify that within the Fields to display section (you may need to expand Presentation) MyLink displays in the name for the hyperlink column in the Link box; otherwise, type it in.

Within the Styles section of the web part tool part, select MyLinks at the Item Style drop-down list.

Select [Apply] and [OK] at the bottom of the tool part.

Another frequent request I receive is the ability to post a message that the site is under construction or an important announcement needs to be displayed. For the announcements, many of my customers do not want to use the actual SharePoint Announcement list. They just want something that stands out on their home page.

So I usually provide one of two solutions:
    - Scrolling Marquee with no styles
    - Scrolling Marquee with styles

Well, what I actually mean by 'no styles' is simple HTML code with no need to create XSL templates. Usually this is the easiest way to go. But for some other assignments with more complex needs, I had to recourse to well, a little bit more complex of a solution.

And for the simple, easy to implement solution, this is what I do:
 
1. Add a Content Editor Web Part to the page where you would like to display a marquee

2. Edit and modify the Content Editor web part properties, remove the chrome, make any other changes as desired, give the web part a meaningful name (for example, Marquee), and then select [Apply] followed by [OK]

3. Select Click here to add new content at the Content Editor Web Part

4. Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source

5. Type in or copy and paste the code below in the HTML Source web page dialog

6. Select [OK] and save the page (and publish if publishing is turned on for your site)

You can change anything that is highlighted in red above, as well as the sample text in blue to suit your own needs.

Note: If SharePoint modifies the code above after you saved and it doesn't render as desired, create a TXT file containing the code above, upload the file to a document library, and reference the file via the Content Editor Web Part.

In a handful of situations I had to create something a little bit more complex than the simple HTML marquee above. For those cases, I used the following elements:
    - Site Column (Optional)
    - Custom List
    - Styles (CSS)
    - XSL Template
    - Customized Content Query Web Part

Step 1 - Site Column (Optional)

Since I don't like doing things more times than absolutely necessary, for most part I end up creating site columns for columns I know I'm going to be using at more than one list or library. For this particular scenario, I created a site column named DisplayYN (Yes/No checkbox or Choice (Yes/No) column). For this example, we are going to say the DisplayYN column is Boolean (Yes/No checkbox).

Step 2 - Create Alerts Custom List

The next step was to create a custom list to manage the Alerts. The list would contain only a couple of columns:
    - Title (the text for the alert)
    - DisplayYN site column

You may be asking yourself why the custom list and why the DisplayYN flag. In many projects I have to work on there's a business approval process behind the scenes where usually the person who creates the text and items on the list is not necessarily the one who gives the green light to display the alerts on the sites. So these people go through review processes until everybody is happy and then the person responsible for the site or alerts edits the item and selects DisplayYN to 'Yes.'

Step 3 - Create The Necessary Styles (CSS)

I create a custom style definition in my CSS file (the copy I created from the corev4.css file). If you have been following my posts, then you know how I advocate towards making copies of Microsoft's files and leaving their original files alone. So back to that point, the following is an example class I may create:

Don't forget to check in and publish (if needed) your CSS file for the changes to become visible to those users who have been granted the lowest access levels to the site, as well as registering and referencing your external CSS file on your custom master page, as needed.

Step 4 - Create The Necessary Item Style Templates

In your XSL Style Sheet (the one that I hope you copied from Microsoft's original) I create a template, as follows,

Some designers also like to include an entry on their Content Query Main to declare the above template. Not everybody follows this rule. Depending on the styles, SharePoint will still render the items on the page, whether you modify the Content Query Main file or not.

Step 5 - Create The Custom Content Query Web Part (CQWP)

I add a CQWP to the home page or page where the alert should display at. I then modify the CQWP to use the custom list as source and I set the filter on DisplayYN equals Yes. That way only those items on the custom alerts list that have been selected to be displayed will display.

For most part, my customers never select more than one item at a time. But they usually want to know which other alerts they had published before. That's when this second solution turns out to be better than the simple HTML shared further above.

Then I export the CQWP to my computer and I open it using a tool like Notepad. I then make the following changes:

I save and then I import the updated CQWP to the page. The last thing is to select my style within the drop-down Presentation list within the CQWP tool pane. And finally, I delete the original CQWP from the page once I make sure the customized one is working as expected.

Visit this page to view a list of the Locale IDs (LCID) applied in XSL format statements to select the appropriate one for your particular needs if date, time, currency, or all of the above are not displaying in the desired or needed format on a Data View Web Part. (This also applies to Content Query Web Parts.).

Add this snippet of code to the Item Style (Style Sheet) file to render the names of the fields being passed to the Content Query Web Part (CQWP). Note that this code will be temporary. You don't want to leave this in the finished Item Style!

Save the file. Return to the site (in the browser) and refresh the page. Open the Web Part Tool Pane for the CQWP and expand Presentation. Then under Styles change the Item Style to the new custom style (RenderFieldsBeingPassed) in the drop down. Select Apply.

The CQWP will now list out all of the fields that are being passed.

Some of the changes that Microsoft has made to SharePoint has made Designers' work a little bit more cumbersome. One of the things that I remember being able to do in MOSS 2007 was the ability to create publishing sub site templates that I could reuse over and over again.

They say that Microsoft never intended for us to be able to create publishing sub site templates, not even in MOSS 2007. But by turning the publishing feature off, we were able to get around and save the sub site as a template, create a new one from said template, and then turn the publishing features back on for the newly created sub site.

(Another trick was to backup the sub site in SharePoint Designer and then restore it over a blank sub site. But that option is gone in SharePoint 2010, as well.)

So the only way I found to make my life a bit easier as as Designer and to reduce the amount of repetitive work is using the Manage Content and Structure tool.

1. Create the publishing sub site you want to use as template for creating the new ones

2. Create all pages and components (lists, web parts, etc.)

3. Once you have completely created your publishing sub site, the one that is going to serve as template, go to the level right above it and select [Site Actions] > Manage Content and Structure

4. Click the row where the name of the sub site displays and select Copy from the pop-up menu

5. Select the destination where you would like to paste the sub site to

6. Access the newly created sub site via your browser (you will need to leave the Site Content and Structure page), rename the sub site, edit the home page, edit any content query web parts (if any) that you may have on the home page or any other pages to the case, and make them point to the sub site’s lists and libraries, instead

Important Note: When a sub site is created this way, web parts such as the Content Query Web Parts will still be pointing to the original sub site used as template for creating new sub site.

That’s it. The only thing to keep in mind is that when you modify the path to the appropriate list or library for a content query web parts by using the [Browse] button you will lose all the other settings for said Content Query Web Part (for example, filters, etc.). To prevent this from happening, edit the path manually (for example, if the path to is /SiteName/SubSiteTemplates/SubSiteTemplateName/Lists/ListName and it should read /SiteName/NewSubSiteName/SubSiteTemplateName/Lists/ListName, type in that one section of the path; this will prevent the filters from being cleared.)

The steps below allow you to add a "Welcome to the site, Jane Doe!" welcome message to a page. We did this to insert it to an Announcement list.

1. Using SharePoint Designer, insert a Data View Web Part based on the Announcement list;

2. Select Data > Conditional Formatting;

3. Select any data value and select Create;

4. Select Show Content;

5. Create a condition that reads Title EQUALS [Current User] and select [OK];
 
6. Go back to the Design view;

7. Type "Welcome to the site, " inside one of the Table cells;

8. Switch to Code view;

9. Find the following code:

10. Change this code to:

11. Scroll up in the code and find "Welcome to the site, "

12. Change this code to: "Welcome to the site, <xsl:value-of select="$UserID"/>"

13. Save the page.

As part of one of my assignments I needed to insert four Content Query Web Parts at the bottom of my custom master page for the site. This was a somewhat easy thing to do in MOSS 2007 and you would do it only once on the master page itself. Well, that’s not the case in SharePoint 2010 anymore. You cannot insert Web Parts on a SharePoint 2010 Master Page at all. However, I found a way around it.

Microsoft might have taken that functionality away from us in what concerns Master Pages. But… they have not taken it away when it comes to page layouts. You can insert web parts in a custom page layout.

The main con about this approach is that if you need those web parts available to all pages being created on your site, then you have to create a copy of each page layout available out there and insert the web parts to all of them. So when your customers create new pages, the web parts are going to be there. (By inserting them once in the MOSS 2007 master page you were done; now you have to replicate the job for all page layouts for which you want those web parts to display.)

Note: As I always emphasize, make sure you are working on a copy of Microsoft’s originals and leave the originals from Microsoft alone.

This is what you need to do:

1. Create some “test” or “hidden” page somewhere on the site where you can create your web parts and edit the page;

2. Insert the web part at any web part zone on the page (it doesn’t really matter where since this is more of a placeholder until you are done creating the web part completely). In the case of custom Content Query Web Parts, do all of the necessary customizations to the web parts, style sheets, CSS rule sets, etc.

3. Download the web part or web parts to your hard drive;

4. Upload the web part or web parts to the site’s Web Part Gallery;

5. Using SharePoint Designer, open your custom page layout
 
6. Go to the location of the page where you would like to insert the web part (it could be a row or cell in a table or a <div>); I usually work in split mode. You may want to use the Code or Design view; it’s up to you and whatever it is easier for you.

7. Select the Insert tab on the ribbon and then select Web Part within the Web Parts group;

8. SharePoint Designer will display a Web Part drop-down menu; locate the web part uploaded in step 4 above and insert it in your page;

9. Save, check in, and publish the page;

10. Go back to your site using Internet Explorer this time (not Designer) and create a page using the modified page layout. Or if you have already created a page using this particular page layout, open it. Make sure the web part is now displaying at the desired location on the page.

When displaying dates using Data View or Content Query Web Parts, you might need to format them to the local standards. In order to do that, you may need to use date format functions. But before you can use those, you may need to add a Microsoft schema that does not come by default on your XSL Style Sheet.

I always recommend creating copies of the original files from Microsoft. So I'm assuming that you have created a copy of the original XSL style sheet and you are going to be working on this copy.

Open your XSL Style Sheet. Before modifications, your style sheet should read as follows:

After modifications it should read as this:

<xsl:stylesheet 
     version="1.0" 
     exclude-result-prefixes="x d xsl msxsl cmswrt"
     xmlns:x="http://www.w3.org/2001/XMLSchema" 
     xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
     xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
     xmlns:msxsl="urn:schemas-microsoft-com:xslt"
     xmlns:dt="urn:schemas-microsoft-com:datatypes" 
     xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" >
     <xsl:param name="ItemsHaveStreams">

 

Then insert the format date function in the appropriate line of your style sheet. For example, for today's date:

If you would like to have the date in YYYYMMDD format, you can convert it using the FormatDateTime ddwrt function; for example:

Click here to view a full list of Locale IDs (LCID) that can be used as an aid in setting different formats based on locale.

We once had a situation where users would forget to check in files after checking them out from a document library. So someone came with the idea of creating an "annoying" pop-up to remind the users to check the files back in once they were done using them. This is the result of that idea.

1. Edit the page

2. Add a Content Editor Web Part

3. Edit the Contend Editor web part properties, remove the chrome, and make any other changes as desired, rename the web part to something more meaningful than 'Content Editor,' (for example, 'Pop Up'), and then [Apply] and [OK]

4. Select Click here to add new comment at the Content Editor Web Part

5. Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source

6. Type in or copy and paste the code below in the HTML Source web page dialog

    <script type='"text/javascript"'>
        <alert("Alert Message Here")
    </script>

7. Select [OK] and save the page (and publish if publishing is turned on for your site)

Note: Replace the Alert Message Here text with the appropriate message that you wish to  convey.