How do you change colour of URL text links in Text boxes? Edit: like this.

[Branigan]

This is just my lack of HTML knowledge, so I'm hoping someone can just point out the obvious.

I want to put a URL in a standard text box, which itself is easy enough, like so:
.

Link_in_text.jpg (39 KiB) Viewed 3292 times

.
but it shows the link as blue text, like so:
.

Text_box.jpg (41.98 KiB) Viewed 3292 times

.
I'd like it to be a different colour so it stands out more. Doesn't have to be very complicated.

What's the easiest way to apply a colour style for the text, even just to make it white like the rest (as the underline should give it away)?

This is what it looks like in the skin.js file.
.

text_skin.jpg (237.7 KiB) Viewed 3292 times

[Josh]

You can do this with CSS. There was a recent webinar on this topic also, you really should check it out.

https://youtu.be/e_CE_Fie5pQ?t=304 You can check it out here, it will cover how to do what you want.

https://www.w3schools.com/css/css_link.asp The CSS info you need is here.

Enjoy.

[Hopki]

Hi, Swop out the CSS style sheet in the skin with this

Code: Select all

.ggskin { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px;
	}

	/* unvisited link */
	a:link {
  	color: red;
	}

	/* visited link */
	a:visited {
 	 color: green;
	}

	/* mouse over link */
	a:hover {
  	color: hotpink;
	}

	/* selected link */
	a:active {
  	color: blue;
	}

Change the colours to what you need.
Regards,

[Branigan]

Hi, Swop out the CSS style sheet in the skin with this

Code: Select all

.ggskin { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px;
	}

	/* unvisited link */
	a:link {
  	color: red;
	}

	/* visited link */
	a:visited {
 	 color: green;
	}

	/* mouse over link */
	a:hover {
  	color: hotpink;
	}

	/* selected link */
	a:active {
  	color: blue;
	}

Change the colours to what you need.
Regards,

That's great, thanks.

For anyone else who initially read those instructions as: "Smergle the fliborfs in the wibblegurp", that means: do it here:
.

Style_sheet.jpg (152.72 KiB) Viewed 3279 times

[Neal]

If you are putting in multiple links and want them to all look the same, use the CSS route. If it is one or two links, use inline styles. Simple put "style='color: yellow'" after the <a. The link would look like this:

Code: Select all

	<a style='color:yellow' href='https:\\www.example.com'>This is a yellow link </a>

or this for white text

Code: Select all

	<a style='color:white' href='https:\\www.example.com'>This is a white link </a>

There are about 100 or so predefined colors and many more if you use RGB values. But to make it simple, if its in a box of crayons, it's likely predefined. Don't use hyphens.

[Branigan]

Thanks for all the help on this and yes, it work fine on the desktop, but.... not on mobiles.

As soon as I press on the link it removes the text box, so - thinking I could make the text larger later and my fingers were too large - I used a little rubber ended tablet pointer to make sure I only clicked on the link, but it still did nothing but remove the text box. When I click and hold the link, it opens up some browser choices: Share Link, Open in New Tab, Open in Private Tab, Copy Link or Bookmark Link.

So, not as useful as I'd hoped and it is set to target="_self", which works fine on the desktop at not opening a new Tab.

Any suggestions at a) making the text larger via CSS so it's easier to press on (as I can't seem to insert a graphic in the text box) and b) making it actually go directly to the link when it's clicked?

I've checked various webpages online and hyperlinks seem to go where they should, even when just using my fat fingers, so it suggests that the 'close text box' command is getting priority over the 'goto URL' command on mobile?

[Neal]

Set the target to _Blank to get a new tab.

Code: Select all

<a target="_blank" href='URL HERE'>link text</a>

The CSS is font size. You can use large, x-large or xx-large. You may also try REM unit. 1 REM = the element's base size, 1.5REM is 150%, 2REM is twice the size.

Code: Select all

	#elementID {
		color:pink;
		font-size: large  
	}

You can also inline the styling as follows:

Code: Select all

<a target='_blank' style='font-size:1.5rem; color:yellow' href='URL HERE'>link text</a>

[Branigan]

The CSS is font size. You can use large, x-large or xx-large. You may also try REM unit. 1 REM = the element's base size, 1.5REM is 150%, 2REM is twice the size.

Code: Select all

	#elementID {
		color:pink;
		font-size: large  
	}

Thanks, I don't want it in a new tab, I want it in the same one, so _self. Either way, I checked both, and even reordered them with 'target' before 'URL' instead of after, as I had it previously (straw grasping) but neither of them open anything on a mobile.

It didn't like the inline 1.5REM in the text box. No text appeared at all.

The font-size:large in the CSS style box worked fine(ish): larger text was just the right size ... but still a non-responsive link on mobile.

[Neal]

Can you post a link?

[Branigan]

Can you post a link?

Why? Does it work on mobiles when you do it? Because if it does we have two conflicting data points.

[Neal]

Can you post a link?

Why? Does it work on mobiles when you do it? Because if it does we have two conflicting data points.

Don't know, that is why I asked.

[Branigan]

Can you post a link?

Why? Does it work on mobiles when you do it? Because if it does we have two conflicting data points.

Don't know, that is why I asked.

OK, to be more specific about the problem: add the < href="http://www.google.com"> Google It!</a> to the controller description text box in a simplex skin.

Then open it up with the ( i ) button and try and click on the link on a mobile.

On a mouse interface you can click on the link and it opens up.

You can add target= "_blank" or "_self" to your own preference, but that's not important.
You can also add the CSS colours and font size fixes: also not important.

Basically, on a touch device, the text box disappears without ever opening the link.

Seems to be an 'order of operations' clash.