Giving highlights custom colors

Ask the community
,
1

How can you make the color of highlighted on a web page a custom color (see attached image:

1366×768 42.4 KB

2

You will may want to use …
$w(‘#myTextID’).html=<span style="background-color:blue">Hello world! </span>

Something like that. I do it right out of my mind, so you will have to prove the right syntax by your own.

3

Hi, I think you can only do it if you have a premium account.
Go to the site dashboard > Custom code
And add this code to the head:

<style>
::selection {
  color: blue;
  background: yellow;
}
</style>
4

P.S. you won’t see it in the editor preview. Only on the live site.

5

@jonatandor35
J.D. how exactly would work your code?

Would it mark directly the current selection of a text?

< style >
:: selection { color : blue ; background : yellow ;}
</ style >
And why the double → :: ?

My idea was to use for example RegEx+Replace

-Find the right text-part
-Replace it with choosen background using HTML-formatting.

6

Hi there :wave:t2: I do this on my site. Like J.D. said you can handle this by adding custom CSS via Dashboard > Settings > Custom Code (as outlined in this article ). You can choose to apply it to all pages or only specific ones.

However, you may want to add -moz-selection as well, to work with older versions of Firefox (as documented here ).

<style>
  ::selection {
    color: white;
    background:  rgba(0, 83, 166, 0.9);
  } 
::-moz-selection {
    color: white;
    background: rgba(0, 83, 166, 0.9);    
  }
</style>

The “color” value is the color of the text, and the “background” value is the color of the highlight. You can use RGBA values, hex code values, or any CSS color names.

Good luck!

7

@russian-dima this way it’ll change the style of the selected text.
Your way is not the solution as you can’t detect text selection events.