How to create blurred text?

[ORCAS]

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?

[futurist]

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);

}

 

 

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;

 

 

[futurist]

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.

 

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.

 

 

[ORCAS]

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.

 

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!

[futurist]

Hi @ORCAS

 

Are you using a separate Details DataPage for this one, or is this the Details view within a Report DataPage?

[futurist]

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.

 

[ORCAS]

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.

 

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! 

[futurist]

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)

[Queso]

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

[ORCAS]

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. 

[kpcollier]

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.