Visual

Latest blog post

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

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".

Device filter settings

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

Windows Phone device profile

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.

Filed under: Kentico 7, Kentico, Device profiles, Share:

Community

comments powered by Disqus

Search

Work

IBL-Software

Related posts

Mobile layouts in Kentico 7

One of the exciting features of Kentico version 7 is the enhanced support for Mobile websites. The CMS contains built-in... read more

Tips and Tricks: Changing the default field editor options

If you have been looking for a way to change the default option that is being offered when creating new fields in the... read more

Tips and Tricks: Subscribe to reports

One of the new features in Kentico 7 is the possibility to subscribe to reports. This can be extremely useful if you want... read more

Creating a custom newsletter subscription form

Let's say you want to add an additional field to the newsletter subscription form. In previous versions of Kentico you... read more

Kentico Certified Training Partner

IBL-Software is now officially Kentico Certified Training Partner for The Netherlands! As Training Partner, IBL... read more

Featured

Connect & Conquer