Heather Solomon’s CSS Chart now available for SharePoint 2010!

 

Heather Solomon’s CSS reference chart for SharePoint 2007 has always been a required bookmark for customizers. When Heather spoke at the Cincinnati SharePoint User Group meeting a while back she hinted that a new chart was in the works…. Heather has released a new CSS reference chart for SharePoint 2010!

 

SharePoint 2010 CSS Reference Chart:

  http://sharepointexperience.com/csschart/csschart.html

 

SharePoint 2007 CSS Reference Chart:

  http://www.heathersolomon.com/content/sp07cssreference.htm

 

.

SharePoint 2010: Changes to HTML with Service Pack 1

Hacking around SharePoint’s HTML, CSS and JavaScript is both fun and a powerful way to enhance SharePoint without deploying custom code to the web servers. I call it “hacking” as Microsoft never intended for us to know or care about what’s behind the browser. While it’s rare for a Service Pack to change the HTML delivered to the browser, SP1 did change the JavaScript library used for the Calendar.

Service Pack 1 broke my color coded calendar code. (http://techtrainingnotes.blogspot.com/2010/06/sharepoint-2010-color-coded-calendars.html). The fix is a simple edit, just change SP.UI.ApplicationPages.CalendarNotify.$4a to SP.UI.ApplicationPages.CalendarNotify.$4b.

 

I am still going through my SP 2010 customizations, but so far, the color coded calendar is only one that SP1 broke.

 

Do you know of other changes?

If you have found other SP 1 changes that might impact client side customizations, please post them as a comment below!

 

Do you have SP 1?

A quick test is now possible due to the change to the calendar JavaScript. Just navigate to a calendar view and enter the following in the browser’s address bar:

            javascript:alert(SP.UI.ApplicationPages.CalendarNotify.$4a)

If you get a popup showing “undefined”, then you have SP 1 (or later). If you see code, then you have a pre-SP1 installation.

 

 

 

.

SharePoint 2010: Replace the I Like It and the Tags and Notes icons

 

Don’t like the little smiley face icons in the 2010 ribbon?

   

Change it: (hopefully to something better looking)

   

 

Option 1:

If you have access to the web servers, you could edit the /Layouts/images/mossfgimg.png image:

(I rotated it 90 degrees to take up less space here.)

Editing the file on the server is a bad practice for a number of reasons.

Option 2:

Add a CSS style to your master page.

 

Steps:

1. Create two 32 pixel by 32 pixel replacement icons 
     Mine are a bit ugly….
               
    
2. Upload the icons to a SharePoint library (or if you have access to the web servers, to the layouts/images folder)
    
3. Add the new CSS below to your master page somewhere after where SharePoint loads its CSS:
   
   <SharePoint:CssLink runat="server" Version="4"/>
   <SharePoint:Theme runat="server"/>
   <style>
       your custom CSS goes here
   </style>
   

The CSS:

<style>

  #AddQuickTag_ctl00_ctl35 span span img
  {
    display:none;
  }

  #AddQuickTag_ctl00_ctl35 span:first-child 
  {
    background-image:url('/sites/yoursite/yourlibrary/img1.jpg')    
  }

  #TagsAndNotes_ctl00_ctl35 span span img
  {
    display:none;
  }

  #TagsAndNotes_ctl00_ctl35 span:first-child 
  {
    background-image:url('/sites/yoursite/yourlibrary/img2.jpg')    
  }

</style>

 

 

.

SharePoint: Changing the “Add New” Icon

 

I just got an interesting question on the “Change the “Add New” message for a web part” article about replacing the icon in the Add New Item area of a web part. As CSS does not let you change the attributes of an element (i.e. “src=”), the solution is a bit of a trick.

The before and the after for SharePoint 2007:

 

And in 2010:

   

The CSS below first hides the existing icon, and then adds a background image to the anchor (“A”) tag. As this results in the text being displayed over the icon, the CSS also needs to add a little padding to move the text over a bit.

The CSS for both 2007 and 2010

Add just before the </head> tag in the master page or in a content editor web part on a single page.

<style>

/*  hide the existing image  */
.ms-addnew img
{
  display:none;
}

/*  add a background image  */
.ms-addnew a
{
  background:url(_layouts/images/titlegraphic.gif) no-repeat;
  padding-left: 25pt;
}

</style>

 

 

.

SharePoint Saturday Columbus 2011!

 

Join me and thirty other speakers for a free day of SharePoint learning on Saturday August 20th, 2011.

 

Go and check out the list of speakers and register!  It’s FREE!

   http://www.sharepointsaturday.org/columbus/default.aspx

Stolen right from their web site:

Join SharePoint architects, developers, and other professionals that work with SharePoint 2007 and 2010 for SharePoint Saturday Columbus event.  SharePoint Saturday is an educational, informative & lively day filled with sessions from respected SharePoint professionals & MVPs, covering a wide variety of SharePoint-orientated topics.  SharePoint Saturday is FREE, open to the public and is your local chance to immerse yourself in SharePoint!

 

I will be speaking on a subject that I’ve always enjoyed (and what much of this blog is about), “SharePoint 2007 and 2010 Customization for Site Owners”.

This session will get you, the SharePoint Site Owner, started in customizing your SharePoint site. It is not a programming session, but does include some JavaScript coding. It is not a graphics design session, but does include some Cascading Style Sheets. It is not a SharePoint Designer session, but it will make use of it. And nothing requires access to the SharePoint servers.

While the session is for the SharePoint Site Owner, it's also for the developer who does not want to "reinvent the wheel". All you need to apply what you learn here are basic SharePoint skills, how to copy and paste and some puzzle solving skills.

And as I have just released a book on the same topic, I’ll be brining a few copies to give away! If you don’t want to wait until August, you can get it at Amazon (with free shipping) or until the end of July, directly from the publisher with a 25% discount (with this code: 77ULP6VH).

 

 

.

Book’s done!

 

I thought I’d write a little book. I had two weeks of vacation time… Take some of the better stuff from the blog, clean it up and polish it, and may be have 250 pages of content…

Now ten months later I have 400 pages of content and enough stuff for a second book. I can’t let go of this thing! I finally did one final pass of edits and uploaded it to the publisher!

So what did I end up with? This:

• 401 pages
• 304 screen captures
• 83,338 words (including sample code)
• 3879 lines of sample JavaScript, jQuery and CSS
• 504,721 characters
• a ridiculous number of hours
• At least (I have not counted yet) 75 customizations and tricks that will work in WSS, MOSS, SharePoint Foundation and SharePoint Server. And most should work in Office 365.

 

Book’s done!

The family is relieved… they have not seen me much at all lately. Work, study, teach and then go write - repeat.

Now I can:

• take some time off
• fly some model airplanes
• take a ride in a Tri-Motor Ford with my sons (did that today!) (may have to go back on Sunday and do it again)
• start another book……………

 

Book’s done!

If you like the articles in this blog, then you should really like the book. More tricks and tips. More details on each one. Both 2007 and 2010 versions for almost every example.

You can order it here today: https://www.createspace.com/3471790

Discount! And as you are a reader of my blog, for at least the next 10 days until the end of July you can go to the link above and get a 25% discount by using this code: 77ULP6VH

 

And on Amazon with free shipping! 

 

 

.

SharePoint 2007: Use CSS to Add Colors, Borders and Fonts to Web Parts

 

In October of last year I wrote an article on changing the color, borders and fonts for SharePoint 2007 web parts. That article used JavaScript to make these changes while this one will use CSS. The CSS in this article is similar to the CSS needed for 2010 (see here), with one annoying difference… SharePoint 2010 has a CSS class defined for all web parts, s4-wpcell, that represents the main web part area. SharePoint 2007 does not have a class defined for the entire web part table. Instead it has a unique ID for each web part. That is why in the sample CSS below you will see  #MSOZoneCell_WebPartWPQ1 to #MSOZoneCell_WebPartWPQsomenumber . In theory you could have up to fifty web parts on a page, so I guess this could go as high as fifty.

Do you want to change all web parts in all pages, all web parts in a single page or just one web part? Each of these will require a slightly different approach.

• All web parts in all pages?
    Add the CSS to the master page, either inline or linked to a file
• All web parts in a single page?
    Add the CSS to the page using SharePoint Designer or a Content Editor Web Part
    (If using a CEWP, add the web part below the web parts to change, i.e. last zone, last web part)
• Just one web part?
    Add the CSS as for a single page, but prefix all of the CSS entries with the ID of the web part to change

 

The CSS for web parts is quite complicated and may areas that can be changed.

 

A Web Part

Here is a terribly abused web part :-) that has an exaggerated set of colors and fonts to make each area stand out. The CSS for web parts is quite complicated and there are may areas that can be changed. The CSS below will create the example shown here. In your work you would add CSS for only the parts you want to change.

 

 

