Remove tick mark in li and add text in it

[srevoju]

Hi,
I need to add text inside round li (by increasing width - looks like a rounded button) instead of tick mark.and remove text out side li(which is on top)
Please help.

Thank you!

[Krishi1110]

Even I need to add text into li's, could any one please help!
Thank you in advance.

[brennondenny]

The "text out side li" is the step name, so you can set that to "" if you want it to be empty.

{name: 'CHANGE NAME HERE', component: <Step1 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},

To add text or remove the tick mark from the progress tracker, you can add css and html to the renderSteps return.

  renderSteps() {
    return this.props.steps.map((s, i) => (
      <li
        className={this.getClassName('progtrckr', i)}
        onClick={evt => {
          this.jumpToStep(evt);
        }}
        key={i}
        value={i}
      >
        <em>{i + 1}</em>
        <span>{this.props.steps[i].name}</span>
      </li>
    ));
  }

[newbreedofgeek]

Thanks for the clarification. Yes, the LIs only hold the “name” of the step. The rest is all done via CSS do you should be able to use CSS to do this. Closing for now. Also check this out - #113

[newbreedofgeek]

@brennondenny on a side node, I've added you as a collaborator to this project as you have been helping a lot with solving tickets. Hope you accept and help us grow StepZilla.