SharePoint: How to use relative URL for image in Master Page

<asp:Image ID="Image1" ImageUrl="<% $SPUrl:~sitecollection/Style Library/img/image.jpg %>" class="left-img-responsive" runat="server" />
Advertisements

PNG Files Do Not Show Transparency in Internet Explorer 8

Issue:

If you browse to a Web page (using Internet Explorer 8) that contains an image that has a transparent background in PNG format, the image background may appear to be gray rather than transparent.

Solution:

Add the below code to the Image CSS:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');

SharePoint – CQWP – XSLT in ItemStyle to Format Created Date

The goal is to display the created date with the full month and day:

Add the following namespace attribute to the root xsl:stylesheet element in ItemStyle:

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

Create an xsl:variable element:

<xsl:variable name="Created">
<xsl:value-of select="ddwrt:FormatDateTime(string(@Created) ,1033 ,'MMMM dd')" />
</xsl:variable>

Use the variable:

<xsl:value-of select="$Created"/>

SharePoint 2010 – WebPart Header Rounded Corners

Lets use some fancy CSS3 properties to add rounded corners to the Webpart header bar. This solution won’t work in IE7 or IE8 but should work in IE9, Firefox, Safari, and Chrome.

Have a look:

.ms-WPHeader td { 
	background: #89CE2E; 
	border-bottom: none !important;  
}
.ms-WPHeader td.ms-wpTdSpace { 
	-moz-border-radius-topright: 5px; 
	-webkit-border-top-right-radius: 5px; 
	border-top-right-radius: 5px; 
}
.ms-WPHeader td:first-child.ms-wpTdSpace { 
	-moz-border-radius-topright: 0px; 
	-webkit-border-top-right-radius: 0px; 
	border-top-right-radius: 0px; 
	
	-moz-border-radius-topleft: 5px; 
	-webkit-border-top-left-radius: 5px; 
	border-top-left-radius: 5px; 
}
.ms-WPHeader h3, .ms-WPHeader h3 a { 
	color: #fff; 
}
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { 
	background: #89CE2E; 
}

SharePoint 2013 – BootStrap – Search Box drop down options not displaying on certain pages

OK, I have run into another boggling situation where the default Search Box dropdown is not giving me the search options on my home page… but it is showing on most of the other pages in the site collection?

After some digging in the guts of the master page and and searching the inter-webs… I have a solution 🙂

Just add a reference to ajaxcontroltoolkit in your master page and bob’s you uncle:

<script type="text/javascript">
          SP.SOD.executeOrDelayUntilScriptLoaded(function () {
         SP.SOD.executeOrDelayUntilScriptLoaded(function () {
RegisterSod("ajaxtoolkit.js",  SP.Utilities.Utility.getLayoutsPageUrl('ajaxtoolkit.js'));
}, 'strings.js');
}, 'sp.js');
</script>

Please note that if you are using Design Manager please add the below code to Bootstrap.html instead:

<!--MS:<SharePoint:ScriptLink language="javascript" name="ajaxtoolkit.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->

If you get a chance please check out this CodePlex project: http://responsivesharepoint.codeplex.com/