Home › Forums › Basel support forum › "Load More" button, change color on loading

"Load More" button, change color on loading

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 6, 2021 at 1:14 am #256027

    xsports81
    Participant

    Hello.
    I need to change the background color(black) on the button “Load more” when it loading the products.
    I add this snippet on “custom css” but I couldn’t fix it.

    body .products-footer .basel-products-load-more {
    border-color: #F2A1B2;
    color: #F2A1B2;
    text-transform: capitalize;
}

body .products-footer .basel-products-load-more:hover {
    border-color: #f5f5f5;
    border-width: 2px;
    background-color: #F2A1B2;
    color: white;
}
.products-footer .basel-load-more {
border-color:#F2A1B2;
color:#F2A1B2;
text-transform: capitalize;
background-color: white;
}

    Thanks in advance.

    Attachments:
    You must be logged in to view attached files.
    January 6, 2021 at 9:08 am #256072

    Elise Noromit
    Member

    Hello,

    You need to use this code only: 

    body .products-footer .basel-products-load-more {
    border-color: #F2A1B2;
    color: #F2A1B2;
    text-transform: capitalize;
}

body .products-footer .basel-products-load-more:hover {
    border-color: #f5f5f5;
    border-width: 2px;
    background-color: #F2A1B2;
    color: white;
}

    Clear the cache and check again.

    Best Regards

    January 6, 2021 at 11:22 am #256127

    xsports81
    Participant

    Hello.

    No luck. When loading the text-decoration is uppercase and still black background.
    Also when I remove this snippet of css 

    .products-footer .basel-load-more {
border-color:#F2A1B2;
color:#F2A1B2;
text-transform: capitalize;
background-color: white;
}

    when it stop loading the button state has other colors(take a look on attached picture).
    I attached on section “private Content” a link to screen record.

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    January 6, 2021 at 9:03 pm #256290

    Elise Noromit
    Member

    Hello,

    Please provide admin rights access.

    Best Regards

    January 6, 2021 at 9:24 pm #256297

    xsports81
    Participant

    Hello Elise.

    I have provided admin access.

    Best Regards

    January 7, 2021 at 6:32 pm #256549

    Elise Noromit
    Member

    Hello,

    I have tested the code in the Theme Settings: https://prnt.sc/wig2jg the code works correctly: https://gyazo.com/7dc7bb1fcd5b8bc300fb1d13d4bd6b8f

    I see you have duplicated styles: https://prnt.sc/wig3aq

    Change the colors as per your needs and remove the duplicated code.

    For now, I have set the CSS as it was.

    Best Regards

    January 8, 2021 at 1:32 am #256637

    xsports81
    Participant

    Hello.

    Thanks for your response.

    Maybe I didn’t explain it right, or you miss the video link that I’ve been attached on “Private Content”. I’m sending it again.

    The problem is when i click the button and start loading, the background is black. I want to change the black background color on loading state.

    Best Regards

    January 8, 2021 at 1:49 pm #256805

    Elise Noromit
    Member

    Hello,

    Please replace the code with this one: 

    body .main-page-wrapper .products-footer .basel-load-more {
		border-color: #F2A1B2;
    color: #F2A1B2;
    text-transform: capitalize;
    background-color: transparent;
}
body .main-page-wrapper .products-footer .basel-load-more:hover {
    color: #FFF;
		border-color: #F2A1B2;
    text-transform: capitalize;
    background-color: #F2A1B2;
}
body .basel-load-more.load-on-click+.basel-load-more-loader:after {
		border-color: #F2A1B2;
}

    Best Regards

    January 8, 2021 at 1:55 pm #256806

    xsports81
    Participant

    Wow, you’re amazing.

    Thanks for the support.

    You can close this topic.

    January 8, 2021 at 6:21 pm #256853

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘"Load More" button, change color on loading’ is closed to new replies.