Password Protection for a site not visually readable

Daniel-Hannover · February 2018

Look at the page with password protection.
Something you can not expect the customer.
Has this question never occurred to you?
Info:It is not about the Wordpress login page, but about the password when I secure a certain page with a password.
Sample-Link: http://daniel-schoenemann.de/password-test/
Greetings Daniel

Daniel-Hannover · February 2018

I found out the following:
With: 

.post-password-form {
    margin-top: 200px;
}

Can I move the form down a bit.
How do I get a background image on the page?
Or is there a plugin for me?
Here is a link to the page:http://daniel-schoenemann.de/password-test/

Greetings Daniel

Bryan · February 2018

HI,
sorry but it is unclear what do you want to achieve exactly, could you send some screenshots?
We see this: http://prntscr.com/igsxfz
thanks

Daniel-Hannover · February 2018

I have recreated the page again:

http://daniel-schoenemann.de/password-test/

You can not even see the password field because the background is white.

Also the menu is not visible.

I would love to insert a background picture.

Bryan · February 2018

Try using this custom css

body.page-id-1029 #Content{
	background:#000 !important;
}
body.page-id-1029 #Subheader {
	background:#000 !important;
	padding-top:100px;
}

Daniel-Hannover · February 2018

Hello and thank you, but where is the background image?

Bryan · February 2018

We do not know where is your background image.
You can read this to modify the css:
https://www.w3schools.com/css/css_background.asp

Daniel-Hannover · March 2018

Sorry but with the CSS content happening in chrome nothing. Internet Explorer turns the background black.

It has to work with both browsers.

body.page-id-1029 #Content{
	background:#000 !important;
}
body.page-id-1029 #Subheader {
	background:#000 !important;
	padding-top:100px;
}

Greetings Daniel

Bryan · March 2018

Try removing the browser cache in your chrome browser, it is probably holding the css.
thanks

Daniel-Hannover · March 2018

OK, I deleted the browser cache in chrome. -> no change.

See screenehot

Greetings Daniel

Daniel-Hannover · March 2018

Here are my current CSS adjustments:

.tr-menu.header-fixed #Top_bar:not(.is-sticky) {

background: rgba(255,255,255,0.3) !important;

}

#Top_bar.is-sticky {

background: rgba(255,255,255,0.8) !important;

}

/* Progress icons */

.progress_icons .progress_icon { color: rgba(0, 0, 0, 0.7); height: 40px; line-height: 38px; width: 40px; font-size: 24px; }

.progress_icons .progress_icon:not(.themebg) { background: rgba(255, 252, 252, 0.3); }

/* Form */

.dark input[type="submit"] { color: #000000; font-weight: 700; }

.header-transparent #Top_bar.is-sticky .menu_wrapper .menu > li:not(.current-menu-item) > a { color: #000; }

.post-password-form {

margin-top: 200px;

}

#Top_bar a.responsive-menu-toggle i { font-size: 30px !important; }

#Top_bar #menu { background: #000 !important; }

}

div.pp_default .pp_nav { display: none !important; }

div.pp_default .pp_description { display: none !important; }

div.pp_default .pp_next {

background: url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat !important;

cursor: pointer !important;

}

div.pp_default .pp_previous {

background: url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat !important;

cursor: pointer;

}

Daniel-Hannover · March 2018

Unfortunately, you can not recognize the menu as it is white on a white background.

It must be possible to make this site a bit nicer.

Do not the customers ask something?

Bryan · March 2018

Since this is an input form you should be able to change its colors in theme options>colors>forms
Please try that.
thanks

Daniel-Hannover · March 2018

OK I could change the background of the password field to a different color.
How can I insert a background image in full screen for the CSS page?
Would you send me the CSS code for this?

Greetings Daniel

Bryan · March 2018

You can use this css to set a background image

body.page-id-1029 {
	background:url("URLtoIMG")no-repeat center center;
	background-size:cover;	
}

Daniel-Hannover · March 2018

ody.page-id-1029 {
	background:url("URLtoIMG")no-repeat center center;
	background-size:cover;	
}

I have adapted the link to the background image.

Unfortunately, the wallpaper is not displayed.

Hello, here are my current CSS adjustments including the last ones:

Greetings Daniel

.tr-menu.header-fixed #Top_bar:not(.is-sticky) {

background: rgba(0,0,0,0.3) !important;

}

#Top_bar.is-sticky {

background: rgba(0,0,0,0.8) !important;

}

/* Progress icons */

.progress_icons .progress_icon { color: rgba(0, 0, 0, 0.7); height: 40px; line-height: 38px; width: 40px; font-size: 24px; }

