Support » Plugin: TablePress » How to CSS blur columns 2 and 3 for logged out users (or certain roles)

  • Resolved marikamitsos

    (@marikamitsos)



    Hello and thank you for your excellent work,

    As per title we wish to apply a CSS blur using the Pseudo-class :not() for NON-logged-in users (merely visitors) on specific columns.

    .tablepress-id-4 .column-2:not(.logged-in),
    .tablepress-id-4 .column-3:not(.logged-in) {
    	-webkit-filter: blur(3px);
    	-moz-filter: blur(3px);
    	-ms-filter: blur(3px);
    	filter: blur(3px);
    }

    We went through the forum and site but could not find a solution.
    We have tried all of the:

    .tablepress-id-4:not(.logged-in) .column-3:not(.logged-in)
    .tablepress-id-4:not(.logged-in) .column-3
    .tablepress-id-4 .column-3:not(.logged-in)
    :not(.logged-in) .tablepress-id-4 .column-2 

    On the other hand .logged-in .tablepress-id-4 .column-2 works. Unfortunately we want the exact opposite. 🙁

    Any ideas?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    That will not directly work like that, as the .logged-in class is probably added to the HTML <body> tag by your theme (if it is even added, did you check that?).
    Thus, something like

    body:not(.logged-in) .tablepress-id-4 .column-2,
    body:not(.logged-in) .tablepress-id-4 .column-3 {
    	-webkit-filter: blur(3px);
    	-moz-filter: blur(3px);
    	-ms-filter: blur(3px);
    	filter: blur(3px);
    }

    might work.

    Note that this is no protection against someone with a tiny bit of web development knowledge at all.

    Regards,
    Tobias

    That seems to work. 🙂
    Thank you so much.

    Note that this is no protection against someone with a tiny bit of web development knowledge at all.

    We know that. We just want to give an intensive to our junior users (8-17 years old) to log in.

    Is there a way to use this trick for a certain role? e.g. students

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    good to hear that this helps!

    Applying this to only a certain user role would require that the user role is somehow available to the CSS, e.g. via a CSS class, in the same way as the logged-in class.
    If it’s not (you’d need to check the HTML output of the page), you’d have to add it via your theme.

    Regards,
    Tobias

    @tobiasbg

    Hello Tobias,

    I know this is an old post, also marked as resolved.
    The solution you provided for our students works well. Too well!

    Blurred Headers
    blurred-headers-2018

    As you can see in the screenshot it also blurs the headers.
    How can we avoid that? How can we keep the headers clear?

    Thanx again.

    • This reply was modified 3 weeks, 6 days ago by  marikamitsos.
    • This reply was modified 3 weeks, 6 days ago by  marikamitsos. Reason: Image would not show up
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    for this, just add a tbody in the CSS selector from above, like

    body:not(.logged-in) .tablepress-id-4 tbody .column-2 {
    

    Regards,
    Tobias

    Worked just fine Tobias.

    Thank you.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.