Jump to content
  • 0

How to create blurred text?


ORCAS
 Share

Question

I was hoping to gain insight on how to blur text for certain records in one of our Data Pages.  Essentially, we would like to blur out contact information if possible. Has anyone had success with implementing this feature or tried to in their Data Pages?

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 1

Hi @ORCAS

I noticed that using the CSS i provided above, when highlighting the blurred text, the actual text still shows up which might not be what youre looking for. So in order to solve this, you can use the following style instead:

 

table  td:nth-child(5){
filter: blur(3px);
 -webkit-filter: blur(3px);

}
1021199735_blurredwhenhighlighted.png.d997c9b18db8d00d1bc121028329f002.png

 

 

If you also want to disable the option for the text to be highlighted and copy pasted, you can add these:

 

-webkit-filter: blur(3px);
-webkit-user-select: none;
-webkit-touch-callout: none;
 -moz-user-select: none;
-ms-user-select: none;
 user-select: none;

 

 

Link to comment
Share on other sites

  • 0

Hi @ORCAS

Are you planning to use this on a Report DataPage and maybe blur out the values of one column? If so, you can try this:

<style>

table td:nth-child(4){
        color: transparent !important;
        text-shadow: 0 0 8px #000;


 }
</style>

 

Just change the nth-child value to the nth row you want to blur.blurred.thumb.png.04096c0d95086a3ebe135862768c7adf.png

 

However if youre not using a Report DataPage, may I know where exactly do you want to implement this? The css provided above should still work but you would just have to change which element it should be applied to.

 

 

Link to comment
Share on other sites

  • 0
On 3/4/2022 at 1:24 PM, futurist said:

Hi @ORCAS

Are you planning to use this on a Report DataPage and maybe blur out the values of one column? If so, you can try this:

<style>

table td:nth-child(4){
        color: transparent !important;
        text-shadow: 0 0 8px #000;


 }
</style>

 

Just change the nth-child value to the nth row you want to blur.blurred.thumb.png.04096c0d95086a3ebe135862768c7adf.png

 

However if youre not using a Report DataPage, may I know where exactly do you want to implement this? The css provided above should still work but you would just have to change which element it should be applied to.

 

 

I was planning on doing this on the Selected Results Page. Below is a screenshot of what you would see on that page as well as what I have covered in red would prefer to be blurred.  I don't believe it would necessary be a column but more or less certain fields for each record in their table. Please let me know if this answered your question and/or additional information is needed. Thank you in advance!

image.thumb.png.f5c23d25cf45a3b6ad962fe259cd8665.png

Link to comment
Share on other sites

  • 0

Hi again @ORCAS,

 

you can use the following CSS for the Details page:

 

<style>

div[data-cb-cell-name*='EditRecordFIeld4'] + div{

filter: blur(3px);
 -webkit-filter: blur(3px);
-webkit-filter: blur(3px);
-webkit-user-select: none;
-webkit-touch-callout: none;
 -moz-user-select: none;
-ms-user-select: none;
 user-select: none;

}

</style>

 

Just make sure to change "Field4" in "EditRecordField4" to the name of the field whose value you want to blur. So for example, your field is named "Contact_Number", you should use "EditRecordContact_Number" in the CSS above.

 

1896310561_blurfield.png.30824f48cadf33989cec597925e4e0d6.png

blur field.png

Link to comment
Share on other sites

  • 0
On 3/11/2022 at 7:29 PM, futurist said:

Hi again @ORCAS,

 

you can use the following CSS for the Details page:

 

<style>

div[data-cb-cell-name*='EditRecordFIeld4'] + div{

filter: blur(3px);
 -webkit-filter: blur(3px);
-webkit-filter: blur(3px);
-webkit-user-select: none;
-webkit-touch-callout: none;
 -moz-user-select: none;
-ms-user-select: none;
 user-select: none;

}

</style>

 

Just make sure to change "Field4" in "EditRecordField4" to the name of the field whose value you want to blur. So for example, your field is named "Contact_Number", you should use "EditRecordContact_Number" in the CSS above.

 

1896310561_blurfield.png.30824f48cadf33989cec597925e4e0d6.png

blur field.png

Thank you so much for your assistance. This leads me to my final question. Would I create HTML blocks both above and below the field I am trying to blur out?  Also, I am going to be removing the details page and the data will be displayed on the Results page! 

Link to comment
Share on other sites

  • 0
5 hours ago, ORCAS said:

Thank you so much for your assistance. This leads me to my final question. Would I create HTML blocks both above and below the field I am trying to blur out?  Also, I am going to be removing the details page and the data will be displayed on the Results page! 

Hi @ORCAS,

 

No need to add HTML blocks as the CSS provided last time directly refers to the value of the fields you want to blur out.

 

As I have also mentioned, you can basically use the CSS to any elements, just make sure to change the class (or ID or type) where you want to apply the CSS (just inspect element on it and get the class/id/or whatever)

Link to comment
Share on other sites

  • 0

Hi @ORCAS, I am very happy to see this topic you opened as it very similar to the styling I needed for my DataPage.

 

Big thanks to @futurist  for giving genius answers!

Just to give more information about filter blur, its description can be found on this link: https://www.w3schools.com/cssref/css3_pr_filter.asp#:~:text=Demo ❯-,blur(px),-Applies a blur

Link to comment
Share on other sites

  • 0

Thank you both for your input and helping me @futurist and @trickson. I have essentially decided to hide the data within html blocks for now as I am working on a solution to prevent a user from essentially right clicking the blurred text and copying it to google to see essentially the data I am trying to hide. 

Link to comment
Share on other sites

  • 0
56 minutes ago, ORCAS said:

hide the data within html blocks for now as I am working on a solution to prevent a user from essentially right clicking the blurred text and copying it to google to see essentially the data I am trying to hide.

Fwiw, if you are just using <div style="display: none;"> or <table style="display:none;"> in HTML blocks to hide your values, it is still fairly easy to see this data. Using DevTools, anyone can simply click where the hidden information should be and see the hidden values in the Elements section.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...