List 'Boxed' Style with One Column Layout

Thanks Christophe & Larry for this useful bit of styling to modify the SharePoint 2010 'Boxed' list style to display items in a single column layout (rather than the default 2 cols):

<script type="text/javascript">
var boxedview = document.getElementById("WebPartWPQ1").innerHTML;
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");

document.getElementById("WebPartWPQ1").innerHTML = boxedview;
</script>

Update the webpart ID (WebPartWPQ1) to match that of your list web part.

Extended Content Query Web Part - 2 Column Box Layout

Before extending Content Query Web Parts (CQWP) in SharePoint refer to the following related blogs:

• MSDN,  Configuring and Customizing the Content Query Web Part
• Heather Solomon, Customizing the Content Query Web Part and Custom Item Styles
• Glyn Clough, Viewing raw data in a Content Query Web Part
• My previous blog, Content Query Web Part - Custom Item Style

The following example creates a 'Highlight Box' two column layout output from a SharePoint list by applying custom XSLT styles using the Content Query Web Part.  The result looks like this:

1. Make a copy of the SharePoint XSL stylesheets 'ItemStyle.xsl' and 'ContentQueryMain.xsl' located in the portal root Style Library (http://hostheader/Style%20Library/) and place the copies in a folder called 'Custom' within the Style Library (http://hostheader/Style%20Library/XSL%20Style%20Sheets/Custom/). Rename as 'ItemStyleExtended.xsl' and 'ContentQueryMainExtended.xsl'.
   
   
2. Open ContentQueryMainExtended.xsl in notepad:
   
1. Add the following new variables:
   
   
   <xsl:variable name="BeginListItemHighlightBoxLeft" select="string('<li class="dfwp-item highlightbox-item left">')" />
   
   
   <xsl:variable name="BeginListItemHighlightBoxRight" select="string('<li class="dfwp-item highlightbox-item right">')" />
   
   
2. Inside the OuterTemplate.CallItemTemplate insert a new xsl choose:
   
   <xsl:choose>
     <xsl:when test="@Style='HighlightBoxTable'">
       <xsl:choose>
         <xsl:when test="$CurPosition mod 2 = 1">
           <xsl:value-of disable-output-escaping="yes" select="$BeginListItemHighlightBoxLeft" />
         </xsl:when>
            <xsl:otherwise>
         <xsl:value-of disable-output-escaping="yes" select="$BeginListItemHighlightBoxRight" />
       </xsl:otherwise>
       </xsl:choose>
     </xsl:when>
     <xsl:otherwise>
       <xsl:value-of disable-output-escaping="yes" select="$BeginListItem" />
     </xsl:otherwise>
   </xsl:choose>
   
   
3. Open the ItemStyleExtended.xsl in notepad and create a new template at the end of the existing xsl:
   
   <xsl:template name="HighlightBoxTable" match="Row[@Style='HighlightBoxTable']" 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>
   
     <xsl:variable name="LinkTarget">
       <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
     </xsl:variable>
    
     <xsl:variable name="ImageClass" select="@Class" />
   
     <div class="highlight">
       <div class="highlightHead">
         <h3><a href="{$SafeLinkUrl}"><xsl:value-of select="@Title"/></a></h3>
       </div>
       <div class="highlightContentCtr">
         <a href="{$SafeLinkUrl}" target="{$LinkTarget}"><img align="left" class="{@Class}" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" /></a>
         <div class="highlightContent">
           <xsl:value-of select="substring(@Description,1,300)" disable-output-escaping="yes"/></div>
       </div>
     </div>
   
   </xsl:template>
   
   
4. Update Custom.css with the following styles:
   
   <style type="text/css">
   li.highlightbox-item {
      width:49%;
   }
   li.highlightbox-item.left {
      float:left;
      margin-right:10px;
   }
   li.highlightbox-item.right {
      float:right;
      margin-right:0;
   }
   div.highlight {
      background-color: #f7f7f7;
      padding: 0;
      border: 0;
      margin-bottom:10px;
      border-radius-top-left:5px;
      border-radius-top-right:5px;
      -moz-border-radius-topleft:5px;
      -moz-border-radius-topright:5px;
      -webkit-border-top-left-radius:5px;
      -webkit-border-top-right-radius:5px;
   }
   div.highlight div.highlightHead {
      padding: 0.5em;
      font-weight:bold;
      background-color: #e4e4e4;
      border-radius-top-left:5px;
      border-radius-top-right:5px;
      -moz-border-radius-topleft:5px;
      -moz-border-radius-topright:5px;
      -webkit-border-top-left-radius:5px;
      -webkit-border-top-right-radius:5px;
   }
   div.highlight div.highlightHead h3 {
      margin:0;
   }
   div.highlight div.highlightContentCtr {
      min-height:50px;
      border: 1px solid #e4e4e4;
      border-top:0;
   }
   div.highlight div.highlightContentCtr img {
      margin: 0 10px 0 0;
      border: 0;
      padding: 0;
   }
   div.highlight div.highlightContentCtr img.icon {
      width:50px;
      height:50px;
   }
   div.highlight div.highlightContentCtr img.image {
      width:75px;
      height:50px;
   }
   div.highlight div.highlightContent {
      padding: 10px 10px 4px 10px;
   }
   </style>
   
   
5. Add a Content Query Web Part (CQWP) to a page. Do not configure it in any way.
   
   
6. Export the Content Query Web Part to your desktop.
   
   
   
   
7. Open the exported CQWP in notepad and edit the following properties:
   
   <property name="Title" type="string">Extended Content Query</property>
   
   <property name="ItemXslLink" type="string">/Style%20Library/XSL%20Style%20Sheets/Custom/ItemStyleExtended.xsl</property>
   
   <property name="MainXslLink" type="string">/Style%20Library/XSL%20Style%20Sheets/Custom/ContentQueryMainExtended.xsl</property>
   
   
8. On the web part page where you would like the CQWP displayed, select Edit, Add a Web Part, Upload a Web Part:
   
   
   
9. On the web part page where you would like the CQWP displayed, select Edit, Add a Web Part, Imported Web Parts, Extended Content Query
   
   
   
10. Edit the Extended CQWP properties:
    
1. In the properties panel expand the Query node. Select the radio button Show items from the following list and enter the path to the associated SharePoint list, (which requires six columns including: Title, Image, Description, URL, Class and Order). Apply these changes by selecting the Apply button at the bottom of the properties panel.
   
   
2. Expand the Presentation node and in the Grouping and Sorting section set the Sort items by to ‘Order’.
   
   
   
   
3. In the Styles section set the Item style to HighlightBoxTable.
   
4. In the Fields to display section set as in the screenshot.
   
   
   
   
5. Expand the Appearance node and set the Chrome to none.
   
6. Select Ok.

Hide list web part column headers

To hide list column headers add the following CSS to a hidden content editor web part on the page:

<style>

.ms-viewheadertr { display: none;}

</style>

Creating Web Part Pages with a Quick Launch

Web Part Pages in Team Sites by default do not show the Quick Launch left navigation. Basically the panel is hidden by a CSS style written into the page <head>:

<style type="text/css">
body #s4-leftpanel {
 display:none;
}
.s4-ca {
 margin-left:0px;
}
style>