The CSS

As you play with the web part CSS, try one edit at a time. The order you define the CSS can impact the final result. The use of “!important” after the CSS can override existing inline styles.

Notes:

• You don’t need to use all of the CSS. Pick and choose as needed.
• Any area can be hidden by using:   display:none
• This is not a complete list of what you can change in a web part. Search the HTML source of your web part page for ideas, or do a web search to see what others are doing.
• “#MSOZoneCell_WebPartWPQ5” is the ID of a single web part to change. This is only needed when changing a single web part on a single page. Your web part will have a similar ID, but with a different number.
• The number in the web part ID may change if the web part is moved on the page.
• Anywhere there is a background property you can usually set a background image by using:
     background-image:url(' someimagepath ');
• Colors can be set using color names (“green”) and color numbers (“#00FF00”)

 

CSS to change all of the web parts on a page

To change all pages, add this CSS to your master page. To change a single page, add this CSS to a Content Editor Web Part or edit the page with SharePoint Designer and add the CSS just before the end tag for the PlaceHolderMain <asp:Content> tag. If using a Content Editor Web Part, it should be placed as the last web part on the page. This would usually be the last web part in the last column of the bottom most web part zone.

<style type="text/css">

/* CSS for web parts */


/* === Title bar CSS === */

/* TR - title bar for web part */
.ms-WPHeader 
{
  background-color:green;
}

/*  H3 - Text in title bar of web part */
.ms-WPTitle, .ms-WPTitle a    
{
  color:white !important;
  font-family:"Comic Sans MS";
  font-size:24pt;
}



/* === Web part background CSS === */

/* TD - paging area (i.e. 1 - 5) */
.ms-bottompaging td
{
  background-color:yellow !important;
}    

/* hide or change the gray line above "add new" link */    
.ms-partline
{
  /* display:none; */
  background-color:red;
}

/* "add new" area */
.ms-addnew
{
  background-color:gray !important;
}

/* There could be up to 50 web parts on a page */
/* Use your browser's View Source feature to check your zone names */
#MSOZoneCell_WebPartWPQ1,
#MSOZoneCell_WebPartWPQ2,
#MSOZoneCell_WebPartWPQ3,
#MSOZoneCell_WebPartWPQ4,
#MSOZoneCell_WebPartWPQ5,
#MSOZoneCell_WebPartWPQ6,
#MSOZoneCell_WebPartWPQ7,
#MSOZoneCell_WebPartWPQ8,
#MSOZoneCell_WebPartWPQ9,
#MSOZoneCell_WebPartWPQ10,
#MSOZoneCell_WebPartWPQ11,
#MSOZoneCell_WebPartWPQ12,
#MSOZoneCell_WebPartWPQ13,
#MSOZoneCell_WebPartWPQ14,
#MSOZoneCell_WebPartWPQ15,
#MSOZoneCell_WebPartWPQ16,
#MSOZoneCell_WebPartWPQ17,
#MSOZoneCell_WebPartWPQ18,
#MSOZoneCell_WebPartWPQ19,
#MSOZoneCell_WebPartWPQ20
{
  background-color:lightgreen;
}



/* === Column headings === */

/* color for sortable column headings */
/* there are many "diid" IDs, and this list is not complete */
.ms-vh2 .ms-vb, .ms-vh2 .ms-vb a,
#diidSortEditor, #diidSortAuthor, 
#diidSortCheckoutUser, #diidSortAssignedTo,
#diidSortTaskGroup, #diidSortLinkFilenameNoMenu, #diidSortCustomUrl,
th.ms-vh2-nograd
{
  color:red !important;
  font-size:12pt;
}




/* === List text CSS === */

/* TD - item description text (for odd numbered rows) */
.ms-vb, 
.ms-vb2, 
.ms-vb a, 
.ms-vb2 a
{
  color:white !important;
  font-size:12pt;
}

/*  TR - background alternating (for even numbered rows) */
 .ms-alternating  
{
  background-color:navy;
}

/*  TD - text for alternating (for even numbered rows) */
.ms-alternating .ms-vb, 
.ms-alternating .ms-vb2, 
.ms-alternating .ms-vb a, 
.ms-alternating .ms-vb2 a
{
  color:red !important;
}

/* border (if enabled in the web part's properties */
.ms-WPBorder
{
  border-color:red;
  border-width:thick;
  border-style:dashed;
}



/* background and text for list web parts without column headings */
/* links list, calendar list... */
/* web parts with no items "There are currently no..." */
.ms-summarycustombody td,
.ms-summarycustombody td a
{
  background-color:yellow !important;
  color:red !important;
}


</style>

 

 

CSS to change a single web part

To select a single web part we will use the same CSS as above, but prefix each item with the ID of the web part. To find this ID, use your browser’s View Source feature and search for the name of your web part. Somewhere above this you will find a #MSOZoneCell_WebPartWPQsomenumber that represents your web part.

Here’s what you might find if looking for the “Airshow Pictures” web part:

 

CSS for web part #MSOZoneCell_WebPartWPQ17:

<style type="text/css">

/* CSS for web parts */


/* === Title bar CSS === */

/* TR - title bar for web part */
#MSOZoneCell_WebPartWPQ17 .ms-WPHeader 
{
  background-color:green;
}

/*  H3 - Text in title bar of web part */
#MSOZoneCell_WebPartWPQ17 .ms-WPTitle, #MSOZoneCell_WebPartWPQ17 .ms-WPTitle a    
{
  color:white !important;
  font-family:"Comic Sans MS";
  font-size:24pt;
}



/* === Web part background CSS === */

/* TD - paging area (i.e. 1 - 5) */
#MSOZoneCell_WebPartWPQ17 .ms-bottompaging td
{
  background-color:yellow !important;
}    

/* hide or change the gray line above "add new" link */    
#MSOZoneCell_WebPartWPQ17 .ms-partline
{
  /* display:none; */
  background-color:red;
}

/* "add new" area */
#MSOZoneCell_WebPartWPQ17 .ms-addnew
{
  background-color:gray !important;
}

/* There could be up to 50 web parts on a page */
/* Use your browser's View Source feature to check your zone names */
#MSOZoneCell_WebPartWPQ17
{
  background-color:lightgreen;
}



/* === Column headings === */

/* color for sortable column headings */
/* there are many "diid" IDs, and this list is not complete */
#MSOZoneCell_WebPartWPQ17 .ms-vh2 .ms-vb, #MSOZoneCell_WebPartWPQ17 .ms-vh2 .ms-vb a,
#MSOZoneCell_WebPartWPQ17 #diidSortEditor, #MSOZoneCell_WebPartWPQ17 #diidSortAuthor, 
#MSOZoneCell_WebPartWPQ17 #diidSortCheckoutUser, #MSOZoneCell_WebPartWPQ17 #diidSortAssignedTo,
#MSOZoneCell_WebPartWPQ17 #diidSortTaskGroup, #MSOZoneCell_WebPartWPQ17 #diidSortLinkFilenameNoMenu, 
#MSOZoneCell_WebPartWPQ17 #diidSortCustomUrl,
#MSOZoneCell_WebPartWPQ17 th.ms-vh2-nograd
{
  color:red !important;
  font-size:12pt;
}




/* === List text CSS === */

/* TD - item description text (for odd numbered rows) */
#MSOZoneCell_WebPartWPQ17 .ms-vb, 
#MSOZoneCell_WebPartWPQ17 .ms-vb2, 
#MSOZoneCell_WebPartWPQ17 .ms-vb a, 
#MSOZoneCell_WebPartWPQ17 .ms-vb2 a
{
  color:white !important;
  font-size:12pt;
}

/*  TR - background alternating (for even numbered rows) */
#MSOZoneCell_WebPartWPQ17 .ms-alternating  
{
  background-color:navy;
}

/*  TD - text for alternating (for even numbered rows) */
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb, 
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb2, 
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb a, 
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb2 a
{
  color:red !important;
}

/* border (if enabled in the web part's properties */
#MSOZoneCell_WebPartWPQ17 .ms-WPBorder
{
  border-color:red;
  border-width:thick;
  border-style:dashed;
}



/* background and text for list web parts without column headings */
/* links list, calendar list... */
/* web parts with no items "There are currently no..." */
#MSOZoneCell_WebPartWPQ17 .ms-summarycustombody td,
#MSOZoneCell_WebPartWPQ17 .ms-summarycustombody td a
{
  background-color:yellow !important;
  color:red !important;
}


</style>

 

In closing…

There’s always more you can change! Use your browser’s “View Source” feature to explorer the HTML and CSS delivered by SharePoint to see what else you can do. You can also use the add in developer tool bars for Internet Explorer and FireFox to explore the CSS. Some of the cool CSS things you may want to do will probably not work in all browsers, especially Internet Explorer 6, so test, test test.

Also take a look at the CSS reference and branding blogs on the web like these:

http://www.heathersolomon.com/content/sp07cssreference.htm

http://weblogs.asp.net/bsimser/archive/2007/04/01/css-reference-chart-for-sharepoint-2007-pdf-version.aspx

 

.

SharePoint 2010: Add Colors, Borders and Fonts to Web Parts

In October of last year I wrote an article on changing the color, borders and fonts for SharePoint 2007 web parts. Here (finally) I will do the same for SharePoint 2010 web parts. The previous article used JavaScript to make these changes while this one will use CSS.

A 2007 version of this article is here.

Do you want to change all web parts in all pages, all web parts in a single page or just one web part? Each of these will require a slightly different approach.

• All web parts in all pages?
    Add the CSS to the master page, either inline or linked to a file
• All web parts in a single page?
    Add the CSS to the page using SharePoint Designer or a Content Editor Web Part
    (If using a CEWP, add the web part below the web parts to change, i.e. last zone, last web part)
• Just one web part?
    Add the CSS as for a single page, but prefix all of the CSS entries with the ID of the web part to change

The example CSS below is for a single web part example. It will only impact a web part with an ID of “#MSOZoneCell_WebPartWPQ5”. To find this ID, visit the web part page, use the browser’s “View Source” option and search for your web part’s name (“Shared Documents”) and browse up to find the ID, or search for “#MSOZoneCell_WebPartWPQ” and browse down to find your web part’s name. Be aware that this ID may change if you rearrange the web parts on the page!

To use the sample CSS below for all web parts, remove all of the “#MSOZoneCell_WebPartWPQ5” references.

 

A Web Part

Here is a terribly abused web part :-) that has an exaggerated set of colors and fonts to make each area stand out.

 

