Change colour of font

Gadgetman496 · 01-09-2017 02:30PM #1

Hi,

No coding experience unfortunately but I'm hoping this might be a simple fix for those who do?

I have a bit of search box code which also has a checkbox underneath the search box. The text beside the check box reads

"Only search Wikipedia"

I want that piece of text to appear grey in colour\color but leave the font for the actual search term in the search input box itself as is (default black).

Can any of you give me the line of code I need to insert?

Here's what it looks like:

Here's the code:

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="25"
maxlength="255" value="" />
&nbsp
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<br>
<input type="checkbox" name="sitesearch"
value="en.wikipedia.org" nocheck/> Only search Wikipedia<br />
</td></tr></table>
</div>
</form>

Buford T Justice · 01-09-2017 06:03PM

Something like this should do

          <form method="get" action="http://www.google.com/search">
      <input type="text" name="q" size="25" maxlength="255" value="" /> &nbsp
      <input type="submit" value="Google Search" /></td>
      </tr>
      <tr>
        <td align="center" style="font-size:75%">
          <br>
          <input type="checkbox" name="sitesearch" value="en.wikipedia.org" id="chkbox" nocheck/>
          <label for="chkbox" style="color:grey"> Only search Wikipedia</label><br />
        </td>
      </tr>
      </table>
      </div>
    </form>

In general inline styles aren't always a good idea, but it will do the job

Link

Gadgetman496 · 02-09-2017 12:40AM

Thank you for taking the time to help out Buford T Justice, it's much appreciated

Gadgetman496 · 04-09-2017 02:12AM

Gadgetman496 wrote: »

Hi,

No coding experience unfortunately but I'm hoping this might be a simple fix for those who do?

I have a bit of search box code which also has a checkbox underneath the search box. The text beside the check box reads

"Only search Wikipedia"

I want that piece of text to appear grey in colour\color but leave the font for the actual search term in the search input box itself as is (default black).

Can any of you give me the line of code I need to insert?

Here's what it looks like:

Here's the code:

One final aspect you might be able to help with?

I would like the input box and google Search button to be larger heightwise, maybe twice the height.

Can you help?

Buford T Justice · 04-09-2017 12:30PM

Just increase the size of the font inline.
Link

Gadgetman496 · 04-09-2017 01:31PM

Buford T Justice wrote: »

Just increase the size of the font inline.
Link

Thanks again Buford for sticking with me on this one

Unfortunately the font size in that code is set at 75% and increasing it has no effect on the height of the input box or Google search button.

Buford T Justice · 04-09-2017 01:33PM

Gadgetman496 wrote: »

Thanks again Buford for sticking with me on this one

Unfortunately the font size in that code is set at 75% and increasing it has no effect on the height of the input box or Google search button.

The only part of the code you've posted with the 75% sizing should be the second table col, not the inputs. Regardless of this, the last inline style would / should take precedence. It works in the link i posted.

Gadgetman496 · 04-09-2017 02:23PM

Buford T Justice wrote: »

The only part of the code you've posted with the 75% sizing should be the second table col, not the inputs. Regardless of this, the last inline style would / should take precedence. It works in the link i posted.

I'm totally stupid

I only just realised that the link you posted to Plunker is some sort of simulator that you can use to test code? something like the run feature in Notepad++.

Like I said, I'm a total nOOb with this stuff, I copied your snippet of code entirely and replace the existing code with it and it does do the trick now.

The one issue I have with it though, is that the font on the Google Search button and the font entered into the input box both look really bold and ugly! compared to the look of the font entered into the genuine Google homepage search box. It that because we are increasing the size of the font so much or has it anything to do wit the "em" in the size section of the code?

Buford T Justice · 04-09-2017 02:42PM

Gadgetman496 wrote: »

I'm totally stupid I only just realised that the link you posted to Plunker is some sort of simulator that you can use to test code? something like the run feature in Notepad++.

Like I said, I'm a total nOOb with this stuff, I copied your snippet of code entirely and replace the existing code with it and it does do the trick now.

The one issue I have with it though, is that the font on the Google Search button and the font entered into the input box both look really bold and ugly! compared to the look of the font entered into the genuine Google homepage search box. It that because we are increasing the size of the font so much or has it anything to do wit the "em" in the size section of the code?

em refers to the size of the font relative to the current font size. Its also using the default font style from the browser unless you've specified a different font, but I doubt it. Perhaps the example you're using to compare it to is a different font? chances are its not times new roman anyway

Gadgetman496 · 04-09-2017 03:33PM

No, I have not specified a different font.

There's something not right about the way the font looks now that it's enlarged & if I increase the font size a tad more it gets even worse.

Have a look at these two screenshots of the same input in the same Browser.

The one from our code does not look great.

Here's a shot of the input and button as per the code from Plunker:

And here is the same input used on the Google.ie Homepage:

And the input box on the legit Google page is larger!

I guess what I was really trying to achieve was to increase the size of the input box and the button itself, not the font size of both.

-

Buford T Justice · 04-09-2017 03:53PM

Use padding instead of increasing the font size if that's what you're trying to achieve.
link

Gadgetman496 · 04-09-2017 03:59PM

Buford T Justice wrote: »

Use padding instead of increasing the font size if that's what you're trying to achieve.
link

Ah that's exactly what I was after Buford.

God bless your patience, a huge thanks once more;)

Change colour of font

Comments