Target pagination dots

  • Resolved ricklock

    (@ricklock)


    6 months ago

    How do I target pagination dots in multi step (page break) forms?
    In default appearance, the colors for current step and previous steps are all the same (Current state colors) and next steps are a different color (Default state colors).
    When I target each step dot through additional CSS:

    .forminator-step-10 .forminator-step-dot {
        background-color: red !important;
    }

    I can also use “aria-selected” to target the current step dot:

    .forminator-step-10[aria-selected="true"] .forminator-step-dot {
        background-color: blue !important;
    }

    but this results in only the current step dot being that blue color, not the previous steps with custom colors. They revert back to their custom colors.
    What I wish is the following:
    1. Choose default color for all unfinished (on the right of the current) steps (red)
    2. Change current step dot color by targeting each step dot (step-1 dot:pink, step-2 dot:blue etc.)
    3. All previous (finished, on the left of the current) steps to keep their new custom color (pink, blue)

    I cannot figure out how to actually target previous steps without targeting next steps. Does the pagination keep state in some way?
    Current step is obviously easy due to “aria-selected”.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @ricklock

    Hope this message finds you well.

    Currently, is not possible to change the colors from Forminator Appearance doesn’t have such feature, but this CSS should help:

    1. Choose default color for all unfinished (on the right of the current) steps (red)

    .forminator-ui#forminator-module-484.forminator-design--default .forminator-pagination-steps .forminator-step.forminator-current~.forminator-step .forminator-step-dot {
    background-color: red;
}

    2. Change current step dot color by targeting each step dot (step-1 dot:pink, step-2 dot:blue etc.)
    3. All previous (finished, on the left of the current) steps to keep their new custom color (pink, blue)

    .forminator-ui#forminator-module-484.forminator-design--default .forminator-pagination-steps .forminator-step-0 .forminator-step-dot {
    background-color: pink;
}

    You might need to update the 484 with your Form ID here:

    forminator-module-484

    To target each step for #2 and #3 which use the same CSS, you need to update the number, in this case, 0, here:

    .forminator-step-0

    The results will look like this:

    https://prnt.sc/Ygboo8OHl6oM

    Let us know if you require additional assistance.

    Best regards,
    Laura

    Thread Starter ricklock

    (@ricklock)

    Seems to be working great, although I cannot get it to work from the form Custom CSS, only from my page Custom CSS.

    Issue resolved. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Target pagination dots’ is closed to new replies.