The CSS

Notes:

• You don’t need to use all of the CSS. Pick and choose as needed.
• This is not a complete list of what you can change in a web part. Search the HTML source of your web part page for ideas, or do a web search to see what others are doing.
• “#MSOZoneCell_WebPartWPQ5” is the ID of a single web part to change. This is only need when changing a single web part on a single page. Your web part will have a similar ID, but with a different number.
• The number in the web part ID may change if the web part is moved on the page.
• “#MSOZoneCell_WebPartWPQ5.ms…”  vs “#MSOZoneCell_WebPartWPQ5<space>.ms…”
  The space is used to indicate a parent-child relationship. With the space, CSS looks for an element with an ID of “#MSOZoneCell_WebPartWPQ5” and then looks for a child element with a class name of “ms…”. Without the space, CSS looks for single element that has both the ID and the class name.
• Anywhere there is a background property you can also set a background image by using:
     background-image:url(' someimagepath ');
• Colors can be set using color names (“green”) and color numbers (“#00FF00”)
• The .ms-wpTdSpace class name is used to identify the corners or ends of the web part’s title area. If you don’t define anything for these they stay hidden. See the links at the end of this article for ideas for taking advantage of these corner areas. (How about rounded tab-like corners!)

 

<style type="text/css">

/* === Title bar CSS === */

/* TR - title bar for web part */
#MSOZoneCell_WebPartWPQ5 .ms-WPHeader 
{
  background-color:green;
}

/*  H3 - Text in title bar of web part */
#MSOZoneCell_WebPartWPQ5 .ms-WPTitle a    
{
  color:white;
  font-family:"Comic Sans MS";
  font-size:24pt;
}

/* TD - far left and far right (corner) cells of title bar - useful for round corner tricks */
#MSOZoneCell_WebPartWPQ5 .ms-wpTdSpace
{
  /* background-image:url(' someimagepath '); */
  width:30px !important;
  background-color:red;
}

/* web part check box */
#MSOZoneCell_WebPartWPQ5 .ms-WPHeaderCbxHidden  
{
  display:none;    
}


/* === Web part background CSS === */

/*  TD - background for all but title bar of web part */
#MSOZoneCell_WebPartWPQ5.s4-wpcell  
{
  background-color:lightgreen;
  /* border-style:dashed; */
  border-style:dashed;
  border-width:5px;
}

/* TD - paging area (i.e. 1 - 5) */
#MSOZoneCell_WebPartWPQ5 .ms-bottompaging td
{
    background-color:yellow !important;
}    

/* hide the gray line above "add new" link */    
#MSOZoneCell_WebPartWPQ5 .ms-partline
{
  display:none;
}

/* selected (clicked) web part background */    
#MSOZoneCell_WebPartWPQ5.s4-wpActive
{
  background-color:fuchsia;
  border-color:red;
    /* border-style:dotted; */
}    


/* === Column headings === */

/* color for sortable column headings */
#MSOZoneCell_WebPartWPQ5 .ms-vh-div a 
{
  color:red !important;
}
/* color for non-sortable column headings */
#MSOZoneCell_WebPartWPQ5 .ms-vh-div 
{
  color:red !important;
}


/* === List text CSS === */

/* item description text */
#MSOZoneCell_WebPartWPQ5 .ms-vb2, 
#MSOZoneCell_WebPartWPQ5 .ms-vb-user a, 
#MSOZoneCell_WebPartWPQ5 .ms-vb-title a
{
  color:yellow !important;
  font-size:12pt;
}

/*  TR - alternating (#2,#4,#6...) row of web part */
#MSOZoneCell_WebPartWPQ5 .ms-alternating  
{
  background-color:navy;
}

</style>

 

 

Want rounded corners on your web parts?

See this article from Kyle Schaeffer: http://www.endusersharepoint.com/2010/11/29/web-part-style-in-sharepoint-2010/ and this article from Becky Bertram: http://blog.beckybertram.com/Lists/Posts/Post.aspx?ID=123

 

.

Book Review: SharePoint Branding in Practice

 

SharePoint Branding in Practice

by Yaroslav Pentsarskyy

 

SharePoint "branders" range from graphics designers who see everything as "art" to developers who see everything as code. This book covers the area towards the developer side. This book frequently uses Visual Studio and C# code and expects basic HTML, CSS, C#, XML, SharePoint Designer and Visual Studio skills. Many of the examples need server side deployment, so this is not a book for Site Owners or someone limited to using SharePoint Designer for their customizations.

Many branding books and articles focus on SharePoint's publishing features, and therefore target SharePoint Server and not SharePoint Foundation. This book covers both SharePoint Foundation and SharePoint Server and includes how to brand basic Team Sites. The book has separate chapters on branding non-publishing sites, publishing sites, My Content sites, search sites and pages. There are also good getting started chapters on accessing both external and SharePoint web services and on customizing the ribbon.

A nice aspect of the book is that is starts with the basics, and moves on to the advanced. As an example, the author starts out with creating SharePoint Themes using PowerPoint (Microsoft's documented approach for site owners) and then moves on to creating custom themes using Visual Studio and features.

Source downloads are available from the author's web site.

While the content, examples and the flow of topics are well done, the book is missing an index and needs a good proof reading. That said, the book is quite good and is useful addition to both a brander's and a developer's SharePoint library.

 

 

.

If you missed SharePoint Cincy 2011…

 

SharePoint Cincy 2011

If you missed SharePoint Cincy 2011 then you missed out on a full day of everything SharePoint! Two fantastic keynote presentations from Microsoft and Kroger, twenty breakout sessions with speakers from all over the country and a fantastic group of sponsors. I have not forgotten the most important group… the attendees! There was networking and social collaboration going on in every room and around every table.

SharePoint Cincy 2012 – March 16th 2012

Add March 16th, 2012 to your calendar.  Towards the end of the day I was frequently asked “when is this going to be done again?”  During the 5:00 update the SharePoint Cincy team announced that due to the success of this first event that they are going to do it again. So, see you in March 2012.

 

Thanks to the speakers

(Notice how many of these are local talent. The Cincinnati area has a strong base of SharePoint expertise!)

Fred J. Studerstuder, Microsoft Corporation
Catherine AllshouseCatherine, The Kroger Company
Tim Beamer, Dell
Scott Brickey, Strategic Data Systems
Mike Buob, Sogeti, USA
Steve Caravajal, Ph.D., Microsoft Corporation
Bill Crider, Ascendum
Mario Fulan, Information Control Corp (ICC)
Rob Joy, K2
Pat Kern, Procter & Gamble, Global Shared Services
Rob Kerr, BlueGranite
Sean McDonough, Idera
Jonathan Mast, SharePoint 911
Matt Morse, PointBridge
Raveen Rajavarma, Ascendum
Mike Smith, MAX Technical Training
Matthew Tallman, Sogeti, USA
Tom Washek, Microsoft
Eric Weissmann, DSC Consulting
Shane Young, SharePoint 911

Thanks to the sponsors and exhibitors

Without these people the event could not happen…

Ascendum
AvePoint
BrainStorm Inc.
CBTS
Center for Applied Informatics @ NKU
Dell
Information Control Corporation
K2
MAX Technical Training
Microsoft
PCMS IT Advisor Group
SDS - Strategic Data Systems
Sogeti
The Circuit

The Cincinnati SharePoint User Group
The Dayton SharePoint User Group

 

.

SharePoint Cincy – Last Chance to Sign Up!

Only one day left! You’ve got to be registered to attend.

SharePoint Cincy – March 18th, 2011

 

Northern Kentucky University’s Center for Applied Informatics and MAX Technical Training are bringing a major SharePoint event to the Cincinnati area! SharePoint Cincy will be held at the METS Center located in Erlanger, KY. The METS center is near the Cincinnati airport (CVG) and has lots of free parking.

See the site for the agenda, speakers and registration: http://www.sharepointcincy.com

 

Lots of great speakers will be there! (And I will be speaking there too :-) )

 

 

.

SharePoint: Prevent the Closing of web parts

 

The following works in both SharePoint 2007 and 2010.

 

If you have worked with SharePoint for a while you probably have learned that in most cases Closing a web part is “bad” and Deleting a web part is “good”.  (Do a web search on “SharePoint web part close vs delete”.)

 

So how can you prevent the closing of a web part?

How about five ways…

 

1) Every time you add a web part go to the Advanced section of the properties panel and uncheckmark “Allow Close”  (too much work)

 

