Below is the browser rendered HTML of a SahrePoint 2010 web-part zone without a web part. As you can see, there is an empty table cell with a class attribute of class="wp-container".

1
2
3
4
5
6
7

<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>

Below is the browser rendered HTML of a SharePoint 2010 web-part zone with a web part. We want to apply the border to the nested table after the cell with the class="wp-container".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

This can be accomplished one of two ways depending on the browser support requirements. If you have the luxury of NOT supporting Internet Explorer 6 browser users, or you just don’t care about IE6 browser users, the following CSS code snippet will suffice:

/* assign the style to the table element that are children of div.wp-container (not supported by IE6) */
 
div.wp-container > table {
 border: 1px solid #ddd;
 background-color: #fff;
}

If you want a more browser optimized solution that includes IE6 support, the following should work for you:

/* assign the style to the table element that are a direct descendent of div.wp-container */
 
div.wp-container table {
border: 1px solid #ddd;
background-color: #fff;
}
 
/* stop assigning this style to all other descendent of div.wp-container */
 
div.wp-container table table,
div.wp-container table table table,
div.wp-container table table table table,
div.wp-container table table table table table {
border: none;
background-color: inherit;
}

Step 1

Determine where your CSS snippet will go. There’s lots of option for you to choose from depending on how your SharePoint site is configured.

1. I usually create a custom CSS, which overides the CORE.css, and then place the CSS snippet within the custom CSS. Say for example my custom CSS is called custom.css. Within this CSS I have styles that overide the SharePoint styles defined in the CORE.css. To add the printer-friendly CSS snippet into an existing CSS, you simply add a:

   1 2	@media print { }

   And within the media print brackets you nest your printer friendly class definitions (which we will discuss in Step 2.

2. You can also create a seperate CSS file and call it, for example, print.css and reference it from either the master-page or page-layout as needed. Eric Swenson’s blog outlines how to reference custom CSS from SharePoint 2010 very nicely.

   Unfortunately Microsoft doesn’t allow us to define the media types withing the CSS Registration, therefore one must use the more traditional method of linking to the printer friendly CSS. Below is an example of referencing the CSS from the Style Library at the site-collection root:

   1 2	<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/Custom.css %>" After="corev4.css" runat="server" /> <link href="http://YourSiteName/Style%20Library/Print.css" rel="stylesheet" type="text/css" media="print" />

Step 2

Once you have determined the best way to reference the printer-friendly CSS snippet we need to make the page printer friendly by hiding the page elements that we DON’T want to print. Coincidentally SharePoint has a class defined that already does this for us. You see, SharePoint hides certain elements on the master page when that master page us used for dialogue boxes. The style attribute is: s4-notdlg. The first thing we need to do is hide all elements that have the class defined as s4-notdlg.

1
2
3
4
5
6
7
8
9
10

/* for placement within an existing CSS */
@media print {
    .s4-notdlg {
        display: none;
    }
}
/* for placement within a print only CSS */
.s4-notdlg {
    display: none;
}

You can also add this class definition into any custom elements you would like to hide. For example, let’s say you added a footer to the bottom of your pages. The footer is defined within the HTML as:

1
2
3

<div class="footer">
...
</div>

You can add the s4-notdlg into the footer definition which will then hide it when you print the page

1
2
3

<div class="footer s4-notdlg">
...
</div>

Step 3

Lastly we need to stylize the output so that it’s printer friendly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

 
/* convert font to printer friendly points */
body {
    background: white;
    font-size: 12pt;
}
#s4-workspace,
#s4-bodyContainer {
    width: auto;
    margin: 0 5%;
    padding: 0;
    border: 0;
    float: none !important;
    color: black;
    background: transparent none;
}
a:link, a:visited {
    color: #520;
    background: transparent;
    font-weight: bold;
    text-decoration: underline;
}
a:link:after, a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}
a[href^="/"]:after {
  content: " (attr(href) ") ";
}

The solution is simple enough and I’m sure there’s another 1,000 ways to skin-the-cat as they say. Here’s what I did. Edit the web part properties and set the web part height to something unique. I decided to set the unit of measurements to points and I made the height 200 points. You may have to experiment with the height in order to get it the height you desire.

After you apply the settings, if you were to view the rendered HTML in a browser you would find a div (with all the rif-raf omitted from this example) as follows:

Next I open my Cascading Style sheet (CSS) file and I add an attribute selector method. In this case I’m going to match any div element whose “style” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.

div[style~="200pt"] a:link,
div[style~="200pt"] a:active,
div[style~="200pt"] a:visited {
 color: #999;
 font-family: "Lucida Sans";
 font-weight: 700;
 line-height: 1em;
 word-spacing: -1px;
}
div[style~="200pt"] a:hover {
 background-color: #fff;
 color: #454545;
 text-transform: uppercase;
}
div[style~="200pt"] {
 text-align: center;
}

A few points. SharePoint will automatically add a ; to the height of the div as follows: height: 200pt;. However, in the CSS the div[style~="200pt"] does not require the ; and infact will not work if you retain the ;.

Below is the browser rendered HTML of a web part zone without a web part. As you can see, there is an ampty table cell with a class attribute of class="wp-container.

<!-- Rendered web part zone without a web part -->
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>

Below is the browser rendered HTML of a web part zone with a web part. We want to apply the border to the nested table after the cell with the class="wp-container.

<!-- Rendered web part zone with a web part -->
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

This can be accomplished one of two ways depending on the browser support requirements. If you have the luxury of NOT supporting Internet Explorer 6 browser users, or you just don’t care about IE6 browser users, the following CSS code snippet will suffice:

/* assign the style to the table element that are children of div.wp-container (not supported by IE6) */
 
div.wp-container > table {
 border: 1px solid #ddd;
 background-color: #fff;
}

If you want a more browser optimized solution that includes IE6 support, the following should work for you:

/* assign the style to the table element that are a direct descendent of div.wp-container */
 
div.wp-container table {
 border: 1px solid #ddd;
 background-color: #fff;
}
 
/* stop assigning this style to all other descendent of div.wp-container */
 
div.wp-container table table,
div.wp-container table table table,
div.wp-container table table table table,
div.wp-container table table table table table {
 border: none;
 background-color: inherit;
}

It seems that the issue is not with the iTunes permissions but rather with the permissions set on the Music folder.

Here’s what I did to fix it. First I did check the permissions of the iTunes application executable.

• Locate the iTunes.exe application within this folder: C:\Program Files (x86)\iTunes\iTunes (Application)
• Right+click and select Properties.
• Within Properties select Security.
• Make sure that the Allow is checked for the SYSTEM, Administrators and Users (Special permissions does not need to be checked).
• Click OK

The next step is to locate the Music folder and update the security setting on this folder.

• Locate the Music folder within Libraries or C:\Users\{account}\My Music.
• Right+click this folder and select Properties.
• Within Properties select Security.
• Make sure that the Allow is checked for the SYSTEM, Administrators and Users (Special permissions does not need to be checked).
• Click OK