ComponentOne Wizard for ASP.NET WebForms
Task-Based Help / Changing Appearance / Using CSS Selectors
In This Topic
    Using CSS Selectors
    In This Topic

    You can change the appearance of the C1Wizard control by using the CSS Selectors available with the control. This is done in the Source View of your application.

    1. Navigate to the Source View of your project and locate the <cc1:C1Wizard> tags.
    2. Add CssClass="wijmo-wijwizard" to the tags. Your HTML should resemble the following:

      <cc1:C1Wizard ID="C1Wizard1" runat="server" CssClass="wijmo-wijwizard" Width="400px">

    3. Locate the first set of <asp:Content> tags on the page and insert the following tag set:


      <style type="text/css"></style>
      
    4. Add the following CSS styling between the <style> tags.

      .wijmo-wijwizard .ui-button
      {
      background: #B0C4DE;
      }

      .wijmo-wijwizard .ui-button-text
      {
      color: #236b8e; font-family: Algerian;
      }

      .wijmo-wijwizard .ui-widget-header
      {
      background: #B0C4DE; font-family: Algerian;
      }

      .wijmo-wijwizard-content
      {
      background-color: #c3e4ed; font-family: Algerian; font-size: large; color: #000000;
      }
      .wijmo-wijwizard-steps h1
      {
      color: #000000;
      }
    5. Press F5 to run your application. The C1Wizard control should appear as in the following image:

    See Also