2) Add a little JavaScript to prevent the Close:

 

3) Add a little JavaScript to disable the Close Option

 

4) Add a little JavaScript to hide the Close Option (probably the best choice)

 

5) Add a CSS style to hide the Close option (easy to do, but it leaves a blank line)

 

 

I prefer #4!

 

 

The JavaScript to prevent the close and display a popup:

Add the following to your site’s master page just before the </BODY> tag (A SharePoint Designer task!) or in a Content Editor Web Part (last one on the page) if you just want this for a single page.

<script>
  // JavaScript to block the closing of web parts
  // TechTrainingNotes.blogspot.com

  var oldClose = MSOLayout_RemoveWebPart;
  MSOLayout_RemoveWebPart = function (x)
  {
    alert("Closing of web parts has been disabled");
  }
</script>

 

 

The JavaScript to Disable or Hide the Close option:

Add the following to your site’s master page just before the </BODY> tag (A SharePoint Designer task!) or in a Content Editor Web Part (last one on the page) if you just want this for a single page.

<script>
// hide or disable the web part Close option
// TechTrainingNotes.blogspot.com

_spBodyOnLoadFunctionNames.push('hideWebPartClose');

function hideWebPartClose()
{
  var x = document.getElementById("MSOMenu_Close")

  // uncomment the next line to just disable (gray out)
  // x.disabled=true

  // uncomment the next line to hide the close option
  x.hidden=true

}
</script>

 

