Load More translate and styling

This topic has 12 replies, 4 voices, and was last updated 1 year, 9 months ago by David Beckwith.

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

Author

Posts
May 29, 2018 at 11:02 am #4725

Rolandas
Participant

Hi

I can’t find where to translate Load More button (Pagination> AJAX Pagination) or Next → (Pagination) like Read more button at Content.
and how styling Load More button (for example, like Read more button at Content> Read more background, Read more background hover, Read more text etc.)

May 29, 2018 at 9:03 pm #4734
Tom
Keymaster
Hi there,

You’d need to use a filter for that currently:
```
add_filter( 'wpsp_ajax_load_more', 'tu_custom_load_more_text' );
function tu_custom_load_more_text() {
    return 'Load more text';
}
```
The load more button inherits the read more button styling right now. You can target the class with CSS and adjust it as needed though.

Let me know if you need more info 🙂
May 30, 2018 at 12:53 am #4736

Rolandas
Participant

Hi
I used the filter and now OK with the button translation.
But ‘Load more’ button don’t inherits the ‘Read more” button styling. Maybe there’s a chance to inherit the style?

June 1, 2018 at 8:59 pm #4754

Tom
Keymaster

That’s strange – any chance you can link me to the page?

June 5, 2018 at 1:59 am #4781

Rolandas
Participant

http://www.sisla.lt/

June 5, 2018 at 10:33 pm #4788
Tom
Keymaster
That’s strange, you can edit it like this for now:
```
a.wp-show-posts-read-more, 
a.wp-show-posts-read-more:visited {
    background-color: #222;
    color: #fff;
}

a.wp-show-posts-read-more:hover {
    background-color: #fff;
    color: #222;
}
```
May 28, 2019 at 7:05 am #9558
Rolandas
Participant
Hi

With translation “Load More” everything is OK.

But with styling NOT.
Look: https://www.sisla.lt/testas-4/ or https://www.sisla.lt/

NO have effect on “Load More” button (now is translated to “Daugiau įrašų”)
! After visiting background-color: black, text-color: White.
```
a.wp-show-posts-read-more, 
a.wp-show-posts-read-more:visited {
    border: 1px solid #222;
    background-color: #fff;
    color: #222;
}
```
THIS have effect on “Load More” button (now is translated to “Daugiau įrašų”)
```
a.wp-show-posts-read-more:hover {
    border: 1px solid #222;
    background-color: #b72e09;
    color: #fff;
}
```
- This reply was modified 1 year, 9 months ago by Rolandas.
May 28, 2019 at 7:09 am #9560

Rolandas
Participant

Is it possible to translate (change) the word “Loading …”
Which is visible until new posts are loaded?

May 28, 2019 at 4:22 pm #9569
Tom
Keymaster
Do this instead:
```
a.wp-show-posts-read-more:hover,
a.wp-show-posts-read-more:focus {
    border: 1px solid #222;
    background-color: #b72e09;
    color: #fff;
}
```
As for the loading text, do this:
```
add_filter( 'wpsp_ajax_loading', function() {
    return 'Your text here';
} );
```
May 29, 2019 at 1:56 am #9573

Rolandas
Participant

Thank you very much 🙂

May 29, 2019 at 3:41 pm #9590

Tom
Keymaster

You’re welcome 🙂

June 3, 2019 at 9:52 am #9685

Liam
Participant

Please excuse my ignorance, but where would I add this filter? Thanks.

June 4, 2019 at 2:18 pm #9718

David Beckwith
Participant

Hi there,

that filter function needs to be added to either your child theme function.php or use the Code Snippets plugin to add the code.
Author

Posts

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

You must be logged in to reply to this topic.

[Resolved] Load More translate and styling