Bubble Rich Text Editor making links blue automatically

[jwtsmithson]

Hi there,

Using the Bubble rich text editor plugin. I put a link into a piece of text and save it to the database, yet when the text is displayed on the site I can’t find a way for the link to be recognized and automatically highlighted blue.

I know I could highlight it blue when I edit in the text editor, however this feels clunky.

Does anyone have any advice?

Cheers,
Johnny

[jwtsmithson]

I think I managed to find a solution. I used a find and replace to find URL tags which allowed me to add my own tags along with them:

At the start:

At the end:

I used this to change the link colour to blue and underline it.

Hope this helps someone.

Cheers,
Johnny

[littlerobot]

Nice work! You can also add css styles to your app in the page html header section, in the settings metatags area or in an html element on the page. Something like below should work and you can customize the color all you want.

<style>
  /* Style all links */
  a {
      color: #007bff; /* Bright blue color */
      text-decoration: none;
  }

  /* Add underline on hover for better visibility */
  a:hover {
      text-decoration: underline;
  }

  /* Unvisited link */
  a:link {
      color: #007bff; /* Bright blue color */
  }

  /* Visited link */
  a:visited {
      color: #0033cc; /* Darker shade for visited links */
  }

  /* Mouse over link */
  a:hover {
      color: #0056b3; /* Darker shade on hover */
      text-decoration: underline;
  }

  /* Selected link */
  a:active {
      color: #007bff; /* Bright blue color */
      text-decoration: underline;
  }
</style>

Have a great weekend!