The CSS to hide the Close option:

Add this to your master page, your linked style sheet file or to a Content Editor Web Part.

<style>
  #MSOMenu_Close
  {
    display:none
  }
</style>

 

.

Book Update

 

Update! The book’s done! 

See here for the update and here for more about the book.

 

 

I made a big mistake during my presentation at the Columbus SharePoint Saturday… I mentioned that I was working on a book and that it would soon be available.  What was that about “the best-laid plans of mice and men?” As an instructor I get to teach up to forty hours a week, and each classroom hour requires three to eight hours of prep time. Over the last few months I’ve had a heavy class load and little free time for the book. (I keep letting work get in the way of hobbies and book writing!)

Several people have been pestering me about “is it out yet?” So let me tell a little about the book and maybe why it’s taking longer than expected.

 

SharePoint® 2007 and 2010 Customization for the Site Owner

by Michael T. Smith

 

There are a lot of books for SharePoint administrators and SharePoint developers, and even a few for SharePoint end users. But there is not much available for the site owner, especially on quick and easy site customization. Over the last five years I have probably trained at nearly a thousand site owners and written a lot blog articles with tips and tricks for site owners. Most of the blog articles were from site owner questions during or after class that really made me think about how to solve the problem without writing custom code. Most of these articles have been fairly short and to the point: add this web part, copy and paste this JavaScript or CSS. Each time I have written one of these blog articles I have wished I had the time to expand the article to explain more about the how and why of the solution, or to explain the logic of how I figured out how to do it so you could create more customizations like the one in the article. So I started writing the book…

