Image in Step Bar

[MBEN]

     Hi, Looking at this demo with the Material skin, I was wondering if it was possible to show the text below the image?

https://demos.telerik.com/aspnet-ajax/wizard/overview/defaultcs.aspx?skin=Material

 

[MBEN]

Somehow got posted before I could complete.

I was hoping to get something similar to the attached image. I tried editing the css but it didn't work.

Bonus would be if I could show the Step Counter along with the text below the image. Also attached is a sample of what I could achieve so far. I couldn't get the images to load from the indivvidual images instead of sprite so I am using the ImageURL property of the Wizard.

/****************************************************************************************
 * RadWizard Elements
 ****************************************************************************************/
html .RadWizard{
    font-family: $font-family-sans-serif;
}

html .RadWizard .rwzBreadCrumb {
    box-shadow: none;
    border-radius: 0;
}

html .RadWizard.rwzHorizontal .rwzBreadCrumb .rwzLink:before, html .RadWizard.rwzHorizontal .rwzBreadCrumb .rwzLink:after {
    width: 900%;
    top: 50%;
    border-width: 5px 0 0;
    border-color: #EAEEF1;
}

.html .RadWizard {
    padding: 20px;
    /*border: 1px solid #f1f1f1;
    border-bottom: 0;
    box-shadow: 0 0 0 1px #fff;*/
    box-shadow: none;
    border-radius: 0;
}

.html .RadWizard .rwzBreadCrumb .rwzText:before {
    display: none;
}

.html .RadWizard .rwzBreadCrumb .rwzLink {
    padding-left: 0;
}


.rwzImage {
/*    background-image: url(/Images/WizardIcons/enrollment-icons.png);*/
}

html .RadWizard .rwzBreadCrumb span.rwzImage {
    /*width: 24px;
    height: 24px;*/
    top: 2px;
    left: 8px;
}

html .RadWizard img {
    border-width: 0;
    max-height: 30px;
    max-width: 30px;
    top: 2px;
    left: 8px;
}

.html .deferralElections.rwzImage {
    /*    background-position: 0 0;*/
/*    background-image: url(/Images/WizardIcons/DeferralElections_Default.png);*/
}

.html .rwzSelected .deferralElections.rwzImage {
    /*    background-position: -25px 0;*/
/*    background-image: url(/Images/WizardIcons/DeferralElections_Active.png);*/
}

.html .rwzDisabled .deferralElections.rwzImage {
/*    background-position: -50px 0;*/
}


.html .payoutOptions.rwzImage {
    /*background-position: 0 -25px;*/
    background-image: url(/Images/WizardIcons/DistributionElections_Default.png);
}

.html .rwzSelected .payoutOptions.rwzImage {
    background-position: -25px -25px;
}

.html .rwzDisabled .payoutOptions.rwzImage {
    background-position: -50px -25px;
}


.html .contactDetails.rwzImage {
    background-position: 0 -50px;
}

.html .rwzSelected .contactDetails.rwzImage {
    background-position: -25px -50px;
}

.html .rwzDisabled .contactDetails.rwzImage {
    background-position: -50px -50px;
}


.html .confirmation.rwzImage {
    background-position: 0 -75px;
}

.html .rwzSelected .confirmation.rwzImage {
    background-position: -25px -75px;
}

.html .rwzDisabled .confirmation.rwzImage {
    background-position: -50px -75px;
}


.html .RadWizard .rwzContent {
    overflow: hidden;
    background-color: #f5f5f6;
    line-height: 2em;
    margin: 0 -20px;
    padding: 0 20px;
}

.html .RadWizard .rwzStep {
    height: 100%;
    position: relative;
}

.html .RadWizard.rwzComplete {
    padding-top: 95px;
}

.html .rwzStep p {
    margin: 0;
    padding: 10px 0;
}

.html .RadWizard .complete {
    height: auto;
    padding: 75px 0;
    text-align: center;
}

html .RadWizard .rwzSelected .rwzLink .rwzText:before {
/*    display: none;*/
}

[MBEN]

Hi Team Telerik,

Any update on this?

[Doncho]

Hi,

In general, Telerik Controls render HTML structures and apply some built-in stylesheets to achieve a certain appearance. If you would like to further customize that appearance, you will need to override the built-in styles. 

To do that, apply a 'strong' enough selectors to override the built-in ones. Check out the following articles for more information:

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Sample CSS you can try and customize further for achieving the desired appearance of the HTML elements inside the Step bar:

html body .RadWizard .rwzBreadCrumb a.rwzLink{
    text-align:-webkit-center;
}
html body .RadWizard .rwzBreadCrumb .rwzLink>.rwzImage{
    display:block;
}
html body .RadWizard .rwzBreadCrumb .rwzLink>.rwzText{
    max-width:100%;
}

To sum up, every style can be overridden, if you know what you want to style. For tips and tricks in finding that, you can take a look at the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

I hope this will help.

Kind regards,
Doncho
Progress Telerik

[MBEN]

This looked great on other browsers but Legacy Edge.

The images and step looks misaligned on legacy edge browser probably because of : text-align:-webkit-center;

Is there an alternative to that for edge? 

[Doncho]

Hi,

Here is another styling approach you can try:

html body .RadWizard .rwzBreadCrumb a.rwzLink > span:last-of-type {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
html body .RadWizard .rwzBreadCrumb .rwzLink > .rwzText {
    max-width: 100%;
}

It has no browser-depended attributes and should work fine on Edge also.

Please give it a try and let me know how it goes!

Kind regards,
Doncho
Progress Telerik