Question

CSS modern designer color pagination buttons

Laserfiche Cloud Forms Layout Designer

Updated January 25, 2024

asked on January 25, 2024

Hi, the standard pagination buttons colour is wrong for our form but i can't seem to select the button background, this is my CSS

 .form-pagination-btn .pagination-btn.next-btn{
    color: #fff;
    background-color: #8A235B;
    font-family: Open Sans,Arial;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 4px;
    box-shadow: 0 1px 2px #000;
    border: none;
}

this is the standard css from the K12 tools

.pdc-b0270154-4154-4e25-ab46-da3524372522 .form-pagination-btn .pagination-btn.next-btn {
    font-family: Arial;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: inherit;
    font-style: normal;
    text-decoration: normal;
    background-color: #65873B;
    border-top-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    border-right-color: #000000;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
}

I need to customise the background colour but how do i select it?

0 0

Answer

SELECTED ANSWER

replied on January 25, 2024

This worked for me in an on prem environment:

.form-pagination-btn .pagination-btn.next-btn{
    color: #fff;
    background-color: #8A235B;
}

If it isn’t working for you in cloud, then I would be suspecting this is one of the areas where cloud and on prem differ in structure.

But since you posted the structure that your browser is showing (at least I think that is what you are saying, I don’t actually know what you mean by “K12 Tools”), and the selectors match, it isn’t directly obvious why it isn’t working for you.

You could try using the important setting on the CSS:

.form-pagination-btn .pagination-btn.next-btn{
    color: #fff!important;
    background-color: #8A235B!important;
}

1 0

Replies

replied on January 25, 2024

Hi Matthew, many thanks for your suggestion. I'd tried what you suggested initially and it would not change but i didn't know about !important and that was it. Worked like a charm - many thanks.

1 0

replied on January 25, 2024

PS: K12 was a typo, i meant F12 Developer Tool in the element styles - sorry for the confusion there.

0 0

replied on January 25, 2024

Oh! haha! That makes a lot more sense! I had even Googled K12 and couldn't even find anything that wasn't related to public schools.

1 0

You are not allowed to follow up in this post.

Question

Question

CSS modern designer color pagination buttons

Answer

Replies

Sign in to reply to this post.