The book has these goals: take what I’ve done in the blog articles as a start and then greatly expand the number of tips and tricks, explain how the tricks work, show how they can be expanded to other uses, and provide a few chapters on basic SharePoint, HTML, CSS and JavaScript skills. The first edition of the book fully supports both SharePoint 2007 and 2010 . If you have not upgraded to 2010 yet, you will one day and will want to know how to make sure these tricks still work.

 

About the other 80%

Writing a book fits the 80 / 20 rule. The first 80% of the work takes 80% of the time, and the remaining work also takes 80% of the time.  :-(   My biggest challenge in this project is knowing when to stop. It seems I can always find just one more way to do something, one more trick or one more screen capture. Where possible I’m rewriting each tip to work in SharePoint 2007 and SharePoint 2010, and as often as possible using the same code for both. I’m also adding jQuery versions of some of the examples for those who are already working with jQuery. I’m testing every trick in Internet Explorer 6 to 8 and FireFox and rewriting the JavaScript to work with all of these browsers. (really fun, let me tell ya…)

 

Book Progress

Most of the chapters are finished and are now being proof read by some nasty critics. The cover art still needs to be done. The index needs to be created. When all of that is done, the book needs to be submitted and a test copy printed to see if everything “works”, things like margins, images, cover art, etc.

 

How it will be published

I don’t see this book ever being finished. There’s just too many things I’m learning about SharePoint everyday. Books published though the traditional channels rarely get updated and I want to update the book as needed. So I am going the “self published” route using a service owned by Amazon.com. It will be first released in print format and I hope to move the book into Kindle and other electronic formats as I get time.

 

A supporting web site

The book will have a version number!  (Should I start with a beta release?)  For that and a number of other reasons the book will also have a supporting web site. There you will find all of the source code, a number of the tricks as downloadable web parts along with any new additions. So don’t get upset if you see a version 1.1 of the book after you bought 1.0. The changes will be on the site.

 

Here’s the current, but still incomplete, table of contents:

(This will change over the next few weeks…)

 

+ Chapter 1 - Read Me First

About this book…
The Three C's of SharePoint Customization
What can a site owner customize?
What's not in this book?
Site Administrator vs. Site Owner (Full Control)
Site Branding
Can I Damage My SharePoint Site?
Tools and Skills Needed
Sample Files and Resources
SharePoint Versions
What won't work?
Useless Trivia

+ Chapter 2 - An HTML Primer

Do you need this chapter?
HTML in SharePoint
Basic HTML – HyperText Markup Language
What is DHTML?
Useless Trivia!

+ Chapter 3 - A CSS Primer

Do you need this chapter?
What is CSS?
In the beginning…
CSS Syntax
CSS Selectors
Style Classes
One style per ID
Comments
Positioning
Controlling visibility
Inline Styles
Overriding inline styles
Adding CSS to SharePoint
Using a Different Style when Printing
Style Resources
Useless Trivia!

+ Chapter 4 - A JavaScript Primer

Do you need this chapter?
JavaScript
Where can you use JavaScript in SharePoint?
Important Tips for JavaScript in SharePoint
When will my scripts run?
JavaScript Basics
Key parts of a script
Variables
Functions
Finding HTML Elements
Accessing the URL's Query String
jQuery
What's next?
Useless Trivia!

+ Chapter 5 - Hacking Tips!

HTML Detective Tools
How to Find a Web Part in Code

+ Chapter 6 - SharePoint Designer

pending

+ Chapter 7 - Customizing SharePoint Pages

pending

+ Chapter 8 - Web Part Must Knows

Do you need this chapter?
Does this page have web parts?
My page won't load… how do I delete a "bad" web part?
Exporting, Importing and Reusing Web Parts
Using "Static" web parts
SharePoint 2010, the Content Editor Web Part, and Broken Views…

+ Chapter 9 - The Content Editor Web Part

What about the Form Web Part and the Page Viewer Web Part?
The CEWP in SharePoint 2007
The CEWP in SharePoint 2010
Reusing a Content Editor Web Part Customization
Best Practices

+ Chapter 10 - User Interface Customization

Some of the customizations in this chapter:
Add a message at the top or bottom of the page
Site Title and Icon (2007) - Change the Font Size, Face or Hide It
Site Title and Icon (2010) - Change the Font Size, Face or Hide It
A Redesign of the SharePoint 2010 Site Title and Crumb Trail
Add / Hide Menu Options (2007)
Add / Hide Menu Options (2010)
Quick Launch and Top Link Bar Tricks - Add Message Pop-ups (2007 and 2010)
Quick Launch and Top Link Bar Tricks - Confirm Site Exit (2007 and 2010)
Quick Launch - hide/show
Add Quick Launch back to basic pages and web part pages
Cleaning up the Basic Page
How to hide the right web part column (2007)
Setting the Web Part Zones to 50% and 50%
Modify / Add / remove web part zones
Change or Hide the Bullet Image in Quick Launch (2007)
Customizing the Tree View
Add Dropdown Menus to the Top Link Bar (2007)
Add Dropdown Menus to the Top Link Bar (2010)
Search
Sample Files and Resources

+ Chapter 11 - List and Library Customization

Before you get started!
What's not in this chapter?
What's in this chapter?
General
Customizing the "New" button
Group By on more than 2 columns in a view
Color coded lists
Removing Group Headings from a View’s Group By
Adding a bar chart to a list
Web Part Customizations
Create a "What's New" web part for a library or list
Add a Web part for a document library folder
Hide a web part with zero rows
Change the "No Items" message in a discussion web part
Change the "Add New" message for a web part
Libraries
Adding hyperlinks to document libraries
How do to add a column (meta data) to SharePoint folders
Hiding Upload Multiple and Explorer View
Hiding the Checked Out Icon from Anonymous Users
One library, multiple sites!
Synchronize Document Library Web Part Column Widths
Prevent Accidental Overwrites when Uploading to a Library
Picture Libraries
Rotating Pictures, Random Pictures
The List, the Whole List, Nothing but the List
Sample Files and Resources

+ Chapter 12 - Surveys

Survey Pages
Survey Tips
You can create custom views! (2007 only)
A better Yes/No field for surveys and lists
Adding a Welcome or Instructions Message to the Overview page
Adding a Welcome, Thank You or Instructions Message to a Survey
Adding Color, Fonts and HTML to Surveys
Add Instructions and Color!
Adding Color, Fonts and HTML to Rating Sub Questions
Hide the "Save" button
Hide Bars Where Not Needed!
Modifying the “Respond to this Survey” Prompt
Reuse Your Custom Surveys
Sample Files and Resources

+ Chapter 13 - Links Lists

Adding Pop-ups to Link lists (open in new window)
Add a "You are leaving this site" message to a links list
Add a "You are leaving this site" message to a links list with confirmation!
Convert a Links list to a Dropdown list
Convert a Links list to a Dropdown list and open in a different web part
Sample Files and Resources

+ Chapter 14 - Task Lists

Color Coding Task Lists
Project Tasks / Gantt Chart (2007 only)
Prevent editing of completed tasks
Prevent the rescheduling of a task by dragging of the Gantt chart bar
Locking a Completed Task
Past Due / Late Tasks in a Task List
Sample Files and Resources

+ Chapter 15 - Calendars

Color coded calendars
Strike Out Canceled Events in the Calendar
Using the Calendar to Schedule Meeting Rooms (multiple fields in a month view)
Sample Files and Resources

+ Chapter 16 - Security Tricks

Identify the current logged in user
How to Hide View All Site Content
Prevent users from adding "NT AUTHORITY\authenticated users" and other selected accounts to sites and groups
Customizing the People and Groups Views
Sample Files and Resources

+ Chapter 17 - Sound, Video, Silverlight and Flash!

The SharePoint 2010 Silverlight Web Part
Using the Content Editor Web Part for Sound
Using the Content Editor Web Part for Silverlight
Using the Page Viewer Web Part
Using the Content Editor Web Part for Flash
Sample Files and Resources

 

 

Be patient!  I working as fast as I can.    :-)

