[Solved] Search Module, which elements to style with CSS?

[INB]

Please help me find the IDs and Classes and whatever else I need.
(learning CMSMS by adapting the CSS Pixelgreen template)

The platform is PHP 5, no safe mode, (don't know the version) and FreeBSD and CMSMS 1.2.3.
I know some XHTML and CSS, no programming (Started with HotDog a 'few' years back)

In the template file:
{search}

I removed the >>  {$label}: {$  > value={$submittext}" >  value="Sök" (Swedish)
and changed the default text input phrase into Swedish as well.

In my pixelgreen_search.css I have disabled all the original form elements to be able to follow what I do.

Below places the default textarea and button inside the sidbar and sidebox. Not quite beautifully

Code: Select all

#cntnt01moduleform_1 {
	margin:10px 15px 10px 15px;
        padding: 0;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA;

Adding this changes the default text field and button. Adding width etc configures the button only.

Code: Select all

input {  
	padding: 2px;
	border:1px solid #eee;
	font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
	color:#777;

Don't notice any change using this:

Code: Select all

#cntnt01searchinput {
width: 145px;
}

Code: Select all

Nor with shis {$inputbox}:
#inputbox {...whatever...}

The SEARCH SOURCE looks like this:

Code: Select all

<h1>Search Box</h1>	

<div id="search"><form id="cntnt01moduleform_1" method="get" action="index.php">
<div class="hidden"> <input type="hidden" name="mact" value="Search,cntnt01,dosearch,0" />
<input type="hidden" name="cntnt01returnid" value="60" /></div>


<input type="text" name="cntnt01searchinput" id="cntnt01searchinput" value="skriv in här...." size="20" maxlength="50" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
<input name="submit" value="Sök" type="submit" />

</form>
</div>

This is my link:
http://nagot.se.vonanka.kontrollpanelen ... pixelgreen

Mark's comments have been helpful, but obviously not all the way
http://forum.cmsmadesimple.org/index.ph ... 169.0.html

Searching on

Code: Select all

 {Search} 

gives zilion pages.

I am VERY grateful for help

IBN

[KO]

Try...

#search input {background:pink;width:180px;}
#search input.searchbutton {width:100px;}

at the end of your '2_pixelgreen_menues' stylesheet.

Sometimes you need to add some other selector in front of CSS style as somewhere other input styles could be stronger.

[reneh]

To find exact that elements to sytle you should try the Firefox Web Developer toolbar.
https://addons.mozilla.org/en-US/firefox/addon/60
its great to test different settings on the fly....

[INB]

KO thank you! This makes it work.

I applied the Pixelgreen search formatting and it looks (almost) perfect. I'll just nudge the text box horizontal position in a minute (or two). Will also ad the IE6 *html body  I've seen Mark mention.

With your selectors and minimal adjustments it even works attaching the Pixelgreen template forms, (though I intend to change them to CMS modules later).

An addendum to my orginial description.
- in In the Search template I had done a third thing: I had added  class="searchbutton"  between input name=  and value=    ...

Thanks again KO, for taking the time to help.

Reneh, it is very helpful. It is how I get the source and check other site's CSS etc. Just need to learn a little (lot) more about what I am seeing.

Inga

[INB]

Summary: Styling Search module version included in CMS MS 1.2.3.
- insert {search} in the page template
- in Admin/Extensions/Search
        a) in the Options tab, change the default text (into another language for instance)
        b) in the Search Template tab, remove  {$label}: {$  if you don't want a label
        c) further in along the same text line, add a    class="searchbutton"
        d) If you want anther text on the button change  value="{$submittext}"  to value="a word"
- in a CSS stylesheet:  #search  #search input    #search input.searchbutton



CSS example from Pixelgreen template (not optimal, but working)

Code: Select all

#search {
	margin:10px 15px 10px 15px;
            padding: 0;
	border: 1px solid #f2f2f2;
	background-color: transparent; 
}
#search input {
	width: 145px;
	color: Maroon;
            height: 19px;
	padding: 2px;
	border: 1px solid #DADADA;
}
#search input.searchbutton {
	margin: 0; 
	font: bold 1em Arial, Sans-serif; 
	background: #FFF url(images/gradientbg.jpg) repeat-x; 
	padding: 2px 3px; 
            width: 34px;
            height: 27px;
	color: #333;	
	border: 1px solid #DADADA;	
}