Multiple Wizards with Separate Styles

[Chance]

I have one wizard using a custom template css.  Then in the last step of that wizard I have another wizard control set to use a different template.  The issue I'm having is the styles for the main wizard are overwriting the sub wizard because by default they both use the same css class names.

 

Is there a way I could get the sub wizard to use different css class names or atleast use the version of the css classes that are under the template class I want for the sub wizard?

 

 

[Chance]

Got it to work adding css classes for the template name right above the second wizard. Thought I had tried this already but guess I must have done something wrong before.

.RadWizard_Bootstrap .rwzLink {


    }
   .RadWizard_Bootstrap .rwzHovered.rwzButton,
  .RadWizard_Bootstrap .rwzHovered .rwzLink {
    }
  .RadWizard_Bootstrap .rwzHovered.rwzNext,
  .RadWizard_Bootstrap .rwzHovered.rwzFinish {
     }
  .RadWizard_Bootstrap .rwzHovered.rwzPrevious
  {
  }

  .RadWizard_Bootstrap .rwzHovered .rwzLink:before {
   }

[Magdalena]

Hi Chance,

When you set the CssClass property in those Wizard, you will add different CSS classes to them, and can style them separately. There are two possible solution to achieve the described behavior:

1. Use the ">" in CSS selector, so rules will be applied only to immediately children:
   
   aspx:

   <telerik:RadWizard runat="server" ID="RadWizard1" CssClass="Wizard1">
       <WizardSteps>
           <telerik:RadWizardStep ID="RadWizardStep1" runat="server" Title="First STEP">
               <telerik:RadWizard runat="server">
   
               </telerik:RadWizard>
           </telerik:RadWizardStep>
       </WizardSteps>
   </telerik:RadWizard>

   
   CSS:
   

   .Wizard1 > .rwzBreadCrumb .rwzLink {
   }
   
   .Wizard1 > .rwzBreadCrumb .rwzHovered.rwzButton,
   .Wizard1 > .rwzBreadCrumb .rwzHovered .rwzLink {
   }
   
   .Wizard1 > .rwzBreadCrumb .rwzHovered.rwzNext,
   .Wizard1 > .rwzBreadCrumb .rwzHovered.rwzFinish {
   }

   
   This selectors will be apply styles to all rwzLink, which are in such rwzBreadCrumb that is the immediate child of Wizard1.
   
   
2. The second solution is to overwrite styles for the imported Wizard by nesting RadWizard selectors.
   
   CSS:
   

   /*style all wizards*/
   .RadWizard .rwzLink {
   }
   
   .RadWizard .rwzHovered.rwzButton,
   .RadWizard .rwzHovered .rwzLink {
   }
   
   /*style only imported wizard*/
   .RadWizard .RadWizard .rwzLink {
   }
   
   .RadWizard .RadWizard .rwzHovered.rwzButton,
   .RadWizard .RadWizard .rwzHovered .rwzLink {
   }

Regards,
Magdalena
Progress Telerik