SharePoint 2010: Site Title and Icon - Change the Font Size, Face or Hide It

 

Customizing the site title is a bit harder in 2010 than in 2007 as the site title is part of a larger navigation area that includes the title, a "crumb trail" and the View menu. In this article we will look at using CSS to change the font, color or size of the text. Also see here to change how the whole navigation and crumb trail area works.

 

Here's the home page of a site. "Demo Site" is the name of the site.

 

 

The following shows the title, crumb trail and view menu for a library. "Demo Site" is the title, "Shared Documents" is a library and "All Documents" is both the current view and the view dropdown menu button.

 

 

Here's a similar site with the view menu clicked:

 

 

So as you can see, there a lot of pieces to change to customize the title area in 2010. Now lets take a look at what is required to make the changes for a sample like this one by just using CSS:

 

 

You would most likely want to make this kind of change for an entire site rather than a single page by using a master page edit. If you want to make these changes for a single page just add a text file with the CSS to a library, add a Content Editor Web Part and then link to the text file.  You could also just edit this page in SharePoint Designer and add the CSS to the page.

 

To make your changes available for all pages in your site, add them to the site's master page.

 

Steps:

1. Open your site in SharePoint Designer 2010 (see Chapter 6)
2. In the "Navigation - Site Objects" pane click Master Pages
3. Right-click your site's master page (typically v4.master) and select "Edit in Advanced Mode"
4. Search for "</head>" and insert your style block before the </head> tag

           

 

Here are some of the CSS tags to experiment with:

Changing fonts and colors using CSS

Each part of the page can be hidden or changed by using a CSS style. Here are the styles and the parts:

