Hi,

I would like to change the style of the search-box from the Gossamer-standard-style (looks quite modern) to the style which Google is using (seems to be standardized or lets call it old-fashioned style).
In addition, the letters within the search-box look different to Google as well, like the size of the letters and the space between the letters is different.

Could you please help me how to change the CSS-code in order to have the same appearance of the search-box and letters as at Google ?

Please see image attached (this supports my question).



Appreciate your help.


Erich

In your css editor the below are your settings, this is where you can change the font and font size.

/* forms */
form {
margin: 0px;
}
input, textarea {
font: normal 11px sans-serif;
}
input.text, input.password, textarea {
padding: 1px 0px 1px 2px;
border: 1px solid #57594b;
}


/*-----------*\
|* searchbar *|
\*-----------*/
.searchbar {
margin-bottom: 3px;
padding: 5px 10px;
border-bottom: 1px solid #57594b;
background: #edf2cb;
}
.searchbar input.text, .searchbar input.submit {
margin-right: 5px;
}
/* setting this in mozilla causes rendering issues */
* html .searchbar input.submit {
height: 21px;
}
/* these colours are the same as defined by 'a', but we unset a:visited */
.searchbar a {
color: #212126;
font-size: 12px;
}
.searchbar a:hover {
color: #5c5b66;
}


Sandra Roussel
Chonsa Group Design - Fresh Start Housing

Hi,

I do know where the CSS_core is located, however I do not know how to change the CSS-code in order to change the current search-box style to the same as the one at Google.
Or even better yet, I would like to have the same search-box style (and also all other entry-fields (like within G-Community) in the style of www.xing.com (see image attached).

I do not only want to change the font, but the appearance of the search-box itself (border and color).


Appreciate your help.


Erich

/* forms */
form {
margin: 0px;
}
input, textarea {
font: normal 11px sans-serif;
}
input.text, input.password, textarea {
padding: 1px 0px 1px 2px;
border: 1px solid #57594b;
}


input, textarea: stands for the search box form where people type in there search word
font: normal 11px sans-serif; :this is where you change the font to match what google has (I think google is using Arial 11)
border: 1px solid #57594b; : This is where you change the border color

changing border to : border: 4px double #57594b;
will give you a double frame around the form input area.

I would suggest you save a copy of the original CSS file and experiment until you get the look and feel you want, or hire someone to do it for you.

One of my favorite spots for CSS examples/howto: http://www.w3schools.com/css/css_examples.asp






Sandra Roussel
Chonsa Group Design - Fresh Start Housing

Hi Sandra,

many thanks for this ! I see you are a CSS-expert.

Is Google actually using CSS for their search-box or is this some kind of standard search-box without any CSS ?



Best regards,

Erich

I am not an expert on CSS have spent many hours going crazy learning it.

brewt is by far the most knowledgeable and is an expert in CSS
http://www.gossamer-threads.com/...;;page=unread#unread

Google is using CSS:

<style><!--
div,td{color:#000}
.f{color:#6f6f6f}
.flc,.fl:link{color:#77c}
a:link,.w,a.w:link,.w a:link,.q:visited,.q:link,.q:active,.q{color:#00c}
a:visited,.fl:visited{color:#551a8b}
a:active,.fl:active{color:red}
.t{background:#e5ecf9;color:#000}
.bb{border-bottom:1px solid #36c}
.bt{border-top:1px solid #36c}
.j{width:34em}
.h{color:#36c}
.i,.i:link{color:#a90a08}
.a,.a:link{color:green}
.z{display:none}
div.n{margin-top:1ex}
.n a{font-size:10pt;color:#000}
.n .i{font-size:10pt;font-weight:bold}
.b a{font-size:12pt;color:#00c;font-weight:bold}
#np,#nn,.nr,#logo span,.ch{cursor:pointer;cursor:hand}
.tas{padding:3px 3px 3px 5px}
.taf{padding:3px 3px 6px 5px}
.tam{padding:6px 3px 6px 5px}
.tal{padding:6px 3px 3px 5px}
.sl,.r{font-weight:normal;margin:0;display:inline}
.sl{font-size:84%}
.r{font-size:1em}
.e{margin:.75em 0}
.mblink:visited{color:#00c}
.sm{display:block;margin:0;margin-left:40px}
#navbar div,#logo span{background:url(/images/nav_logo.png) no-repeat;overflow:hidden;height:26px}
#navbar .nr{background-position:-60px 0;width:16px}
#navbar #np{width:44px}
#navbar #nf{background-position:-26px 0;width:18px}
#navbar #nc{background-position:-44px 0;width:16px}
#navbar #nn{background-position:-76px 0;width:66px;margin-right:34px}
#navbar #nl{background-position:-76px 0;width:46px}
#logo{display:block;width:150px;height:52px;position:relative;overflow:hidden;margin:15px 0 12px}
#logo span{background-position:0 -26px;position:absolute;top:0;left:0;width:100%;height:100%}
body,td,div,.p,a{font-family:arial,sans-serif}
.g{margin:1em 0}
--></style>




Sandra Roussel
Chonsa Group Design - Fresh Start Housing

Just add something like the following to your luna.css file:

That particular bit of CSS only affects your searchbar. Just remove the .searchbar bit if you want to affect all text inputs.

Adrian