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

Q&A about the latest versions
Post Reply
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Tue Aug 11, 2020 11:55 am

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
Link_in_text.jpg (39 KiB) Viewed 429 times
.
but it shows the link as blue text, like so:
.
Text_box.jpg
Text_box.jpg (41.98 KiB) Viewed 429 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
text_skin.jpg (237.7 KiB) Viewed 429 times
Last edited by Branigan on Wed Aug 12, 2020 10:42 am, edited 1 time in total.
Josh
Posts: 11
Joined: Wed Aug 05, 2020 1:54 pm

Tue Aug 11, 2020 12:49 pm

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.
User avatar
Hopki
Gnome
Posts: 10859
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Tue Aug 11, 2020 12:50 pm

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,
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Tue Aug 11, 2020 1:12 pm

Hopki wrote:
Tue Aug 11, 2020 12:50 pm
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. :D

For anyone else who initially read those instructions as: "Smergle the fliborfs in the wibblegurp", that means: do it here:
.
Style_sheet.jpg
Style_sheet.jpg (152.72 KiB) Viewed 416 times
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Tue Aug 11, 2020 3:46 pm

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
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Tue Aug 11, 2020 6:53 pm

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?
Last edited by Branigan on Tue Aug 11, 2020 8:51 pm, edited 1 time in total.
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Tue Aug 11, 2020 7:08 pm

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
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Tue Aug 11, 2020 8:49 pm

Neal wrote:
Tue Aug 11, 2020 7:08 pm

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. :o

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
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Tue Aug 11, 2020 8:58 pm

Can you post a link?
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Tue Aug 11, 2020 10:48 pm

Neal wrote:
Tue Aug 11, 2020 8:58 pm
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
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Tue Aug 11, 2020 11:07 pm

Branigan wrote:
Tue Aug 11, 2020 10:48 pm
Neal wrote:
Tue Aug 11, 2020 8:58 pm
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
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Wed Aug 12, 2020 10:40 am

Neal wrote:
Tue Aug 11, 2020 11:07 pm
Branigan wrote:
Tue Aug 11, 2020 10:48 pm
Neal wrote:
Tue Aug 11, 2020 8:58 pm
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.
Post Reply