and two placeholders in the <body>, which override the masterpage placeholders:

<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>


To show the Quick Launch open the page in SharePoint Designer and remove the style and the placeholders.

A theme with the name "CustomMySite 1011" and version already exists on the server.

You receive this error when trying to apply a custom theme to your SharePoint site:

"A theme with the name "CustomMySite 1011" and version already exists on the server. "

1. Open your site in SharePoint Designer.
2. Expand _themes and delete the CustomMySite theme folder
3. Re-apply the custom theme to your site.
   

The type or namespace name 'Publishing' does not exist in the namespace 'Microsoft.SharePoint'

I started playing around with a copy of default.master yesterday and added in a CssRegistration link to the header:

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/CustomMySiteRegistration.css %>" runat="server"/>

After deploying the master page to SharePoint i received the following error:

An error occurred during the processing of . c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\root\dff54803\4595fc0a\App_Web_custommysite.master_1096277560.2bgek7y-.0.cs(1389): error CS0234: The type or namespace name 'Publishing' does not exist in the namespace 'Microsoft.SharePoint' (are you missing an assembly reference?)

Thanks to Tom Meskens for posting the error here's the solution.
The default.master file doen't include the publishing assembly declarations required. They need to be added in as follows:

<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/VariationsLabelMenu.ascx" %>
<%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/PublishingConsole.ascx" %>
<%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/PublishingActionMenu.ascx" %>

Republish the master page and hoorah - no more error!