The effects of alcohol on sustanon 250 leucine for – real weight loss & bodybuilding benefits?
How To Move Animate...
 
Share:
Notifications
Clear all

[Solved] How To Move Animated Gif and to middle of screen when comments are loading?

12 Posts
2 Users
1 Reactions
1,304 Views
Posts: 23
Topic starter
(@ronnie-tanner)
Eminent Member
Joined: 3 years ago

Is there an option to move the animated gif / progress indicator image from the top right to the middle of the screen, and change it to say something like "Comments are loading...."?

Β 

The reason is user's sometimes can't see the small image in the top right and think something is wrong. If they wait a few more seconds the cursor advances to the bookmarked comment, but it'd be nice to let them know immediately.

Topic Tags
11 Replies
Asti
Posts: 7211
 Asti
Support
(@asti)
Illustrious Member
Joined: 6 years ago

@ronnie-tanner,

You can use the following CSS code:

#wpdiscuz-loading-bar {
    width: 293px !important;
   top: 50% !important;
   right: 50%;
}
#wpdiscuz-loading-bar:before{
   content: "Comments are loading....";
   width: 293px !important;
   padding: 30px;
   display:inline-block;
   align-content: center;
}
div#wpdiscuz-loading-bar {
  background-repeat: no-repeat;
  background-position: 50%;
}

Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.

3 Replies
(@ronnie-tanner)
Joined: 3 years ago

Eminent Member
Posts: 23

@asti thank you. I've added the code and purged all caches but now I don't see the one in the top right nor the new one.

(@ronnie-tanner)
Joined: 3 years ago

Eminent Member
Posts: 23

I can see it for a brief moment on this link:

Β 

https://www.thepathoftruth.com/teachings/wrath-of-god.htm#comment-60093

Β 

Perhaps there is something on our website end that also causes the delay for the scroll to bookmark to begin?

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7211

@ronnie-tanner,

It works fine, please watch this video: https://www.screencast.com/t/YDtLHXW5

Posts: 23
Topic starter
(@ronnie-tanner)
Eminent Member
Joined: 3 years ago

Β 

comments loading

Hello! You all gave me instructions a while back toΒ  move the progress indicator.Β 

Β 

I've recently updated my CSS to load an animated GIF (See attached).

Β 

1) What I'd like to do is remove the text "Comments are loading" or at least change it to something that applies to all situations. How can I do that? I see CSS that is in the plugin:

#wpdiscuz-loading-bar:before{
content: "Comments are loading....";
width: 293px !important;
padding: 30px;
display:inline-block;
align-content: center;

Β 

However, if I add this code in the "Additional CSS" and change the text it doesn't actually change anything even after refreshing, purging caches. Am I missing something here?

Β 

Thank you

Β 

6 Replies
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7211

@ronnie-tanner,

The code works fine. Please leave a screenshot of the code where it is added. I need to see if everything is added correctly.Β 

(@ronnie-tanner)
Joined: 3 years ago

Eminent Member
Posts: 23
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7211

@ronnie-tanner,

The closed bracket is missing. Please add it as shown in the screenshot below and it'll work fine.Β 

image
(@ronnie-tanner)
Joined: 3 years ago

Eminent Member
Posts: 23

@asti I must be missing something else. This is what's in my CSS now. And here is a sample link: https://www.thepathoftruth.com/falsehood-exposed/diabolical-doctrines/trinity.htm#comment-63669

Β 

.comments-area{width:auto;}
.wpd-view-replies span{color: red;font-size:18px;cursor:pointer;}

#wpdiscuz-loading-bar:before{
content: "";
width: 293px !important;
padding: 30px;
display:inline-block;
align-content: center;
}

#wpdiscuz-loading-bar {
content:"";
width:64px;
height:64px;
top:50%!important;
left:50%!important;
margin-right: -50%;
transform: translate(-50%, -50%);
background-image: url(/wp-content/uploads/2023/04/spinner3-1.gif);
}

Β 

Β 

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7211

@ronnie-tanner,

You've added the CSS code in another place as well. Please watch this video: https://www.screencast.com/t/RjkaO6KxTGJx Β 

Please either remove the code previously added or add the !important statement to the content: "";Β  CSS rule.Β 

(@ronnie-tanner)
Joined: 3 years ago

Eminent Member
Posts: 23

@asti thank you, that did it. I'm not sure where I put the other instance but I added the "!important" tag and it fixed it.

Share: