Home menu background and preloader gif

Hello,

I have two questions.
1- I wanted to add a black background to my menu (there isn’t on the homepage) with this CSS

.home .site-header {
  background-color: rgba(0,0,0,0.4) !important;
}

However it doesn’t work, why?

2- I wanted to change my preloader for another gif with this code
`.preloader .pre-bounce1, .preloader .pre-bounce2 {
display: none;

.preloader .spinner {
background: url(http://manoirdelavignette.ch/wp-content/uploads/2016/10/infinite-gif-preloader.gif);
width: 400px;
height: 300px;
background-repeat: no-repeat;
background-size: contain;’

But it didn’t work neither…

Can you help me please?

Thank you,
V.

website ; http://manoirdelavignette.ch/

Resolved: the preloader CSS is the source of both problem :slight_smile:

How can I change the preloader without using this code ?

Hi,

You must use a code to change the preloader, or that one you already added or in php, but you must use a code to change it, but the best way is by changing via the CSS code you already have.

Best Regards,
Csaba

ok, and where can find the image file of the current preloader ? I didn’t find it in the theme files …

Hi,

That’s not an image file it’s coded in header.php with this html:

<div class="preloader">
    <div class="spinner">
        <div class="pre-bounce1"></div>
        <div class="pre-bounce2"></div>
    </div>
</div>

and it’s designed in CSS, which you can find in style.css, line 1637 ( line nr. can be changed from version-to-version, so look around that line, maybe not exactly from the same line ):

.preloader {
	    background: none repeat scroll 0 0 #fff;
	    height: 100%;
	    opacity: 1;
	    position: fixed;
	    text-align: center;
	    transition: all 0.5s ease 0s;
	    width: 100%;
	    z-index: 9999;
	}
	.preloader .spinner {
	    height: 30px;
	    left: 50%;
	    margin-left: -15px;
	    margin-top: -15px;
	    position: relative;
	    top: 50%;
	    width: 30px;
	}
	.preloader .pre-bounce1,
	.preloader .pre-bounce2 {
	    -webkit-animation: 2s ease 0s normal none infinite bounce;
	            animation: 2s ease 0s normal none infinite bounce;
	    background-color: #de4939;
	    border-radius: 50%;
	    height: 100%;
	    left: 0;
	    opacity: 0.6;
	    position: absolute;
	    top: 0;
	    width: 100%;
	}
	.preloader .pre-bounce2 {
	    -webkit-animation-delay: -0.5s;
	            animation-delay: -0.5s;
	}
	@-webkit-keyframes bounce {
	  0%, 20%, 50%, 80%, 100% {
	    -webkit-transform: translateY(0);
	    transform: translateY(0);
	  }

	  40% {
	    -webkit-transform: translateY(-30px);
	    transform: translateY(-30px);
	  }

	  60% {
	    -webkit-transform: translateY(-15px);
	    transform: translateY(-15px);
	  }
	}

	@keyframes bounce {
	  0%, 20%, 50%, 80%, 100% {
	    -webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	    transform: translateY(0);
	  }

	  40% {
	    -webkit-transform: translateY(-30px);
	    -ms-transform: translateY(-30px);
	    transform: translateY(-30px);
	  }

	  60% {
	    -webkit-transform: translateY(-15px);
	    -ms-transform: translateY(-15px);
	    transform: translateY(-15px);
	  }
	}	
  • this is the full CSS code of the whole preloader section, so that’s it, there is no image file.

Best Regards,
Csaba

Thank you for your help and your patience Csaba, I’ll try to edit it.

Have a great day,
Vichard

Hi,

You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba