---
title:        "Creating a Windows Phone device profile in Kentico"
description:  "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 ;)"
url:          https://www.jeroenfurst.nl/blog/creating-a-windows-phone-device-profile-in-kentico
date:         2012-07-11
category:     Configuration and editor UI
tags:         [Configuration and editor UI]
reading_time: 1
---

# 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:
 
 [![Device profile form](~/getattachment/1c7e9df6-e28a-421c-9e7e-dd95074567fa/wp_device_profile_form.png.aspx?width=640&height=529)](~/getattachment/1c7e9df6-e28a-421c-9e7e-dd95074567fa/wp_device_profile_form.png.aspx)

You can download the icon from the following [location](~/getContentAsset/70bab2fd-bcbf-4aba-b1f7-766fa4733b8e/310c1ea5-13ca-4d75-95a0-620f51989b44/8e87aeca_wp.jpg.jpg).
 
 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](~/getContentAsset/7b730caa-0254-4624-bec4-e4f9b234567a/310c1ea5-13ca-4d75-95a0-620f51989b44/e9f4669a_Images.zip.zip).

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".
 
 ![Device filter settings](~/getattachment/1ca7a18f-4301-4b7d-bdbf-c6ef0dca3198/device_filter_settings.png.aspx)

Notice that the new device selection box appears in the "CMS Desk". View the result:
 
 ![Windows Phone device profile](~/getattachment/1f84ac6e-a620-4ed6-8963-cc9bc89448fc/wp_device_profile.png.aspx)

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 ](~/getContentAsset/b026fb36-ec30-41c9-91a5-4961fd1eea64/310c1ea5-13ca-4d75-95a0-620f51989b44/6b38115c_Windows_Phone.zip.zip)to download the Windows Phone device profile import package.