.s4-titlelogo
#s4-titlerow	The entire title row including "I Like It" and "Tags & Notes"
.s4-titletext h1 a	The site title text
.ms-WikiPageNameEditor-Display	Title of any wiki-style page (home page of a Team Site or a page added with "Site Actions, New page"
.s4-titletext h2 a	List/Library name
.s4-titletext h2	Folder name
#zz17_ListTitleViewSelectorMenu_t	Current view and view selector
#onetidPageTitleSeparator	The triangles between the items ""

Note: "." indicates a class while "#" indicates an ID

 

To hide everything after the title:

<style>

.s4-titletext h2 <!-- everything after the site title -->
{
display:none;
}

#onetidPageTitleSeparator <!-- The triangles between the items -->
{
display:none
}

</style>

 

Here's a set of sample styles to change the Site Title, the List Name and the View Selector:

<style>

.s4-titletext h1 a <!-- The site title text -->
{
color:Blue;
font-size:24pt;
}

.s4-titletext h2 a <!-- list / library name -->
{
color:red;
font-size:18pt;
}

#zz17_ListTitleViewSelectorMenu_t <!-- current view and menu -->
{
color:green;
font-size:12pt;
}

</style>

And here's the page using the above styles:

 

.

Interesting SharePoint Controls

Recently while reviewing a SharePoint 2010 developer class it occurred to me that the class made no mention of any of the SharePoint controls. So as I get the time I’ll write a description and find a sample or two of use for the more interesting controls. I’ll use this page as a “table of contents” for these articles.

 

These controls are all part of the Microsoft.SharePoint.WebControls namespace.

    http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.aspx 

 

Here’s the first two:

• <SharePoint:WarnOnUnsupportedBrowsers>   (2010 only)
• <Sharepoint:SPSecurityTrimmedControl>  (an older article, but for both 2007 & 2010)
• more to come…

 

.

SharePoint 2010: Replacing the Crumb Trail and Changing the Title

 

I like SharePoint 2010, I really do… but I just can’t get the hang of the Site Title / Crumb Trail thing, and the Navigate Up button is just not right. Below is a series of screens to show how the 2010 navigation works, and the issues I have with the interface. There’s no point in just complaining, so I also have one possible “fix” at the end of this article.

Please leave some comments:

• Am I not understanding how the crumb trail should work?
• Do you have a better solution?

I know that I’m not done with this… so check back…  (See here for more about the CSS to change the site title area.)

 

 

My Issues with the Site Title / Crumb Trail

 

The Home Page of the site

Issues:

• The Site Title is small and not resizable. We had that issue in 2007 also, but we could fix it will a simple CSS addition. Here the title is part of the crumb trail.
  
• Can you even tell if this site is a subsite of another site? (other than I named it #2)  You can click the Navigate Up button to find out:
  
  
• The “Home” text is almost ok, but I can’t edit this. (easily anyway)

 

In a document library:

 

Issues:

• No room for long titles, especially with lists with long names
  
  
• The View dropdown menu is now in the crumb trail! Any redesign/branding we do may lose the view menu!
  
  
• When you dig into the CSS for this area, there is no clean way to set a new font, color or size. I’ll show how in another article (here), but it’s not as easy as it was in 2007.

 

In the library’s Security Documents folder:

 

Issues:

• If I was happy with the issues already listed, then this screen is OK, but drill down another folder…

 

In a sub folder of Security Documents:

 

Issues:

• When you get down to a sub-folder the crumb trail fails. There is no one-click way up to the parent folder. Your only option is to use Navigate Up (two clicks), or go to the top of the library and drill back down.
   
  The Navigate Up dropdown:
  

 

 

A Possible Solution

 

Below is the result I want… a big title, and a working crumb trail with all of the folders.

 

Home page:

 

In a library with nested folders:

 

How to get there?

• Hide the existing crumb trail, but leave the Site Title
• Restyle the Site Title (color, font, size, etc)
• Add the SharePoint 2007 crumb trail control
• Copy the part of the hidden crumb trail’s HTML that displays the View dropdown to just after the 2007 crumb trail
• Restyle the View dropdown to match the 2007 crumb trail

Steps:

1. Open SharePoint Designer 2010, open your site and open the v4.master master page for editing
    
2. Hide the existing crumb trial:
   1. Search for “PlaceHolderPageTitleInTitleArea” and add a DIV block around the two lines before and one line after this text: 
      
      
      This will hide the existing crumb trail, but also hides the View dropdown which we will need later.
       
   2. Restyle the Site Title
      At the end of the page, just before the </BODY> tag add a <STYLE> block something like this: (new code in bold)
       

      <style type="text/css">
        .s4-titletext h1 a
        {
          color:Blue;
          font-size:24pt;
        }
      </style>

      </body>

   3. Add the SharePoint 2007 crumb trail control and a DIV for the View dropdown – I put it just before “PlaceHolderMain” to be near where it was in 2007:  (new code in bold)
       
      <a name="mainContent"></a>
       
        <div>
           <br/>               
           &nbsp;<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap2" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>&nbsp;
          <span id="myViewDiv"></span>
           <br/>
      </div>
       

      <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
      </asp:ContentPlaceHolder>
       

   4. We hid the old crumb trail, but we need the HTML that displays the View dropdown menu. The code here moves that HTML to our crumb trail:
       

      <script type="text/javascript">
        var OldCrumbTrail = document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_ctl01_ctl00");
        var NewCrumbTrail = document.getElementById("myViewDiv");
        OldCrumbTrail.childNodes[0].innerHTML=">";
        NewCrumbTrail.outerHTML = OldCrumbTrail.outerHTML;
        OldCrumbTrail.innerHTML = "";
        OldCrumbTrail.id="NOT_ctl00_PlaceHolderPageTitleInTitleArea_ctl01_ctl00";
      </script>

   5. Restyle the View dropdown to match the 2007 crumb trail – just add the following to the style block we created before:
       
      <style type="text/css">
        .s4-titletext h1 a
        {
          color:Blue;
          font-size:24pt;
        } 

        #zz17_ListTitleViewSelectorMenu
        {
            font-size:8pt;
        }
      </style>
       

 

.

 

 

 

SharePoint: Change the “No Items” message in a discussion web part

 

Yet another Content Editor Web Part (CEWP) trick…

But you can also add it to the master page!

 

When you create a new team site or add a new discussion list to a site the discussion web part displays a "no items" message. If you would like to change this message all you need is a little JavaScript added to the web part page or to the master page. If you would rather hide this web part anytime there are no discussions then see the previous customization: "Hide a web part with zero rows".

Before:

     

After:

   

 

Steps:

Add a Content Editor Web Part to the page with the discussion web part and using the Source Editor button (2007) paste the following JavaScript.  For 2010 or 2007 create a text file in a library with this JavaScript and link to it from the Content Editor Web Part.

<script  type="text/javascript">

function ChangeDiscussionMessage()
{

  var a = document.getElementsByTagName("TD");
  for ( var i=0; i<a.length; i++ )
  {
    if (a[i].className=="ms-vb")
    {
      if (a[i].innerHTML.indexOf("There are no items to show in this view")>-1 &&
          a[i].innerHTML.indexOf("discussion board")>-1)
      {
         a[i].innerHTML = "There are no active discussions";
      }
    }
  }
}

_spBodyOnLoadFunctionNames.push("ChangeDiscussionMessage"); 

</script>

 

.

 

 

.