Adding Javascript to a SharePoint Master or Layout page

If you need to add javascript to a SharePoint Master or Layout page, add the script to the Head section or PlaceHolderAdditionalHead content area. Be sure to include the  _spBodyOnLoadFunctionNames.push function so your function is added to the OnLoad method.

<script type="text/javascript">

function UpdateCampusAddress()

{

if (window.location.href.toLowerCase().startsWith("http://<site name>/"))

{

document.getElementById('CampusAddress').innerHTML = "Williams Campus";

}

else if (window.location.href.toLowerCase().startsWith("http://<site name>/"))

{

document.getElementById('CampusAddress').innerHTML = "Sun Lakes Campus";

}

}

_spBodyOnLoadFunctionNames.push("UpdateCampusAddress");

</script>

Empty dataset template for DataList control

There is no Empty dataset Template for the DataList control. To display a message in the DataList control if your dataset is empty, define a HeaderTemplate and set the visibility based upon the item count as shown below:

 

<asp:DataList runat="server" id="DataList1" DataSourceID="spDataSource1">

<HeaderTemplate>

<span style="font-style:italic;color:#181818">

<asp:Label ID="lblEmpty" Text="No Events" runat="server" Visible='<%# DataList1.Items.Count==0 %>'/>

</span>

</HeaderTemplate>

<ItemTemplate>

<p>

...

</p>

</ItemTemplate>

</asp:DataList>

Breadcrumb added to SharePoint Masterpage

The publishing masterpage for the new website design now includes a readcrumb trail leading back to the Home site. The text in the breadcrumbs shows the Site titles as well as the current page title.

<asp:SiteMapPath ID="SiteMapPath" runat="server" CssClass="cgcc-breadcrumb" RenderCurrentNodeAsLink="true" skiplinktext="skip breadcrumb"/>
CGCC-v4.css is where the style is set so it's easy to change the color or font.

.cgcc-breadcrumb span a
{
color:#404040;
text-decoration:none;
}

Controlling SharePoint's Global Navigation

Lesley and I were talking about how we as members of the WebCS Owners
group can keep full control of the Global Navigation menu on the new design, thus preventing editors from changing the global nav in their site. Editors will need to
have access to the Site navigation so it isn't a matter of restricting their permissions. The way we set this up in the current site is to use a custom list to hold the global navigation entries.

There is a way to specify the Home site's global navigation instead of the current site's global navigation. By using the 2 properties below we are telling the menu to only use the Home site's global navigation when populating the menu for all sites.

<PublishingNavigation:PortalSiteMapDataSource
...
StartFromCurrentNode="false"
StartingNodeUrl="/"
.../>

What this means is editors can make changes to their site's global navigation settings without affecting what is displayed on the pages. Webmasters can make a change to the global navigation entries in the Home site and it will affect all sites regardless of whether or not the sub-sites are inheriting.

Comparing Publishing Dates of Blog Posts

When displaying the list of published posts from a SharePoint Blog, you may want to hide certain elements such as the Publish Date div box if there are multiple posts on the same day. The XSL code below will compare the publish date of the post to the previous post and display or not display the div accordingly.

<xsl:variable name="PrevPosition" select="count(./preceding-sibling::*)" />
<xsl:if test="($Rows/Row[$PrevPosition]/@PublishedDate.MonthDayOnly != $thisNode/@PublishedDate.MonthDayOnly) or ($PrevPosition+1 = $FirstRow)">
...
</xsl:if>

Changing the SP Ribbon background color using CSS

To change the background color of SharePoint's ribbon, override the following styles from the corev4.css file.


.ms-SpLinkButtonActive
{
background-color:orange !important;
}

.ms-welcomeMenu a:hover
{
background-color: orange !important;
}

.ms-siteactionsmenu .ms-siteactionsmenuhover
{
background-color: orange !important;
color:#000000 !important;
}

.ms-cui-ribbonTopBars
{
background: orange url() repeat-x !important;
padding-top:0px;
}

Setting the forecolor of a control based upon the backcolor

The code below will set the forecolor or font color of a control, such as a label, to white or black, depending on the background color.
System.Drawing.Color foreColor = System.Drawing.Color.Black;

// all colors coming in are in Hex format. No Known colors but we'll check anyway.
int r;
int g;
int b;

if (backColor.IsKnownColor)
{
r = backColor.R;
g = backColor.G;
b = backColor.B;
}
else
{
r = int.Parse(backColor.ToString().Substring(8, 2), System.Globalization.NumberStyles.HexNumber);
g = int.Parse(backColor.ToString().Substring(10, 2), System.Globalization.NumberStyles.HexNumber);
b = int.Parse(backColor.ToString().Substring(12, 2), System.Globalization.NumberStyles.HexNumber);
}

int changeToWhite = 0;
if (r <= 128)
{
changeToWhite ++;
}
if (g <= 128)
{
changeToWhite ++;
}
if (b <= 128)
{
changeToWhite ++;
}
if (changeToWhite > 2)
{
foreColor = System.Drawing.Color.White;
}