SPPP Presentation

Sppp presentation from Denis Molodtsov

Hide SharePoint 2013 Controls on Full Screen Mode

How do I hide or Show custom controls in full scree mode?

When you click on "full screen mode" button ms-fullscreenmode  class is added to the <Body> tag:

Solution:

A sample snippet of CSS that will hide your controls in full screen

/*hide controlID div only when full screen mode is enabled/

.ms-fullscreenmode #controlID {

 display:none;

}


#controlID - id of an HTML element that should be hidden when "full screen" is clicked

Create Professional Looking favicon.ico and .ico for .exe Programs

Let's start with this:

1. If you already have a corportate big  logo - open it in GIMP and go to : Layer-->Transparancy-->Color to Alpha and press OK:

2.Export the result as a PNG

3. Then go to the xiconeditor.com web site and import your image:

4.Select all 4 sizes, press OK and then click on Export.

5. Done! We've just created an awesome professional lookin favicon.ico file

This is how it will look in real life:

This file can also be used for .exe files. 

The resulting .ICO file will contain 4 different sizes in it. Each size will be used by a browser or Windows 7/8 OS to depending on the context.

List of Useful SharePoint CSS Classes

When developing custom SharePoint solutions you can save a lot of time by taking advantage of the built-in CSS classes inside corev4.css or  corev15.css files.

For instance: you can use ms-error class in order to make your label red.
You can also use these:
.s4-floatleft
.s4-hide
.s4-clust - hides the element for the print view.

Here is a good list of ready-to-use CSS classes:
http://sharepointexperience.com/csschart/csschart.html

Unfortunately, this link does not contain the whole list of useful classes, but it's a good start anyway.

Change "SharePoint" in ms-core-brandingtext

In case you were wondering how to change "SharePoint" text in the top left corner:

In SharePoint Management PowerShell:

$app = get-spwebApplication "http://mysite"
$app.SuiteBarBrandingElementHtml = "<div class='ms-core-brandingText'>Custom Brand</div>"
$app.Update()

Done!

5 facts about JSLink in SharePoint 2013 you might not know (Credits to Anton Vishnyakov)

http://spdevlab.com/2013/07/07/5-facts-about-jslink-in-sharepoint-2013-you-might-not-know/

Allowing C# on Master Page and Layout Pages

1. Open web.config;
2. Find PageParserPaths node;
3. Add the following PageParserPath none so that it looks like so:
<PageParserPaths>
   <PageParserPath VirtualPath="/*" CompilationMode="Always" AllowServerSideScript="True" IncludeSubFolders="True" />
</PageParserPaths>

Enabling HTML5 on SharePoint 2010 Master Page

This is the original article.

The steps are:

1. Open your custom Master Page replace the existing DOCTYPE tag with the following HTML5 doctype: <!DOCTYPE html>
2. Now look for the meta tag, X-UA-Compatible, found in the head section. It should look like: <meta http-equiv="X-UA-Compatible" content="IE=8" />
3. Update the “content” value to "IE=Edge" 

That's it! now you can use lots of CSS 3.0 and HTML5 features.

Using SVG Images with Modernizr.js

If you need to add an SVG to your HTML page here what you should do:

• Install Inkscape (it's free to use).
• Create SVG file
• Export to PNG. This file will be used as a fallback in older browsers like IE 7 and IE 8

 

• Create HML page and add .svg Image on it. Problem: IE8 does not support SVG. That's why you need modernizr.js
• Include modernizr.js to the page. This will add "svg" or "no-svg" classes to the <HTML> tag.
• Now you can use ".no-svg" and ".svg" classes in you CSS selectors to provide fallback to PNG images. In other words, you need to load .png images only when  no-svg class exists in DOM. 

Final HTML and CSS should be like following:

 

<style>
.svg .star-box{
   height: 48px;
   width: 52px;
   background: url("woman.svg") ;
   background-size: 100% 100%;
}.no-svg .star-box
{   background: url("woman.png") no-repeat;
   height: 68px;
   width: 48px;
   min-width: 1024px;
   background-size: 100% 100%;
}</style>

<div class="star-box"/>

So, when a browser supports SVG - .svg files will be used. If it does not it will fall back to using PNG.

Changing SharePoint 2010 Favicion

In SharePoint Designer, open your current master page and change the following tag:
<SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/images/yourFavicon/favicon.ico"/>

Applying custom page to all subsites

You've create a custom master page and want to apply it to all of your subsites. Use this link to do just that:

/_layouts/changesitemasterpage.aspx

Warning: Publishing Infrastructure Feature must be enabled on your site collection.

SharePoint 2013. New JSLink property for SPField

This is a side note about the use of JSLink property in SPFields. I intend to use this later in my projects. Here are 2 simple steps.

1.Create and deploy JS Field with the script that looks like this:

2. Change the new JSLink property for you SPField like is show on the screenshot. Note that it may be even built-in field.

The result should look like this. I've added a simple "refresh" image inside the field as a test.

For more info you could check this nice article SP 2013: Using the JSLink property to change the way your field or views are rendered in SharePoint 2013

Highlight Current Quick Launch Menu Item

1. Add a start-up script on your page

$(function () {
    $(".s4-ql li.selected").parents("li.static").find(":first-child").first().addClass("selected-menu-item");
 });

2. Take advantage of the added CSS class to highlight current menu item:

.s4-ql UL.root a.selected-menu-item {
    background-color: rgb(0,153,0);
}

Example of the highlighted menu item:

SharePoint 2010 CSS Chart

On on the Marc's SharePoint Notes I've found a very informative table that looks like this:

.ms-cui-cg-gr .ms-cui-tt-a:hover{ border-color:#56c553; border-top-color:#56c553; background:red; }

For the full table check the link above.

It's pretty self-explanatory, I think.

Testing Mobile View in Chrome

1. In Chrome, open the Developer Tools  by clicking "Customize"(wrench icon) --> "Tools" --> "Developer Tools."

2. Click the "Settings" icon at the botom right corner.
3. Check "override user agent" and select one of the options (iPhone, iPad or Nexus S running Android 2.3). You can also select "other" and enter a custom user agent.

The result looks like that:

Simple Custom Error Page

1. In web.config set: 
•  CallStack="false" 
•  customErrors mode="On"
2. Run Powershell command "Set-SPCustomLayoutsPage -Identity Error -RelativePath /_layouts/CustomError/error.aspx -WebApplication http://Srv
3. Add a new ASPX page to /_layouts/CustomError/error.aspx: 

You can download source code from here. My custom error page looks like that:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Import Namespace="Microsoft.SharePoint.Administration"  %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Error</title>
</head>
<script language="C#" runat="server">

    public void Page_Load(object sender, EventArgs e)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("Error occured:");

        Exception[] errors = Context.AllErrors;

        if (errors == null)
        return;

        for (int i = 0; i < errors.Length; i++)
        {
            Exception err = errors[i];
            LogError(err.Message);

            sb.Append("<br>");
            sb.Append(err.Message);
            sb.Append("<br><br>Stack:<br>");
            sb.Append(err.StackTrace);

            if (err.InnerException != null && err.InnerException.Message != err.Message)
                sb.Append("<br><br>" + err.InnerException.Message);
        }

        lblError.Text = sb.ToString();        
    }

    private static void LogError(string message)
    {
        uint customId = 7777;
        SPDiagnosticsService.Local.WriteTrace(customId,
            new SPDiagnosticsCategory("CustomError Message", TraceSeverity.Unexpected, EventSeverity.Error),
            TraceSeverity.Unexpected, message);
    }

</script>

<body>
<asp:Label ID="lblError" runat="server" />
</body>
</html>