You can create custom visual styles for each of Studio for iPhone's fourteen controls. In this topic, we will illustrate this feature by adding a custom visual style to the C1ViewPort control; however, these steps can be applied to any control with slight modifications, which will be noted throughout this topic. This topic assumes that you have created an AJAX-enabled ASP.NET project that contains a ScriptManager control (see Creating an AJAX-Enabled ASP.NET Project) and a C1ViewPort control.
For more information on custom visual styles, see Custom Visual Styles.
In Design View
Complete the following steps:
1. In order to add a custom visual style to your project, you must first create new folders and add your custom CSS style sheet to the project by completing the following steps:
a. In the Solution Explorer window, right-click your project and select New Folder from the tasks menu. Name the new folder "VisualStyles".
b. Add a new folder under the VisualStyles folder and name it "CustomStyle".
c. Add another folder,"C1ViewPort", under the CustomStyle folder that you made in the last step. The folder hierarchy should match the following image:
Note: This folder must be named after the control. If you were applying a custom style to the launch pad, for example, the name of this folder would be C1LaunchPad.
d. Right-click the C1ViewPort folder and select Add Existing Item to add your custom .css file to the project folder. Name the .css file "styles.css
The styles.css file is added to your project.
2. In Solution Explorer, double-click styles.css to open the style sheet and then replace the existing CSS body style with the following CSS styles:
body
{
margin:0;
padding:0;
font-family:Helvetica;
/* background-color: #c8c8c8; */
}
body *
{
-webkit-tap-highlight-color:rgba(200,0,0,0.0);
}
/*
Notes:
portrait: w=320 by h=356 pixels
landscape: w=480 by h=208 pixels.
Order of css selectors in this class repeats order of the elements in html markup.
*/
/* C1NavigationBar */
.C1ViewPort .C1NavigationBar
{
display:block;
height:43px;
width: 100%;
margin:0;
padding:0;
background-color:Red;
border-bottom: 1px solid #2D3642;
overflow: hidden;
}
/* C1NavigationBarTemplate */
.C1ViewPort .C1NavigationBarTemplate
{
display:block;
position: absolute;
left: 0px;
top: 0px;
z-index: 101; /* higher than buttons */
width: 100%;
height:43px;
margin:0;
padding:0;
overflow: hidden;
}
.C1ViewPort-FixedPosition
{
position:absolute;
top: 0px;
left: 0px;
}
.C1ViewPort .C1ContentAreaWrapper
{
display:block;
width: 100%;
margin:0;
padding:0;
}
.C1ViewPort-FixedPosition .C1ContentAreaWrapper
{
position: absolute;
overflow: hidden;
height: 420px;
top: 44px;
left: 0px;
}
.C1Landscape .C1ViewPort-FixedPosition .C1ContentAreaWrapper
{
height: 270px;
}
.C1ViewPort .C1ContentAreaWrapper .C1ContentArea
{
display:block;
position:relative;
left: 0px;
top: 0px;
float:none;
clear:both;
margin:0;
padding:0;
background-color:Black;
min-height: 420px;
overflow: hidden;
}
.C1ViewPort-FixedPosition .C1ContentAreaWrapper .C1ContentArea
{
position:relative;
left: 0px;
top: 0px;
}
.C1ViewPort .C1ToolBar
{
display:block;
height:49px;
width: 100%;
line-height:49px;
background-color:Silver;
}
.C1ViewPort-FixedPosition .C1ToolBar
{
position: absolute;
overflow: hidden;
top: 368px;
left: 0px;
}
.C1Landscape .C1ViewPort-FixedPosition .C1ToolBar
{
top: 220px;
}
.C1ViewPort
{
border-style: none;
border-color: inherit;
border-width: medium;
margin: 0;
padding:0;
/* background-image: url(Images/pinstripes.png) !important; */
float: left;
clear: both;
position: absolute;
top:0px;
left:0px;
}
.C1Portrait .C1ViewPort
{
width: 320px;
min-height: 420px;
}
.C1Landscape .C1ViewPort
{
width:480px;
}
.C1Design
{
padding-left:28px;
padding-top:145px;
background-image: url('Images/PortraitShell.png');
background-repeat:no-repeat;
height:480px;
width:400px;
}
.C1ViewPort .C1NavigationBar .C1Text
{
display:block;
float:left;
clear:none;
width: 100%;
color:Gray;
font-family:Trebuchet MS;
font-size:18px;
margin:0;
padding:0;
vertical-align:middle;
height: 44px;
font-weight: bold;
line-height:43px;
text-align:center;
text-shadow: #000000 0px -1px 1px;
}
/* left/right button */
.C1ViewPort .C1LeftButton {
float:left;
margin:5px;
margin-top:7px;
position:absolute;
z-index: 100;
left:2px;
}
.C1ViewPort .C1RightButton {
float:right;
margin:5px;
margin-top:7px;
position:absolute;
z-index: 100;
right:2px;
}
Note: If you want to apply a style to another control, you can modify the CSS styles from one of that control's visual styles and add it to this style sheet instead. You can find visual styles for each control in the C:\\Program Files\ComponentOne Studio for iPhone\VisualStyles.
3. Set the following C1ViewPort properties:
•Set the UseEmbeddedVisualStyles property to False.
•Set the VisualStylePath property to "~/VisualStyles".
•Set the VisualStyle property to CustomStyle (external).
The C1ViewPort control adopts your custom style.
In Source View
Complete the following steps:
1. Complete steps 1 and 2 under "Adding Custom Styles in Design View".
2. Enter Source view and enter VisualStyle="CustomStyle", VisualStylePath="~/VisualStyles", and UseEmbeddedVisualStyles="False" into the <cc1:C1ViewPort> tag. Your HTML will resemble the following:
<cc1:C1ViewPort ID="C1ViewPort1" runat="server" UseEmbeddedVisualStyles="False"
VisualStyle="CustomStyle" VisualStylePath="~/VisualStyles">
3. Open the project in a Studio for iPhone-compatible browser and observe that the C1ViewPort1 has adopted your custom visual style.
In Code
Complete the following steps:
1. Complete steps 1 and 2 under "Adding Custom Styles in Design View".
2. Double-click the Web project to place a Page_Load event in the code editor.
3. Set the UseEmbeddedVisualStyles property to False by adding the following code to the Page_Load event:
C1ViewPort1.UseEmbeddedVisualStyles = False
•C#
C1ViewPort1.UseEmbeddedVisualStyles = false;
4. Change the VisualStylePath property:
C1ViewPort1.VisualStylePath = "~/VisualStyles"
•C#
C1ViewPort1.VisualStylePath = "~/VisualStyles";
5. Select the custom visual style:
C1ViewPort1.VisualStyle = "CustomStyle"
•C#
C1ViewPort1.VisualStyle = "CustomStyle";
6. Open the project in a Studio for iPhone-compatible browser and observe that the C1ViewPort control has adopted your custom visual style.
This topic illustrates the following:
The result of this topic will resemble the following image:
