Aritcles Protected By Password

  • Unknown's avatar

    Hello there, i’m here to ask a little question today :

    Is there a way to change the “protected by password” features that are shown, before you put the password to unlock an article.

    To explain simply : I’d like that all the protected posts have a picture and a link to explain how to get the password to access the article.

    I’m using premium Css Customisation.
    And the theme Creator said to ask in General section, since it’s a general feature of WordPress.

    Thanks in advance,
    Layne from Laynaria.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi there, can you point me to a password protected post on your site? I checked your posts listing and do not see any password protected posts. We could add a little text with custom CSS, but we can’t add a link with CSS.

  • Unknown's avatar

    Ah right now we didn’t start to make any,
    i’m asking in advance to know how to do that.

    If we can put a Text, then we should be abble to put a picture too right?

  • Unknown's avatar

    Hi, without seeing what you want to add for text and image, this is just a rough guess. You would need to upload the image to your media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks with the URL of your chosen image. You may also have to adjust the padding-left value depending on the image.

    .post-password-form p:first-of-type {
      visibility: hidden;
    }
    .post-password-form p:first-of-type:before {
      content: "This is some text";
      display: block;
      background: url('media library, get the URL of that image and then replace ') no-repeat scroll left top / contain;
      padding-left: 40px;
      visibility: visible;
    }
  • Unknown's avatar

    Heya! This seems to be nearly what we need!

    I think it will need some modification, cause right now it has some issues with what we want to make of it.

    We’ll make a protected Article tomorrow so we can show ya the problems on it.

    1) We would like to center the picture.

    2) Right now the Picture and Text are on the same line, and we would like to modify that.

    3) The Picture size have some problems, and may go out of the core of the page with the coding it seems.

    4) If we want to only put a picture, and no text, it seems it doesn’t work.
    Cause it could be better to have just a picture, and abandon the text part!

    So see ya tomorrow for seeing how we could change that, since at this point, we’ll have a protected by password article, and we’ll also have all we have to prepare to do what we want!

  • Unknown's avatar

    To show you how it looks like right now, with only test picture and test text, here is a print screen :

  • Unknown's avatar

    Let me know when you have the password protected post up and I can work on things for you.

  • Unknown's avatar

    Here we go with the article!

    As you can see, we don’t need text anymore. And there is a major problem : The picture won’t resize to adapt to Tablet and Phone mode!

    Also without text it doesn’t work right now, so i had to put some “_______” in the text section.

    A last thingy on the actuality page, the article excerpt shows “Il n’y pas d’extrait, car cet article est protégé.” which means “no excerpt, because the article is protected”.
    We would like that the excerpt shows normally for those articles, so it can attracts people more easily!

    Thanks in advance! :D

  • Unknown's avatar

    The code how it is right now :

    .post-password-form p:first-of-type {
    visibility: hidden;
    }

    .post-password-form p:first-of-type:before {
    content: “____________________”;
    display: block;
    background: url(‘https://laynaria.files.wordpress.com/2018/01/locked.png’) no-repeat scroll left top / contain;
    padding-left: 800px;
    visibility: visible;
    }

  • Unknown's avatar

    This is a challenge. Replace the above two CSS rules with just the following and see what you think.

    .post-password-form p:first-of-type {
     display:block;
     background:url('https://laynaria.files.wordpress.com/2018/01/locked2.png') no-repeat scroll center top / 100% auto;
     padding-bottom: 70%;
     color: transparent;
    }
    @media screen and (max-width: 400px) {
      .post-password-form p:first-of-type {
        padding-bottom: 55%;
      }
    }
  • Unknown's avatar

    I just applied it! It seems everything is good, and challenge is resolved for the picture! :D

    So now the last challenge we have is this :
    On the actuality page (which is our home page), the “article excerpt” don’t show, and instead it says “the article is protected by password, so no excerpt”
    So we would have liked that it shows the excerpt normally, so it can attracts people more easily!

  • Unknown's avatar

    Great!

    With protected posts, the entire post is protected, so there is no way to show an excerpt. Generally when someone password protects content, they do not want any of the content accessible until the visitor enters the correct password.

  • Unknown's avatar

    I would suggest being as descriptive with the title as possible, but don’t make the title too long.

  • Unknown's avatar

    Yeah well at least our title is as descriptive as we can be!
    By the way to show you the only “problem” in the code we have which can only appear if people search :
    Little Problem
    Since the text is set to invisible in the code, instead of not appearing at all, or replaced by something like a blank space.
    I wonder how we could improve that though, cause that may not pe possible with this actual code!

    Also i was wondering if there was a way to change the “Previous/Next Article Option”
    to a “Previous/Next Article in the same Category only” Option?

    So that when people reads a Strip, the previous and next article they see are Strips only. When they look at an illustration, they only see the previous and next illustration. etc etc.

  • Unknown's avatar

    I can’t make that text go completely away, the best we can do is to make it invisible. Also, screen readers for the visually impaired need to have that text otherwise those people would not know that a password is required.

  • Unknown's avatar

    Mmmh, could we try to have the text to appear normally, but make it be under the Picture?

    So it appears that way :

    1- Picture
    2- Basic Text “Protected by password”
    3- Password Form

    It may be better that way, and look far more professional ^^

  • Unknown's avatar

    That would be difficult since the text and image are in the same html element. We would have to use padding to make room for the text at the bottom, but it is difficult to get padding set so that it adjusts properly as the image adjusts for various screen sizes.

  • Unknown's avatar

    I see :/
    Well that’s bad then i suppose.

  • Unknown's avatar

    Sometimes theme html is structured in such a way that this is easily done, and sometimes not. This happens to be a “not”, sadly.

    Perhaps you could incorporate that text into the bottom of the image so that it shows to your visitors?

  • Unknown's avatar

    Sorry if i didn’t answer, i forgot ><.
    The thing was more to cover the bad part of the code that puts the text into transparent instead of simply erasing it.
    If we see that people have a hard time understanding for the password function we will add it in the picture yep.
    Anyway thanks for your help, it will remain like that for now!
    Maybe one day we’ll find a theme with more possibilities, or ask for it to be made, so the functions would be completely made to follow our needs. ^^

  • The topic ‘Aritcles Protected By Password’ is closed to new replies.