XF 2.2 Need help with the fallowing code

[eL_]

body:not(.logged-in) .message--post {
   filter: blur(10px);
   -webkit-filter: blur(10px);
   position: relative;
}

body:not(.logged-in) .message--post:before {
   content: "";
   background-image: url("https://example.com/blurred-background-image.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: absolute;
   z-index: 1;
}

I don't know what I'm doing wrong, what I try to do is to add this code in extra.less to hide the posts with a blurring image for guests.
Seems like I can't make it work. Any advice or guidance with the code to do so?
Thank you in advance.

 

[BassMan]

You can try with this class: [data-logged-in="false"] .message-content.

Like this:

[data-logged-in="false"] .message-content {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    user-select: none;
    -webkit-user-select: none;
}

I've added the user-select: none; so the user cannot select the text behind the blur.

But anyone who can inspect the code through a browser can easily access the content. But if most of your users are not technically savvy, this may be the easiest approach.

 

[eL_]

You can try with this class: [data-logged-in="false"] .message-content.

Like this:

[data-logged-in="false"] .message-content {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    user-select: none;
    -webkit-user-select: none;
}

I've added the user-select: none; so the user cannot select the text behind the blur.

But anyone who can inspect the code through a browser can easily access the content. If most of your users are not technically savvy, this may be the easiest approach.

It don't work

 

[BassMan]

I can see it works on your forum.

 

[BassMan]

Remove this code from your template:

:not(.userGroup1) .message-main {
    display: none;
}

That's why you don't see the post content.

 

[eL_]

Remove this code from your template:

:not(.userGroup1) .message-main {
    display: none;
}

That's why you don't see the post content.

Thank you.