Password Protection for a site not visually readable

edited February 2018 in Theme Options
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

Comments

  • edited 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
  • 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
  • I have recreated the page again:
    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.
  • Try using this custom css
    body.page-id-1029 #Content{
    background:#000 !important;
    }
    body.page-id-1029 #Subheader {
    background:#000 !important;
    padding-top:100px;
    }
  • Hello and thank you, but where is the background image?
  • 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
  • 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
  • Try removing the browser cache in your chrome browser, it is probably holding the css.
    thanks
  • OK, I deleted the browser cache in chrome. -> no change.
    See screenehot
    Greetings Daniel
    image
  • 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;
    }

  • 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?
  • Since this is an input form you should be able to change its colors in theme options>colors>forms
    Please try that.
    thanks
  • 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
  • You can use this css to set a background image
    body.page-id-1029 {
    background:url("URLtoIMG")no-repeat center center;
    background-size:cover;
    }
  • 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-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;
    }
  • 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
  • edited 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
  • It is complete, I do not understand your question.
  • Please have a look at your own post from 28.03.18.
  • 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.
  • what is missing please in this URL?
    If you click on the url you will get directly to the background picture.
  • Nothing, everything is fine.
  • 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-size:cover;
    }



    Greetings Daniel
  • You would have to also disable the wrapper background because it covers the background image.
    body.page-id-1029 #Wrapper, #Content {
    background:transparent !important;
    }
  • ok i try it, why did not you send it along right away?
  • edited April 2018
    OK, I have inserted it, unfortunately no change.

    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-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;
    }
  • 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?
  • Daniel-Hannover
    You can ofcourse use cache plugins like w3 total cache.
    thanks
Sign In or Register to comment.