ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Customizing the Appearance of C1MultiPage > Adding Custom Visual Styles

Adding Custom Visual Styles

You can use the VisualStyle, VisualStylePath, and UseEmbeddedVisualStyles properties to create a custom visual style for your C1MultiPage. In this topic, you will add a custom visual style in Design view, in Source view, and in code.

For more information on custom visual styles, see Custom Visual Styles.

Adding Custom Visual Styles in Design View

To add a custom visual style, 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 .css file to the project. To do this, follow these steps:

a.   In the Solution Explorer window, right-click on your project to open its context menu and select New Folder. Name the new folder "VisualStyles".

b.   Add a new folder within the newly created VisualStyles folder and name it "CustomStyle".

c.    Add another folder,"C1MultiPage", under the CustomStyle folder that you made in the last step.  Your folder hierarchy will match the following image:

 

     

 

Note:  The second folder in the hierarchy must match the name of the custom visual style.

d.   Right-click the C1MultiPage folder and select Add New Item to add a custom .css file to the project folder. Name the CSS style sheet "styles.css" and press Add to add the style sheet to your project. 

e.   If your custom visual style includes images, add a folder named "Images" underneath the C1MultiPage folder. The folder hierarchy resembles the following:

 

 

2.   Add CSS styling and images to the project by completing these steps:

a.   In Solution Explorer, double-click styles.css to open the style sheet and replace the existing CSS body style with the following:

CSS Styles

/* =========== CustomStyle C1MultiPage =========================================== */

.C1MultiPage_CustomStyle

{

       font-size:12px;

       font-family: Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;

       background:#7D9EC0;

       border: ridge 7px #FFE1FF;

       padding:2px;

       padding-right:6px !important;

       padding-bottom:6px !important;

       padding-right:2px;

       padding-bottom:2px;

}

.C1MultiPage_CustomStyle .C1pvOuter

{

       width:100%;

       height:100%;

       padding-bottom:6px !important;

       padding-bottom:0;

}

.C1MultiPage_CustomStyle .C1pvInner

{

       width:100%;

       height:100%;

       border-top:dotted 2px #B0E0E6;

       border-left:dotted 2px #B0E0E6;

       border-bottom:dotted 2px #B0E0E6;

       border-right:dotted 2px #B0E0E6;

       padding-bottom:2px !important;

       padding-right:2px !important;

       padding-bottom:0;

       padding-right:0;

}

.C1MultiPage_CustomStyle .C1pvContent

{

       width:100%;

       height:100%;

       border-top:solid 1px #f6f7f9;

       border-left:solid 1px #f6f7f9;

       border-bottom:solid 1px #bdbfc1;

       border-right:solid 1px #bdbfc1;

       padding:0;

}

.C1MultiPage_CustomStyle .C1NavBar

{

       width:100%;

       height:30px;

       line-height: 20px;

       margin-top:14px !important;

       margin-bottom:-6px !important;

       margin-top:4px;

       margin-bottom:2px;

       font-size: 14px;    

       font-family:Comic Sans MS, "lucida grande",verdana,arial,helvetica,sans-serif;   

       color:Purple;

       text-align: right

}

.C1MultiPage_CustomStyle .C1NavBar a span

{

       width:24px;

       height:30px;

       text-decoration:none;

       float:left;

       cursor:pointer;

       margin:5px 5px;

}

.C1MultiPage_CustomStyle .C1NavBar a .C1FirstButton

{

       background: white url('Images/first.png') top center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar a:hover .C1FirstButton

{

       background: white url('Images/first.png') center center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar a .C1PreviousButton

{

       background: white url('Images/previous.png') top center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar a:hover .C1PreviousButton

{

       background: white url('Images/previous.png') center center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar a .C1NextButton

{

       background: white url('Images/next.png') top center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar a:hover .C1NextButton

{

       background: white url('Images/next.png') center center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar a .C1LastButton

{

       background: white url('Images/last.png') top center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar a:hover .C1LastButton

{

       background: white url('Images/last.png') bottom center no-repeat;

}

.C1MultiPage_CustomStyle .C1NavBar .C1PageInfo

{

       padding-right:10px;

       color:#7A67EE;

       text-decoration:none;

       font-weight:bolder;

}

 

b.   In Solution Explorer, right-click the Images folder and select Add Existing Item to add images to the project.

You can add custom images to the project, or you can use the images from the following table. To use these images, right-click on each image to open its context menu and select Save Picture As. Save the images with the filenames listed in the table below.

 

Image

Filename

first.png

previous.png

next.png

last.png

 

3.   Click C1MultiPage's smart tag () and to open the C1MultiPage Tasks menu and select MultiPage Designer.

      The C1MultiPage Designer Form opens.

4.   In treeview, select C1MultiPage1 to reveal its list of properties, then complete the following:

      Set the ShowToolbar property to True to enable the toolbar.

      Set the UseEmbeddedVisualStyles property to False

      Set the VisualStylePath property to  "~/VisualStyles".

      Set the VisualStyle property to CustomStyle (external).

Note: If CustomStyle(external) does not appear in the drop-down list, run the project and then repeat step 4.

5.   Click OK to close the C1MultiPage Designer Form. Observe that the C1MultiPage has adopted your custom visual style.

Adding Custom Visual Styles in Source View:

To add a custom visual style, follow these steps:

1.   Complete steps 1 and 2 under "Adding Custom Visual Styles in Design View".

2.   Right-click C1MultiPage and select Properties, and set the ShowToolBar property to True. This will enable you to see the custom CSS style for the toolbar.

3.   Enter Source view and enter VisualStyle="CustomStyle", VisualStylePath="~/VisualStyles", ShowToolBar="True", UseEmbeddedVisualStyles="False" into the <cc1:C1MultiPage> tag.  Your HTML will resemble the following:

 

<cc1:C1MultiPage ID="C1MultiPage1" runat="server" VisualStyle="CustomStyle" VisualStylePath="~/VisualStyles" ShowToolBar="True" UseEmbeddedVisualStyles="False">

4.   Run the project and observe that the C1MultiPage has adopted your custom visual style.     

Adding Custom Visual Styles in Code

To add a custom visual style, follow these steps:

1.   Complete steps 1 and 2 under "Adding Custom Visual Styles in Design View".

2.   Right-click C1MultiPage and select Properties, and set the ShowToolBar property to True. This will enable you to see the custom CSS style for the toolbar.

3.   Double-click the Web project to place a Page_Load event in the code editor. 

4.   Set the UseEmbeddedVisualStyles to False by adding the following code to the Page_Load event:

      Visual Basic

C1MultiPage1.UseEmbeddedVisualStyles = False

      C#

C1MultiPage1.UseEmbeddedVisualStyles = false;

5.   Change the VisualStylePath property:

      Visual Basic

C1MultiPage1.VisualStylePath = "~/VisualStyles"

      C#

C1MultiPage1.VisualStylePath = "~/VisualStyles";

6.   Select the VisualStyle property:

      Visual Basic

C1MultiPage1.VisualStyle = "CustomStyle"

      C#

C1MultiPage1.VisualStyle = "CustomStyle";

7.   Run the project and observe that the C1MultiPage has adopted your custom visual style.

This topic illustrates the following:

Once your project is built, observe that a custom visual style has been added to the project. Hover over the navigation buttons  and observe that a hover style has been applied to the buttons. Click the navigation buttons and note that the toolbar works just as it would under the built-in visual styles. The C1MultiPage control will resemble the following image:

 


Send comments about this topic to ComponentOne.
Copyright 1987-2010 ComponentOne LLC. All rights reserved.