.progress_icons .progress_icon:not(.themebg) { background: rgba(255, 252, 252, 0.3); }

/* Form */

.dark input[type="submit"] { color: #000000; font-weight: 700; }

.header-transparent #Top_bar.is-sticky .menu_wrapper .menu > li:not(.current-menu-item) > a { color: #000; }

.post-password-form {

margin-top: 200px;

}

body.page-id-1029 {

background:url("http://www.daniel-schoenemann.de/wp-content/uploads/2018/01/Galerie-Backround.jpg")no-repeat center center;

background-size:cover;

}

#Top_bar a.responsive-menu-toggle i { font-size: 30px !important; }

#Top_bar #menu { background: #000 !important; }

}

div.pp_default .pp_next {

background: url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat !important;

cursor: pointer !important;

}

div.pp_default .pp_previous {

background: url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat !important;

cursor: pointer;

}

.pp_gallery {

display: none !important;

}

.pp_nav {

display: none !important;

}

Bryan · March 2018

Okay add this:

body.page-id-1029 {
	background:url("URLtoIMG")no-repeat center center;
	background-size:cover;	
}
body.page-id-1029  #Content {
	background-color:transparent !important;
	min-height:700px !important;
}

And please give full path URL to the images, I see you do not do that.
thanks

Daniel-Hannover · April 2018

ok i will test it and report it.

Why is the link to the background image not complete?

http://www.daniel-schoenemann.de/wp-content/uploads/2018/01/Galerie-Backround.jpg

The link works. Please try it yourself

Grüße Daniel

Bryan · April 2018

It is complete, I do not understand your question.

Daniel-Hannover · April 2018

Please have a look at your own post from 28.03.18.

Bryan · April 2018

Sorry but I still do not understand.
I just metioned that you need to paste the whole URL with htttp:// if you did that then it is fine.

Daniel-Hannover · April 2018

what is missing please in this URL?

http://www.daniel-schoenemann.de/wp-content/uploads/2018/01/Galerie-Backround.jpg

If you click on the url you will get directly to the background picture.

Bryan · April 2018

Nothing, everything is fine.

Daniel-Hannover · April 2018

everything works fine so the link is complete, why do not I put the picture as a background?
or is the css customization wrong?

body.page-id-1029 {

background:url("http://www.daniel-schoenemann.de/wp-content/uploads/2018/01/Galerie-Backround.jpg")no-repeat center center;

background-size:cover;

}

Greetings Daniel

Bryan · April 2018

You would have to also disable the wrapper background because it covers the background image.

body.page-id-1029 #Wrapper, #Content {
	background:transparent !important;
}

Daniel-Hannover · April 2018

ok i try it, why did not you send it along right away?

Daniel-Hannover · April 2018

OK, I have inserted it, unfortunately no change.

http://daniel-schoenemann.de/password-test/

Here are the current adjustments:

.tr-menu.header-fixed #Top_bar:not(.is-sticky) {

background: rgba(0,0,0,0.3) !important;

}

#Top_bar.is-sticky {

background: rgba(0,0,0,0.8) !important;

}

/* Progress icons */

.progress_icons .progress_icon { color: rgba(0, 0, 0, 0.7); height: 40px; line-height: 38px; width: 40px; font-size: 24px; }

.progress_icons .progress_icon:not(.themebg) { background: rgba(255, 252, 252, 0.3); }

/* Form */

.dark input[type="submit"] { color: #000000; font-weight: 700; }

.header-transparent #Top_bar.is-sticky .menu_wrapper .menu > li:not(.current-menu-item) > a { color: #000; }

.post-password-form {

margin-top: 200px;

}

body.page-id-1029 #Wrapper, #Content {

background:transparent !important;

}

body.page-id-1029 {

background:url("http://www.daniel-schoenemann.de/wp-content/uploads/2018/01/Galerie-Backround.jpg")no-repeat center center;

background-size:cover;

}

#Top_bar a.responsive-menu-toggle i { font-size: 30px !important; }

#Top_bar #menu { background: #000 !important; }

}

.pp_gallery {

display: none !important;

}

.pp_nav {

display: none !important;

}

Bryan · April 2018

It works, http://prntscr.com/jb5d5c
Clear your cache.

Daniel-Hannover · May 2018

OK thanks,

how can I display the wallpaper as a full screen on different monitor sizes / laptops, pads / tablets?

Cache:

now after 2 days it works.

I delete the cache in Internet Explorer and chrome. but the changes are not immediately visible.

Can I also cache myself in wordpress?

Bryan · May 2018

Daniel-Hannover
You can ofcourse use cache plugins like w3 total cache.
thanks

Password Protection for a site not visually readable

Comments