RESOLVED : How to modify Search Field...

[bcsweb1]

I have read the forums and tried many of the suggested steps...but still can not get it... I wanted to put that out there up front becasue I know everyone will start pointing me to other forums...sorry - Already did my research and have made some progress... (http://forum.cmsmadesimple.org/index.ph ... 324.0.html)

Now with that said..

I have the lateste build of CMS...

Here is what the search "Should" look like...

http://www.alsipnursery.com/newtemplates/homepage.htm

Code: Select all

<li id="home_search">
		<form method="get" id="searchform" action="search.php"><div>
		<input id="searchBox" value="" name="s" type="text">
		<input src="images/layout/go_btn.gif" alt="Go!" type="image" width="61" height="32">
		</div></form>
	</li>

Here is as far as I am able to get:

http://www.alsipnursery.com/site/index.php?page=search

This is the code in the "search template":

Code: Select all

<li id="home_search">
		
	{$startform}	

   {$inputbox}
<input src="images/layout/go_btn.gif" alt="Go!" type="image" width="61" height="32" value="{$submittext}" type="submit" />
{if isset($hidden)}{$hidden}{/if}{$endform}
	</li>	

Now here is my stylesheet - and I am pretty sure the cms is not using it even though I have attached it - this is the part for the search area:

Code: Select all

#topmenu li#search
{
  width: 226px; height: 43px;
  background-image: url("../newtemplates/images/layout/searchbg.gif");
  background-position: center center;
  background-repeat: no-repeat;
}
#topmenu li#home_search
{
  width: 226px; height: 43px;
  background-image: url("../newtemplates/images/layout/home_searchbg.gif");
  background-position: center center;
  background-repeat: no-repeat;
}

#searchform {
  /*float:right !important;*/
  padding: 6px 0 0 20px !important;
  margin: 0 !important;
}
#searchform label {
  display: none;
}
#searchform input {
  display: inline;
  float: left;
  vertical-align: middle;
}
#searchBox {
  border: 3px solid #006e3a;
  border-right: 0;
  margin-top: 0px;
  width: 134px;
  height: 20px;
  padding: 3px;
}
#searchBox:hover {
  /*border: 3px solid #009966; border-right: 0;*/
}
#searchBox:focus,
#searchBox:active {
  background: #99ff99;
}

I am 81% certain it is a style sheet issue but for the life of me I have tried everything I have read and could not get my styles to show up on the search - I am pretty happy with what I have so far if I could move the text box over a little to the right and border it and line up the "go" button - like it should look: http://www.alsipnursery.com/site/

Here is my complete stylesheet (which I do not think is really being used by the CMS system for some reason - it is attached):

Code: Select all

/** START reset.css    html, **/
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  /*font-size: 100%;*/
  font-family: inherit;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  /*line-height: 1;*/
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup
table {
  border-collapse: separate;
  border-spacing: 0;
} */
caption, th, td {
  text-align: left;
  font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
select, .submit {
  cursor:pointer;
}
a { /** Remove dotted outline in Firefox that appears around links when you click on them **/
  outline: none;
}
/** END reset.css **/

/*~~~~~( body / universal )~~~~~~

body {
  text-align: center;
  color: #444;
  font: 78% "trebuchet ms", verdana, arial, helvetica, sans-serif;
}*/


  /** START Relative Font Sizes **/

    /* default font size */
  body, body div, body p, body th, body td, body li, body dd    {
    /* more specific to override imported rule */
    font-size:    x-small;
    /* false value for WinIE4/5 */
    voice-family: "\"}\"";
    /* trick WinIE4/5 into thinking rule is over */
    voice-family: inherit;
    /* recover from trick */
    font-size:    small
    /* intended value for better browsers */
  }

  html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd    {
    font-size:    small
    /* be nice to Opera */
  }

  body, div, p, th, td, li, dd {
    font-family: Arial, Helvetica, Verdana, sans-serif;
  }

  /*--------------------------------- Default -----------------------------------------------*/
  h1 {
    font-size: 1.4em;
    font-weight: bold;
  }

  h2 {
    font-size: 1.1em;
    font-weight: bold;
  }

  /** END Relative Font Sizes **/

/** an img is by default inline
and since the default vertical alignment of a table cell is baseline,
the img sits on the baseline with a small gap underneath it
corresponding roughly to the space required for descenders in the
current font. **/
#wrapper img { display: block; }

/** Start Structure **/
#wrapper {
  margin: 0px auto; /* Centering a fixed width website - add relative positioning to the outer div, then set the margin to auto */
  position: relative;
  width: 980px;
  text-align: left;
}

