Replace "the end" with an image at the end of the timeline

katamui
asked 6 years ago

I’m trying to replace the small bubble at the end of the timeline (both on home page and on category pages) with an image. I’ve tried modifying the css like so:
#infscr-loading {
   background: url(path to image here);
   width: 70px;
   height: 70px;
   text-indent: -9999px;
   border: none;
   margin-left: -35px;
}
This works except that it also replaces the “loading” bubble as you scroll with the logo which I do not want. Is there a way that I can target just the very end and not the loading bubbles? I can’t find any css class to target just the end bubble and I’m not well versed in php or javascript. Thanks in advance.

4 Answers

DominicStaff
answered 6 years ago

At the moment, you just can change this section after loading.
you can use the following code:
.show-more.end {
   background: url(path to image here);
   width: 70px;
   height: 70px;
   text-indent: -9999px;
   border: none;
   margin-left: -35px;
}
NOTE: This work when you using the show more
Also, you can change the /loading-flat.gif file in the assets/img

katamui
replied 6 years ago

Thanks, but we are using infinite scrolling. Is there any way to put an image at the very end when using infinite scrolling?

Dominic Staff
replied 6 years ago

Please send me a screenshot of the detail position that you want to show the image. I will check it.

katamui
answered 6 years ago

As I’ve said, I’m using infinite scrolling and as the timeline loads, this is what you see:

When you get to the end, this is what you see:

This is what I want to show instead of the “THE END” bubble:

I am able to show it there by using the css that I included in my OP, but it also replaces the loading graphic which I do not want. I do not want to effect the loading graphic (it should continue to look as it does in my first screen shot), only replace the “THE END” bubble at the very bottom once all the timeline entries have loaded.

DominicStaff
answered 6 years ago

Ok, I know what you want. To resolve this issue, you can open the script.php in the “lib” folder. Find the line 49 and replace the code with the following code:
‘the_end’ => __(‘<img src=”http://localhost:8888/dw-update/dw-timeline-pro/wp-content/themes/dw-timeline-pro/assets/img/loading-default.gif”>’,’dw-timeline’),
Note: Change the image url with your link to your image. Please add your image to the Media of the site.

katamui
answered 6 years ago

Thanks for that… we’re getting there. The image now shows in the correct place, however, the white bubble is still behind it and it hangs off the bottom of the browser window. Here is a screen shot:

Any way to fix these two issues?

katamui
replied 6 years ago

UPDATE: I came up with a workaround for this using css which is acceptable to us so you don’t need to investigate further unless you want to. Thanks.

Dominic Staff
replied 6 years ago

Yes, please let me know if you have any issue or question about the theme, we will check and help you resolve it.