This blog is also featured on NothingButSharePoint.com
Note: This post was updated Dec. 5 to correct a few errors in the code markup.
This is a solution to create a jQuery slider (carousel) in Sharepoint 2010. It is based on an image library, and uses the tinycarousel jQuery plugin. (more…)
Tag Archives: asp
Full-Width Page Layout in Sharepoint 2010
Page Layout without the sidebar (Sharepoint 2010)
In order to create a full-width (whatever the width of your container is) page layout in Sharepoint 2010, you’ll want to disable the sidebar. I find this useful for things like calendars and big lists. Because my design is only 960px wide, I find that by the time you add the sidebar in, you’re left with only around 750px of usable space. For a calendar or a big list, it’s just kind of annoying.
So here’s how it’s done:
Create a new page layout in Sharepoint Designer. Add a new control like this:
<asp:Content ContentPlaceholderID="PlaceHolderLeftNavBar" runat="server" />By declaring an empty control, we tell Sharepoint to ignore that control and not fill it with anything.
Don’t forget to add a bit of CSS in the header to expand your main body panel to the full width.
Simple as that!
note: use this technique to hide other items on the page layout (top navigation, footer, sky’s the limit)
2-Column Page Layout in Sharepoint 2010
You need a two-column page layout for your Sharepoint project. I’ll show you how to do this with and without the sidebar (quick launch) being active.
Step 1: Create a new page layout
I use Sharepoint Designer for this. I’m not even sure it’s possible using anything else.
Step 2: Setup your basic layout in HTML
You can use tables or divs, but in the spirit of the future, let’s use divs.
<div></div>
<div></div>
<br style="clear:both;" />Step 3: Fill your divs
Inside these divs you can place webpart zones, page fields, or your own code (maybe a specific header for each column?). Whatever you want to do.
Step 4 (optional): Hide the sidebar/quicklaunch
Declare this control anywhere not the page, but leave it empty so nothing will load into it:
<asp:Content ContentPlaceholderID="PlaceHolderLeftNavBar" runat="server" />Don’t forget to add a bit of CSS in the header to expand your main body panel to the full width.
Step 5: Style the divs so they appear next to each other.
Using CSS we can make sure those divs appear next to each other.
.col-left,
.col-right {
width:400px; /*obviously…play with the width to match your setup*/
float:left;
}The <br/> tag above should break after the floated elements so everything remains normal in your page layout.
Add Custom CSS in Page Layout
All custom CSS in a Sharepoint 2010 page layout should be formatted like this:
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server"> <style> /* insert css here */ </style> </asp:Content>
All styles go in a PlaceHolderAdditionalPageHead content placeholder. You can also put things like javascript/jQuery, or really anything that should go in the head of a page that you can’t normally put in a page.
Fix for Hidden Search Box in Custom Master Page in Search Center (4 steps)
The Problem: Search box disappears in search center & search results when using a custom master page.
The Solution: the breadcrumb placeholderid
Step 1:
Find <asp:ContentPlaceHolder id=”PlaceHolderTitleBreadcrumb” runat=”server”/> in your custom master page (v4.master also works).
Step 2:
Delete the whole <SharePoint:ListSiteMapPath……./> tag and everything in it.
Step 3:
Move your new placeholder just above <asp:ContentPlaceHolder id=”PlaceHolderMain” runat=”server”/>
Step 4:
Wrap it in a div with the s4-notdlg class so the weird breadcrumb doesn’t show in the dialog boxes.
Final Result:
<div><asp:ContentPlaceHolder id=”PlaceHolderTitleBreadcrumb” runat=”server” /></div>
<asp:ContentPlaceHolder id=”PlaceHolderMain” runat=”server” />
Note, to see how to create a great breadcrumb without using the placeholdertitlebreadcrumb placeholder, click here.
And finally, let me reference these two great articles where I got my solutions from. Hopefully I was able to simplify it down for you a bit.
Tuukka Uskali (SPB)
John Ross
Also, thanks to Damir for the links.
Building a Better Breadcrumb in Sharepoint 2010
It’s really simple! Wrap the PlaceHolderTitleBreadcrumb placeholder in a div with a class of “breadcrumb” and then paste in the custom stuff. See below!
Code for Master Page:
<div class="breadcrumb">
<asp:SiteMapPath
id="ContentMap"
SkipLinkText=""
NodeStyle-CssClass="ms-sitemapdirectional"
runat="server"
CssClass="bread" />
</div>
CSS:
/* breadcrumb */
.breadcrumb {
background:#efefef;
float:left;
display:block;
width:960px;
padding-top:5px;
padding-bottom:5px;
border-bottom:1px solid #ccc;
margin-bottom:10px;
}
.breadcrumb span#ctl00_PlaceHolderTitleBreadcrumb_ContentMap {
padding-left:10px;
}
I must give credit to this site for the bottom part of their post.