#header img {
  float: left;
}
#topmenu li  {
  float: left;
  height: 43px;
}
#topmenu li#search
{
  width: 226px; height: 43px;
  background-image: url("../newtemplates/images/layout/searchbg.gif");
  background-position: center center;
  background-repeat: no-repeat;
}
#topmenu li#home_search
{
  width: 226px; height: 43px;
  background-image: url("../newtemplates/images/layout/home_searchbg.gif");
  background-position: center center;
  background-repeat: no-repeat;
}

#searchform {
  /*float:right !important;*/
  padding: 6px 0 0 20px !important;
  margin: 0 !important;
}
#searchform label {
  display: none;
}
#searchform input {
  display: inline;
  float: left;
  vertical-align: middle;
}
#searchBox {
  border: 3px solid #006e3a;
  border-right: 0;
  margin-top: 0px;
  width: 134px;
  height: 20px;
  padding: 3px;
}
#searchBox:hover {
  /*border: 3px solid #009966; border-right: 0;*/
}
#searchBox:focus,
#searchBox:active {
  background: #99ff99;
}

#leftwrapper {
  width: 226px;
  float: left;
}
#left {
  background-image: url("../newtemplates/images/layout/leftbg.gif");
  background-repeat: repeat-y;
}

#navcontainer {
  width: 226px;
}

#navcontainer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #99ff99;
}
#navcontainer li {
  float: left;
  /*position:relative;*/
}
#navcontainer a {
  position:relative;
  text-decoration: none;
  display: block;
  width: 226px;
}

#contentwrapper {
  width: 754px;
  float: left;
}
#content {
  background-image: url("../newtemplates/images/layout/contentbg.gif");
  background-repeat: repeat-y;
  /** padding: 0; can't change bcs of the footer **/
}

#content p {
  padding: 10px;
}

#contentflash {
  margin-left: 10px;
  width: 513px;
  height: 376px;
}


#webcrawler {
}

#contentright {
  float: right;
}

#footer {
  width: 754px;
  height: 35px;
}
#footer li  {
  float: left;
  height: 35px;
}

#footnote {
	padding-top: 30px;
	text-align: center;
  color: #21783C;
  font-size: 1.1em;
  font-weight: bold;
}

div.clear {
  font-size: 0px;
  clear: both;
  height: 0px;
}



/** END Structure **/


.article {
  margin: 20px 0 10px 25px;
  font-size: 1.2em;
  color: #4c402c;
  background-image: url("../newtemplates/images/layout/goldline.png");
  background-repeat: no-repeat;
  padding-top: 6px;
  width: 668px;  /* IE will not render the transparent gif if width is not given */
}

/** IE 5.5+ png transparency fix **/
* html .article {
  background:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/layout/goldline.png" ,sizingMethod="crop");
}

.article img {
  float: left;
  margin-right: 10px;
}
.article a {
  color: #231f20;
  background: #d9d49c;
  font-style: italic;
  text-decoration: none;
}
.article a:hover {
  color: #d9d49c;
  background: #231f20;
}

[lollipop27]

like this it works....


do you have the webdeveloper toolbar? if you do, you would have recognized that none of the id's you are styling actually exists... so take the id's you have.... you can easily find them out with the webdevelloper toolbar....

Code: Select all

#home_search form {
  /*float:right !important;*/
  padding: 6px 0 0 20px !important;
  margin: 0 !important;
}
#home_search form label {
  display: none;
}
#home_search form input {
  display: inline;
  float: left;
  vertical-align: middle;
}
 #cntnt01searchinput {
  border: 3px solid #006e3a;
  border-right: 0;
  margin-top: 0px;
  width: 134px;
  height: 20px;
  padding: 3px;
}

[bcsweb1]

I just did a search for "webdeveloper toolbar" and nothing was found on it except this post and one line in another post - I also looked at the development area -

Can you tell me what it is and where to get it please?

I am off to test what you provided....

Thank you

[bcsweb1]

Wow  - that worked great!!! - Thank you so much....

I searched in the DB and in the site and where do I change the words that appear in the search box as a default?

"Enter Search..."

I would like to change that to "Search our Site..."

[lollipop27]

Have you checked the help of the seach module??

check the parameters.....

[bcsweb1]

After getting a little knudge and searching further I was able to resolve the issue...

It was a stylesheet issue - I wish there was someway to convert your stylesheet so it would use whatever CMS uses - it would be a lot simpler...

Thank you to all that helped...

This was the fix:

Code: Select all

#home_search form {
  /*float:right !important;*/
  padding: 6px 0 0 20px !important;
  margin: 0 !important;
}
#home_search form label {
  display: none;
}
#home_search form input {
  display: inline;
  float: left;
  vertical-align: middle;
}
 #cntnt01searchinput {
  border: 3px solid #006e3a;
  border-right: 0;
  margin-top: 0px;
  width: 134px;
  height: 20px;
  padding: 3px;
}

[Dr.CSS]

The web dev. toolbar is an extension for Firefox...

Have you searched the forum for it?...