Wizard icon size - How to increase them?

Hello everyone, I am trying to increase this wizard icon's size, but I don't know how I can do this. I've tried to set its size to Size_4x but the icon remains in the same size. Somebody could help me with this? Thanks!

Hi Daniel,

Is this Traditional or Reactive?

I will take reactive to explain my thought, by default the navigation wizard icon has the following css:

.wizard-item-icon .icon {
    font-size: var(--font-size-xs);
    width: auto;
}

where --font-size-xs: 12px;

So, that's your size not being overridden with the selection of 4x size.

Quick workaround could be to override the css in your module/screen to something like:

.wizard-item-icon .icon {
    font-size: 4em !important;
}

Please note that you will have to take care of the enclosing container as well if that is fixed size.

Daniel Almeida wrote:

Hello everyone, I am trying to increase this wizard icon's size, but I don't know how I can do this. I've tried to set its size to Size_4x but the icon remains in the same size. Somebody could help me with this? Thanks!


Hi Daniel


If possible could you please share oml so that we can make changes


Akshay Puri wrote:

Hi Daniel,

Is this Traditional or Reactive?

I will take reactive to explain my thought, by default the navigation wizard icon has the following css:

.wizard-item-icon .icon {
    font-size: var(--font-size-xs);
    width: auto;
}

where --font-size-xs: 12px;

So, that's your size not being overridden with the selection of 4x size.

Quick workaround could be to override the css in your module/screen to something like:

.wizard-item-icon .icon {
    font-size: 4em !important;
}

Please note that you will have to take care of the enclosing container as well if that is fixed size.

Hello Akshay. I'm using traditional web. I've tried to override my current css with the css that you shared, but it does not work. I don't know what I am doing wrong... I'm sending my current CSS, so you can check it.


Salman Ansari wrote:

Daniel Almeida wrote:

Hello everyone, I am trying to increase this wizard icon's size, but I don't know how I can do this. I've tried to set its size to Size_4x but the icon remains in the same size. Somebody could help me with this? Thanks!


Hi Daniel


If possible could you please share oml so that we can make changes


Hello Salman! Thanks for replying! Sorry, but I can't share this oml, it's an internal project, I don't have permissions to do this..  =/


Solution

Hi Daniel,

Could you please try changing your css class with the highlighted changes below. Again, you will have to take care of the enclosing container as well if you see this working.

From:

.wizard-item-icon{
    background-color: transparent;
    border: none;
    color: var(--color-neutral-7);
}

To:

.wizard-item-icon .fa-fw{
    font-size: 4em !important;
    background-color: transparent;
    border: none;
    color: var(--color-neutral-7);
}
Solution

Akshay Puri wrote:

Hi Daniel,

Could you please try changing your css class with the highlighted changes below. Again, you will have to take care of the enclosing container as well if you see this working.

From:

.wizard-item-icon{
    background-color: transparent;
    border: none;
    color: var(--color-neutral-7);
}

To:

.wizard-item-icon .fa-fw{
    font-size: 4em !important;
    background-color: transparent;
    border: none;
    color: var(--color-neutral-7);
}

Thank you very much, Akshay. It has worked properly! Now my icon size fits way better. Could you help me with one more thing? When my wizard item is set to "past", its background-color becomes red. Where can I change its background-color to another color? I think that I can change it at this, but I'm not sure:


.wizard-wrapper-item.past .wizard-item-icon {
    color: var(--color-secondary);
}

Sorry, I'm not so good at CSS. Anyway, thanks again!


Hi Daniel,

I am glad it helped. On the past state color, I am not able to find the wrapper class you've mentioned in the latest platform version. However, could you please try below 2 things if any of these work?

  1. .wizard-wrapper-item.past .wizard-item-icon {
        color: var(--color-secondary) !important;
    }
  2. .wizard-item.past .wizard-item-icon {
        background-color: var(--color-secondary) !important; /*Add the required color*/
        border-color: var(--color-secondary) !important; /*Add the required color*/
    }
     

Akshay Puri wrote:

Hi Daniel,

I am glad it helped. On the past state color, I am not able to find the wrapper class you've mentioned in the latest platform version. However, could you please try below 2 things if any of these work?

  1. .wizard-wrapper-item.past .wizard-item-icon {
        color: var(--color-secondary) !important;
    }
  2. .wizard-item.past .wizard-item-icon {
        background-color: var(--color-secondary) !important; /*Add the required color*/
        border-color: var(--color-secondary) !important; /*Add the required color*/
    }
     

Hi Akshay, thanks again! You have helped me a lot!


Cheers Daniel :)