Home Forums Basel – Premium Template "Load More" button

This topic contains 12 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 day, 23 hours ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #197277
    Medapi
    Medapi
    Customer

    Hello,
    How do i Change the Colors in The Basel theme of this Button?

    I tried with this: In Global CSS

    body .basel-load-more {
        padding-top: 12px;
        padding-right: 25px;
        padding-bottom: 12px;
        padding-left: 25px;
        border-color: #c19a5c;
        color: #c19a5c;
        font-weight: 900;
        border-width: 2px;
    }
    body .basel-load-more:hover {
        padding-top: 12px;
        padding-right: 25px;
        padding-bottom: 12px;
        padding-left: 25px;
        border-color: #c19a5c;
        color: #ddaf65;
        font-weight: 900;
        border-width: 2px;
    	  background:yellow;
    }

    ( https://d.pr/i/6nw39e ) <<– This Button

    Greetings

    Private Content Hidden
    #197340

    Hello,

    I have viewed a few pages on your site and do not see this button on the site, please provide page URL. where I can see it.

    Here is the code for Load more button in the shop page:

    body .products-footer .basel-products-load-more {
        border-color: red;
        border-width: 2px;
        font-weight: 600;
        background-color: transparent;
        color: red;
    }
    
    body .products-footer .basel-products-load-more:hover {
        border-color: red;
        border-width: 2px;
        font-weight: 600;
        background-color: red;
        color: white;
    }

    Best Regards

    #197451
    Medapi
    Medapi
    Customer

    Hello,

    here u can find it, on the Bottom. On The Link in Private!

    It´s the only page with most Products.

    Thx i will Try it!

    Private Content Hidden
    #197452
    Medapi
    Medapi
    Customer

    Okay The CSS works great!

    And the Color for the “Spinner”? How to Change it?
    On Hover it is White that´s okay.

    Greetings.

    #197600

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .products-footer .basel-products-load-more:after{
    border: 1px solid #000;
    }

    Best Regards

    #198067
    Medapi
    Medapi
    Customer

    Thank u, but it does nothing 😉
    I want change The Color of the Little Spinner in the Button.

    #198192

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .product-footer .basel-products-load-more:after{
    border:1px solid red;
    }

    Best Regards

    #199290
    Medapi
    Medapi
    Customer

    hey THX.
    But it won´t work anyway..

    i tried this for the “Blog” site, but it won´t work, a solution for this?

    body .blog-footer .basel-blog-load-more {
        border-color: black;
        border-width: 2px;
        font-weight: 600;
        background-color: transparent;
        color: #c19a5c;
    }
    
    body .blog-footer .basel-blog-load-more:hover {
        border-color: black;
        border-width: 2px;
        font-weight: 600;
        background-color: #c19a5c;
        color: white;
    }
    Private Content Hidden
    #199583

    Hello,

    Please delete the previous code and add this one both for the product page and for the blog:

    .products-footer .basel-products-load-more:after,
    .products-footer .basel-products-load-more:hover:after,
    .products-footer .basel-products-load-more:focus:after,
    .blog-footer .basel-blog-load-more:after,
    .blog-footer .basel-blog-load-more:hover:after,
    .blog-footer .basel-blog-load-more:focus:after {
      border-color: red;
    }

    Change the color as per your needs.

    https://gyazo.com/e47a785e31d872ab6bc8ab0656a616b6

    Best Regards

    #200074
    Medapi
    Medapi
    Customer

    Thank U! Very much!

    Now the CSS works 🙂

    and another question, the Button on the Blog Page is after the first klick “Black” how to handle with it? (see video https://d.pr/v/uJNdU8 )

    .products-footer .basel-products-load-more:after,
    .products-footer .basel-products-load-more:focus:after,
    .blog-footer .basel-blog-load-more:after,
    .blog-footer .basel-blog-load-more:focus:after {
      border-color: #c19a5c;
    }
    body .products-footer .basel-products-load-more,
    			.blog-footer .basel-blog-load-more{
        border-color: black;
        border-width: 2px;
        font-weight: 600;
        background-color: transparent;
        color: #c19a5c;
    }
    
    body .products-footer .basel-products-load-more:hover,
    		 .blog-footer .basel-blog-load-more:hover{
        border-color: black;
        border-width: 2px;
        font-weight: 600;
        background-color: #c19a5c;
        color: white;
    }
    
    .products-footer .basel-products-load-more:hover:after,
    .blog-footer .basel-blog-load-more:hover:after{
      border-color: white;
    }
    

    i modified the code for my design.

    Private Content Hidden
    #200306

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .blog-footer .basel-blog-load-more:focus{
    	  background-color: red;
        border-color: red;
        color: #fff;
    }
    .products-footer .basel-products-load-more:focus {
    	  background-color: red;
        border-color: red;
        color: #fff;
    }

    Set the color as per your needs.

    Best Regards

    #200372
    Medapi
    Medapi
    Customer

    NICE!
    Big THX 🙂

    U can Close this 😀

    #200414

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

    Best Regards

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘"Load More" button’ is closed to new replies.