"Load More" button

This topic has 12 replies, 2 voices, and was last updated 4 years, 9 months ago by Elise Noromit.

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

Author

Posts

May 23, 2020 at 12:57 pm #197277

Medapi

Participant

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

May 23, 2020 at 6:41 pm #197340

Elise Noromit

Member

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

May 24, 2020 at 9:42 am #197451

Medapi

Participant

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!

May 24, 2020 at 9:47 am #197452

Medapi

Participant

Okay The CSS works great!

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

Greetings.

May 25, 2020 at 6:30 am #197600

Elise Noromit

Member

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

May 26, 2020 at 3:28 pm #198067

Medapi

Participant

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

May 27, 2020 at 6:57 am #198192

Elise Noromit

Member

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

May 30, 2020 at 6:43 pm #199290

Medapi

Participant

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;
}

June 1, 2020 at 8:03 am #199583

Elise Noromit

Member

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

June 2, 2020 at 7:47 pm #200074

Medapi

Participant

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.

June 3, 2020 at 12:56 pm #200306

Elise Noromit

Member

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

June 3, 2020 at 4:20 pm #200372

Medapi

Participant

NICE!
Big THX 🙂

U can Close this 😀

June 3, 2020 at 8:13 pm #200414

Elise Noromit

Member

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

Best Regards