Show preloader and use custom image

I used the css snippet I found here but it did not work. I tried to use a preloader plugin that was recommended by @Roman on another thread (sorry, I don’t have that link to the thread but the plugin is Preloader by Alobaidi) but it tells me to do something that I can not because I can’t find this- <body> -exactly in the functions.php file. There’s a <body but it’s not closed immediately and I’m not familiar enough with this to play around much. Any help would be greatly appreciated

Hello there,

I would suggest you use this CSS snippet as it’s easy to do. Make sure the group of your custom CSS code doesn’t contain any error. The easiest way to check it is to validate your code with this tool. Also make sure you’re properly include your preloader image URL.

Regards,
Kharis

So, interesting findings here… haha… I put in the snippet with my own image url, checked it with the tool you recommended, and it said it’s good but still nothing visible with the preloader. But then I checked the preloader code from your style.css and it came back with this- error log (here is the link if that doesn’t work- https://drive.google.com/file/d/0B6pGjPjgpISVTjVWWElFd0I4a28/view?usp=sharing)

Hello there,

Do you have other custom CSS code priors this? If so, please share your entire custom CSS code here.

Regards,
Kharis

Kharis,
This is everything in Customize>Additional CSS:

#secondary {
  background-color: #303030;
  color: #e8e8e8;
}

#secondary, #secondary a, 
#secondary .widget-title {
    color: #e8e8e8;
}

.preloader .pre-bounce1, .preloader .pre-bounce2 {
   display: none;
}
.preloader .spinner {
   background-image: url('http://localhost/wordpress/wp-content/uploads/2017/04/preloader-suffdeeds.gif');
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-size: contain;
}

I have also added this code using, I believe, Simple Custom CSS:

.page header.entry-header {
display:none
}

Please visit this image URL in your web browser.

http://localhost/wordpress/wp-content/uploads/2017/04/preloader-suffdeeds.gif

Is it valid? Please confirm.

Hi @Kharis. Yes, it is working. I made sure to not be signed in to wordpress, too, to make sure that wasn’t the reason it was working.

One other thing, not sure if it matters… it’s not a spinner, just a gif.

Got anything for me? Even a “I can’t help” would be good…

Hello there,

You have to create your own spinner GIF. You would need to use this tool or this one. Then upload your image into your site media library (Dashboard > Media > Add New). Then adjust the image URL par in this code:


.preloader .spinner {
   background-image: url('http://localhost/wordpress/wp-content/uploads/2017/04/preloader-suffdeeds.gif');
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-size: contain;
}

Regards,
Kharis

Hi Kharis,

I checked out those tools but those aren’t what I need. I already have a gif that I made myself, I do not need to add any effects to it and I do not need it to spin. I just need the gif I have to work. The latest code is only slightly different than the one before but I tried it anyway and still nothing.

There might be a line of CSS code that contains an error priors custom preloader. To verify, you can use this tool. If no error found, please share your site URL here, so I can take a closer look.

Regards,
Kharis

We did that already (although I did just do it again), there are no errors in the added css. But as I showed you in an earlier reply, there are however errors in style.css. 9 of them according to that checker. As far as I know I haven’t changed anything that would cause them to be there. Also don’t know if they would have any effect on the preloader. Unfortunately I’m still working with a localhost but here is my current style.css file if that helps.

The error which is found in the main theme’s style.css won’t affect custom CSS which stored in the Additional CSS in the customizer. Please share your final custom CSS code here once again.

Regards,
Kharis

You got it…

#secondary {
  background-color: #303030;
  color: #e8e8e8;
}

#secondary, #secondary a, 
#secondary .widget-title {
    color: #e8e8e8;
}

.preloader .spinner {
   background-image: url('http://localhost/wordpress/wp-content/uploads/2017/04/preloader-suffdeeds.gif');
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-size: contain;
}

Please try this:


#secondary {
  background-color: #303030;
  color: #e8e8e8;
}

#secondary, #secondary a, 
#secondary .widget-title {
    color: #e8e8e8;
}

.preloader .pre-bounce1, .preloader .pre-bounce2 {
   display: none;
}

.preloader .spinner {
   background-image: url('http://localhost/wordpress/wp-content/uploads/2017/04/preloader-suffdeeds.gif');
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-size: contain;
}

Make sure that your custom preloader image is accessible from your web browser. Visit this link
http://localhost/wordpress/wp-content/uploads/2017/04/preloader-suffdeeds.gif

Regards,
Kharis

Hi Kharis,
Checked the image url and pasted in that code, again, but still nothing.

Hello there,

I am really clueless at this point as it works fine on my test site. Please let me know once your site is live, so I can fix it directly on your site.

Regards,
Kharis

Kharis,
Ok, no worries. I’ve been stumped for a while now haha. I will come back to this when it’s live. Thanks for your help!

Hi all,

This post is a few month old but maybe someone can help me anyway.
I used this code and it seems to work:

    #secondary {
      background-color: #303030;
      color: #e8e8e8;
    }

    #secondary, #secondary a, 
    #secondary .widget-title {
        color: #e8e8e8;
    }

    .preloader .pre-bounce1, .preloader .pre-bounce2 {
       display: none;
    }

    .preloader .spinner {
       background-image: url('http://localhost/wordpress/wp-content/uploads/2017/04/preloader-suffdeeds.gif');
       width: 30px;
       height: 30px;
       background-repeat: no-repeat;
       background-size: contain;
    }

But when width and height are at 30px, it seems to be centered. But this is too small for me, so I raised it to 200px.
Now it seems not to be centered anymore, it´s more on the right down site.
Are there some CSS codes that can center it again?

Best regards

heusmich