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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.