Creating a Windows Phone device profile in Kentico

Kentico version 7 introduces "Enhanced Mobile Website Support" improvements. This enables you to easily build mobile websites and view the result using mobile layouts. By default Kentico 7 ships with templates for iPad, iPhone and Android. In this post I will demonstrate how easy it is to add a device profile for Windows Phone, truly a must have ;)

Go to "Site Manager" --> Development --> "Device profiles" and add a "New profile". Fill in the form as shown in the following screenshot:

 

You can download the icon from the following location.

Save the form and open the Theme tab. Create a new file called "DeviceProfile.css". Edit the file and add the following styles:

/* WindowsPhone device preview */
.DeviceFrame.Windows_Phone .TopLine .LeftPiece
{
    background-image: url('./Images/top_left.png');
    width: 63px;
    height: 98px;
}

.DeviceFrame.Windows_Phone .TopLine .CenterPiece
{
    background-image: url('./Images/top_center.png');
    height: 98px;
}

.DeviceFrame.Windows_Phone .TopLine .RightPiece
{
    background-image: url('./Images/top_right.png');
    width: 64px;
    height: 98px;
}

.DeviceFrame.Windows_Phone .CenterLine .LeftPiece
{
    background-image: url('./Images/center_left.png');
    width: 63px;
}

.DeviceFrame.Windows_Phone .CenterLine .RightPiece
{
    background-image: url('./Images/center_right.png');
    width: 64px;
}

.DeviceFrame.Windows_Phone .BottomLine .LeftPiece
{
    background-image: url('./Images/bottom_left.png');
    width: 63px;
    height: 205px;
}

.DeviceFrame.Windows_Phone .BottomLine .CenterPiece
{
    background-image: url('./Images/bottom_center.png');
    height: 205px;
}

.DeviceFrame.Windows_Phone .BottomLine .RightPiece
{
    background-image: url('./Images/bottom_right.png');
    width: 64px;
    height: 205px;
}

.DeviceFrame.Windows_Phone.Rotated .TopLine .LeftPiece
{
    background-image: url('./Images/top_left_rotated.png');
    width: 98px;
    height: 64px;
}

.DeviceFrame.Windows_Phone.Rotated .TopLine .CenterPiece
{
    background-image: url('./Images/top_center_rotated.png');
    height: 64px;
}

.DeviceFrame.Windows_Phone.Rotated .TopLine .RightPiece
{
    background-image: url('./Images/top_right_rotated.png');
    width: 205px;
    height: 64px;
}

.DeviceFrame.Windows_Phone.Rotated .CenterLine .LeftPiece
{
    background-image: url('./Images/center_left_rotated.png');
    width: 98px;
}

.DeviceFrame.Windows_Phone.Rotated .CenterLine .RightPiece
{
    background-image: url('./Images/center_right_rotated.png');
    width: 205px;
}

.DeviceFrame.Windows_Phone.Rotated .BottomLine .LeftPiece
{
    background-image: url('./Images/bottom_left_rotated.png');
    width: 98px;
    height: 63px;
}

.DeviceFrame.Windows_Phone.Rotated .BottomLine .CenterPiece
{
    background-image: url('./Images/bottom_center_rotated.png');
    height: 63px;
}

.DeviceFrame.Windows_Phone.Rotated .BottomLine .RightPiece
{
    background-image: url('./Images/bottom_right_rotated.png');
    width: 205px;
    height: 63px;
}

The css file contains references to images resulting in the windows phone layout. Create a new folder called "Images" and add the following files.

Make sure that the devide filter setting is enabled. Go to "Site Manager" --> Settings --> Content --> "Content Management" and check the box next to "Enable device profiles".

Notice that the new device selection box appears in the "CMS Desk". View the result:

And there you have it, a lovely Windows Phone layout surrounding your mobile website.

Note: the "Enhanced Mobile Website Support" is not completed (ux for end users) in the release candidate, but will be included in the final release.

Click here to download the Windows Phone device profile import package.