How could I integrate my css code with search module template ?[solved]

[amin30b]

Hello
In my default raw template I have this codes for search form :

Code: Select all

<form id="form-s" method="post" action="index.html">
	<div>
        <input id="field-s" type="text" maxlength="110" class="field"/>
        <input type="submit" value="Search" class="button" title="Search" />
	</div>
   </form>

Now default search template is below lines :

Code: Select all

{$startform}

{$label}: {$inputbox}<input name="submit" value="{$submittext}" type="submit" />
{if isset($hidden)}{$hidden}{/if}

{$endform}

What should I do for integrating my raw template with its all CSS properties
to CMSMS default search template ?

[cubix]

change 'field-s' in your css to 'cntnt01searchinput'

and put {search} in your template

- its late and im not thinking straight but should work for the text box.

[amin30b]

I think my question was not clear !
For example I have changed below code to view search button in my raw template format :

and it works correctly
but what should I do for input field : {$inputbox} 

[amin30b]

Please guide me , it`s a critical point for my template .
How could I assign my css classes to input filed {$inputbox} in search module ?

[Dr.CSS]

Without seeing how it looks in the source of the page and what CSS you want to apply it makes it hard to answer...

Got Link?...

[amin30b]

Unfortunately I don`t have online sample 
I grabbed my template idea from http://www.mygermancity.com/
I hope this help you .

[alby]

Unfortunately I don`t have online sample 
I grabbed my template idea from http://www.mygermancity.com/
I hope this help you .

Search in forum for style input and textarea.
You must wrap your search template with a .... and in stylesheet for example:
#searchbox input { width:70px; padding:0 2px; font-size:9pt; }

In that site you have an example of this:

Code: Select all

#header .actions input.field {
  padding: 4px 0;
  margin: 10px 0 0 0;
  width: 220px;
  height: 24px;
  text-indent: 5px;
  font-size: 14px;
  background: url(../image-files/search_field.gif) no-repeat top right;
  border: 0;
}

#header .actions input.button {
  position: relative;
  top: 10px;
  padding: 0;
  margin: 0 30px 0 12px;
  vertical-align: top;
  border: 0;
}

Alby

[Dr.CSS]

This site uses the {search} tag and when it is rendered it has this in the source so I used the IDs to point the CSS to it for styling...

It is using an older ver. of search so the go button iis hard coded in the search php but the rest will still work for you...

Page...

http://www.multiintech.com/cmsms2/index.php/home.html

Source...


Search: 



CSS... * html body is for IE6...

#cntnt01moduleform-1 {
background: url(uploads/images/golf/sbg.jpg) repeat-x;
padding: 0px 5px 0px;
margin: -12px 5px 0px
}
* html body #cntnt01moduleform-1 {
background: url(uploads/images/golf/sbg.jpg) repeat-x;
padding: 0px 5px 0px;
margin: 0px 5px 0px
}
#search {
float: left;
height: 34px;
margin: 5px 5px 5px;
padding: 0px;
background: url(uploads/images/golf/sright.jpg) no-repeat;
background-position: top right
}
#search input {
margin-top: -2px
}
* html body #search input {
margin-top: -4px
}
#searchleft {
float: left;
width: 7px;
height: 33px;
padding: 0px;
margin:;
background: url(uploads/images/golf/sleft.jpg);
}

[amin30b]

Thanks all
Just , could you please describe more about cntnt01moduleform-1 . Where is it defined ?

[Dr.CSS]

When the page is rendered you should see the IDs and names of each part in the source view...

This is from another site using CMSMS 1.2 no changes to the search template code, when you have a site the ID and name of the search elements change so you need to look at your page and 'view source' to see what IDs and name you are getting...

     
         
Search: 


 

[jbdough]

@ Dr.CSS

Your Reply #7 on: 31 Dec 2007, 13:30 has been very helpful.

I ran FireBug at http://www.multiintech.com/cmsms2/index.php/home.html
and see you are doing things a bit differently than you described in reply #7,
and are now running version 1.6.6 as I am.  In your css -

Code: Select all

#search input.search-button, .lbsubmit {
	border: none;
	height: 26px;
	width: 53px;
	margin: 0px 0px 0px;
	padding: 0px 2px 2px 0px;
	color:#ececec;
	cursor: pointer;
	background: url(uploads/mydark/abk.png) repeat left top;
}

what is .lbsubmit ?

I want to change the value of the button from "Submit" to "Go"

Code: Select all

#search input.search-button{
        value: "Go";
}

is not working. Can it be done with css, or do I have to edit my search template?  I have not messed with that yet. 
Also, where do the string variables in the smarty tags that are in the search template get assigned?

thank you!

[Dr.CSS]

To change it form Submit to Go, go to search admin and in the template tab there is the value="{$submittext}" change it there...

[jbdough]

Thanks Dr.CSS  I am chuckling here --  after I learned how to pass params to modules ...

Code: Select all

<div id="search">
    {search submit="Go"}
</div>

works too.  Who knew?