Docs

[scotshurdler]

Hi Folks,

I’ve attached a picture showing a password protected page and i wonder if above where says password protected etc, is it possible to insert an image banner we’ve made?

[scotshurdler]

This reply has been marked as private.

[scotshurdler]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.post-password-form p:first-child {
    background-image: url('//testsitetestground.com/wp-content/uploads/2016/02/summerside-logo-length.png');
    padding: 100px;
}

And then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.post-password-form p:first-child').html('');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[scotshurdler]

Thanks guys, i uploaded the actual graphic to media folder and when i use the url for that in place of the url you’ve used there, the picture actually disappears all together but there looks to be a space as if something is there.

Many Thanks

Neale

[Lely]

Hello Neale,

Please update your custom CSS to this:

.post-password-form p:first-child {
    background-image: url('http://testsitetestground.com/wp-content/uploads/2016/05/Summerside-Gallery.jpg');
    padding: 170px;
    background-position-x: center;
    background-position-y: 64%;
}

Feel free to adjust the values accordingly.

Hope this helps.

[scotshurdler]

Ahh brilliant, thanks guys! Last question relating to that i promise, playing around with the values I see that i can position it differently, in terms of scaling the image down is there a value i can use for that?

[scotshurdler]

Scratch that, did a little digging and found the background size command which allows me to expand and contract the image.

Thanks for all your help!

Neale

[Rahul]

You are welcome!

[scotshurdler]

I’ve just noticed on mobile view, this image repeats around 3 times on my screen, how would we make that only show once like on the desktop/laptop?

Many Thanks

N

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 480px){
    .post-password-form p:first-child {
        background-repeat: no-repeat;
        background-position-y: 50%;
    }
}

Hope it helps 🙂

[scotshurdler]

Seems to do the trick!

Many Thanks,

N

[Christian]

You’re welcome. Glad we could help. 🙂

[scotshurdler]

Apologies, one more question came up on this, I’ve added a second password protected page, which automatically displays the image from the first one. Is there a way to allocate an image specifically to that second page titled “newsletter”?

Kind Regards,

N

[Christian]

Please get your newsletter’s page ID class (see https://community.theme.co/kb/how-to-locate-post-ids/) then duplicate the previously given code and append the class like so

.page-id-1755 .post-password-form p:first-child {
    background-image: url('URL of image');
}

Thanks.

[Author]

Posts