Page 1 of 1

search button image?

Posted: Mon Apr 07, 2008 3:48 pm
by toolman
Hi there,

Is it possible to add an image search button to my search field at the top of the template instead of users having to hit enter?

Thanks!

Re: search button image?

Posted: Mon Apr 07, 2008 7:24 pm
by X-Bumble
Yes if you know PHP.

The lines you need to change are:

Code: Select all

<form action="index.php?option=com_search&Itemid=5" method="get">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />	</div>

Re: search button image?

Posted: Thu Jan 22, 2009 8:45 pm
by baddjuju
Horiible answer. that is static html code and not joomla php code. Sounds like you are giving lazy answers.

Re: search button image?

Posted: Thu Jan 22, 2009 9:00 pm
by baddjuju
Is it just me or no one in the joomla forums has any useful answers? Sounds like people are posting just to make themselves look like they are being helpful. Do yourselves and the rest of the world a favor, get a blog and post your useless info there.

Re: search button image?

Posted: Thu Jan 22, 2009 9:13 pm
by baddjuju
After digging around I found this in the language files,

USE AN IMAGE AS BUTTON=Use an image as button. This image has to be named searchButton.gif and must be located in /images/M_images/

If you open the helper.php file located in the mod_search folder you can change the button name there, in case you require a .png or .jpg file.

I have tried this and it works.

And by the way you don't need to know php to change this. :'(

Re: search button image?

Posted: Wed May 06, 2009 5:16 pm
by astra05
Thank You Baddjuju for solving this :).

Re: search button image?

Posted: Thu Jun 11, 2009 3:35 pm
by priyasdipu
Thank You Baddjuju for solving this, but the button and the search Form is not aligning. Can anybody please help me with the CSS file?

Here is the link of the site.

www.incubation360.com

Re: search button image?

Posted: Fri Jun 12, 2009 4:59 am
by jondiego
if you want to align the search button image use the following css code

For your class "button" add the following

vertical-align:middle;

for the image. It should work. If not let me know.

Re: search button image?

Posted: Fri Jun 12, 2009 5:52 am
by priyasdipu
Thanks for your reply,

But where to find the class button? I searched in the CSS of the template file but could not find one.

All the class related to buttons were:

Code: Select all

td.buttonheading,
.contentpaneopen td.buttonheading {
	padding: 7px 3px 0;
}

td.column_separator {
	padding-left: 15px;
}

td.componentheading {
	padding-bottom: 15px;
}
If there is some other locations, please help me with this.....

Thanks in Advance.........

Re: search button image?

Posted: Sat Jun 13, 2009 5:17 am
by jondiego
I figured out how to solve the search button problem.

Go into your css file. Usually template.css and add this code

.search .button{
position:absolute;
background-image: url('/images/M_images/searchButton.gif');
background-repeat:no-repeat;
width:20px;
height:20px;
}

Go directly to your server or cpanel and upload your image file MAKE SURE TO NAME IT searchButton.gif It's case sensitive. Make sure you upload the image file you want to use to the " /images/M_images/ " folder

Once you have the file uploaded and the css coded, make sure to go into your search module through the admin panel and select "Search Button as image -Yes", "Search Button -Yes"

Hope this helps. It worked for me.

Jon
http://www.CareyWebDesigns.com

Re: search button image?

Posted: Sat Jun 13, 2009 1:42 pm
by priyasdipu
That worked, Many many thanks to you.

I have another small problem and I am not sure how to approach and whats causing the problem.

I use RT_novus template and to fix some error like

Code: Select all

Document.getElementbyId(...) is null or not an object
(after reading from a forum post here) by changing the Menu type to Toolbar Module Position, but there seems to be a gap above the header of the template due to this change.

There is also some gap below the header for some screen resolution and not in others. The gap problem appears in browsers Mozilla and Google Chrome but not in IE. Can you suggest what to do to solve this?

Re: search button image?

Posted: Sun Jun 14, 2009 3:50 am
by jondiego
The top gap is the only difference with FireFox. It has to do with your css.

I would have to see your css file to debug it.

Usually if you have a problem with css setting use the

!important:

css rule

Best Regards,

Jon
www.CareyWebDesigns.com

Re: search button image?

Posted: Sun Jun 14, 2009 4:44 am
by priyasdipu
Here is the CSS file for your reference. I hope you can be able to help me out.

Code: Select all

/* @group Core Elements */

html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	margin: 0;
	padding: 0;
	color: #333;
	font-family: Arial;
	line-height: 135%;
}

body.f-smaller {
	font-size: 10px;
}

body,
body.f-default {
	font-size: 12px;
}

body.f-larger {
	font-size: 15px;
}

p {
  /* setup some more readable paragraph spacing */
       margin-top: 10px;
       margin-bottom: 15px;
}

h1, h2, h3, h4, h4 {
	/* setup some more readable header spacing */
	padding-bottom: 5px;
	margin: 15px 0;
}

h1 { 
	font-size: 200%;
}

h2 {
	font-size: 175%;
}

h3 {
	font-size: 150%;
}

h4 {
	font-size: 120%;
}

a {
	text-decoration: none;
	color: #ab0900;
}

a:hover {
	text-decoration: underline;
}

/* @end */

/* @group Joomla Elements */

.small,
.modifydate,
.createdate,
div.mosimage_caption {
	font-size: 95%;
}

.componentheading {
	font-size: 170%;
	line-height: 100%;
	padding: 0;
	margin: 20px 0 20px 0;
}

.contentheading {
	font-size: 170%;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-family: Tahoma, sans-serif;
	color: #02576B;
}

.search .button {
        position:absolute;
        background-image: url('/images/M_images/searchButton.gif'); 
        background-repeat:no-repeat;
        width:20px;
        height:20px;
        margin-left: 5px;
} 

td.buttonheading,
.contentpaneopen td.buttonheading {
	padding: 7px 3px 0;
}

td.column_separator {
	padding-left: 15px;
}

td.componentheading {
	padding-bottom: 15px;
}

.sectiontableheader {
  font-weight: bold;
  padding: 4px;
  line-height: 20px;
  background: #F3FBFF;
  border-bottom: 1px solid #CEE0E4;
}

tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  text-align: left;
  padding: 4px 0 4px 4px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #CEE0E4;	
}

.sectiontableentry2 {
	background: #F3FBFF;
}

.contentpane,
.contentpaneopen {
	width: 100%;
}

/* @end */

/* @group Structure */

#menu-bar {
	height: 35px;
	background: url(../images/header_topmenu.png) 0 0 repeat-x;
}

#inset {
	height: auto;
        width: 100%;
	background: url(../images/header_top.gif) 0 0 repeat-x;
	overflow: fixed;
        position: relative;
}

#inset .content {
	padding: 200px 0px 10px 20px;
	width: 100%;
}

#content {
	padding-top: 15px;
	padding-bottom: 25px;
	background: #F6FCFC url(../images/page-bg.png) 0 0 repeat-x;
}

#sidecol {
	float: left;
}

#side-column {
	background: #E7F9FB;
	width: 93%;
}

#side-column ul li {
	background: none;
}

#side-column .padding {
	padding: 8px;
}

#side-column .inner {
	background: #fff;
	padding: 8px;
}

#main-column {
	background: #E7F9FB;
        height: 100%;
}

#main-column .padding {
	padding: 8px;
}

#main-column .inner {
	background: #fff;
	padding: 4px;
}

#main-column .contentpadding {
	padding: 10px;
        text-align: left;
        display: inline;
}

#bottom {
	background: #DDEBF1 url(../images/bottom-bg.png) 0 0 repeat-x;
}

#logo {
	width: 214px;
	height: 77px;
        position: absolute;
        background: url(../images/logo.png) 0 0 no-repeat;
	margin-top: 4px;
        margin-left: 5px;
}

#topmodules,
#component,
#bottommodules {
	overflow: hidden;
}

#component .padding {
	padding-left: 10px;
}

#content.extraspace #component .padding{
	padding-right: 25px;
}

.spacer .block {
	float: left;
}

.spacer .w99 .block {
	width: 99%;
}

.spacer.w49 .block {
	width: 49%;
}

.spacer.w33 .block {
	width: 33%;
}

img#rocket {
	width: 146px;
	height: 24px;
	border: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	background: url(../images/rocket.png) 0 0 no-repeat;
}

/* @end */

/* @group Modules */

.moduletable,
.moduletable-hilite1 {
	margin-top: 0px;	
	margin-bottom: 20px;
}

.moduletable h3,
.moduletable-hilite1 h3 {
	background: #DAEFFA url(../images/module-h3.png) 0 0 repeat-x;
	padding: 5px 0 5px 8px;
	font-family: Tahoma, Helvetica, Arial Narrow;
	font-size: 120%;
	color: #02576B;
	border-top: 1px solid #B7ECF5;
	border-left: 3px solid #B7ECF5;
	border-right: 3px solid #B7ECF5;
	border-bottom: 1px solid #B7ECF5;
	margin: 5px 0 10px 0;
}

#inset .moduletable h3 {
	background: none;
	border: none;
	font-family: Tahoma;
	font-size: 180%;
	color: #02576B;
	margin: 5px 0 10px 0;
	padding: 0;
	text-transform: none;
	font-weight: normal;
}

#top .moduletable {
	background: #F3FBFF;
	border: 1px solid #CEE0E4;
	padding: 5px;
	margin: 5px 5px 20px 5px;
}

#topmodules .moduletable {
	margin: 0 10px 0 5px;
}

#topmodules .moduletable {
	background: url(../images/module-corner.png) 0 100% no-repeat;
	padding: 0 0 15px 17px;
}

#side-column .moduletable-hilite1 {
	background: #F2FEFF url(../images/hilite1-bg.png) 0 100% no-repeat;
	border: 1px solid #D7EBF0;
	padding: 8px;
}

#side-column .moduletable-hilite1 h3 {
	background: none;
	border: none;
	font-family: Tahoma;
	font-size: 130%;
	color: #02576B;
	margin: 0px 0 10px 0;
	padding: 0;
	text-transform: none;
	font-weight: normal;
}

#bottommodules .moduletable {
	background: #fff url(../images/bottommod-bg.png) 0 0 repeat-x;
	border: 1px solid #D7EBF0;
	margin-left: 5px;
	margin-right: 5px;
	padding: 5px;
}

#bottommodules .moduletable h3,
#topmodules .moduletable h3,
#top .moduletable h3 {
	background: none;
	border: none;
	font-family: Tahoma;
	font-size: 130%;
	color: #02576B;
	margin: 0 0 10px 0;
	padding: 0;
	text-transform: none;
	font-weight: normal;
}

#bottom .moduletable h3 {
	font-family: Tahoma;
	font-size: 140%;
	color: #465F65;
	border-bottom: 1px solid #fff;
	border-top: none;
	border-left: none;
	border-right: none;
	margin: 40px 0 10px 0;
	background: none;
	padding: 0 0 5px 0;
	text-transform: none;
	font-weight: normal;
}

#footermodules .moduletable {
	margin-right: 5px;
	margin-left: 5px;
}

/* @end */

/* @group Horizontal Menu */

#horiz-menu {
	height: 35px;
}

#horiz-menu ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#horiz-menu li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	background: none;
}

#horiz-menu a {
	white-space: nowrap;
	font-family: Arial Narrow, Helvetica, sans-serif;
	color: #FFFFFF;
	display: block;
	float: left;
	height: 35px;
	line-height: 35px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0px 15px 0px 15px;
}

#horiz-menu li.active,
#horiz-menu li.active_menu {
	background: url(../images/active-menu-r.png) 100% 0;
}

#horiz-menu li.active a,
#horiz-menu li.active_menu a {
	background: url(../images/active-menu-l.png) 0 0 no-repeat;
	color: #000;
        font-weight: bolder;
}

#horiz-menu a:hover {
	text-decoration: none;
	color: #ccc;
        font-weight: bolder;
}

/* @end */

/* @group Sub Menu */

#side-column ul.menu {
	margin: 0;
	padding: 0;
}

#side-column ul.menu li {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
}

#side-column ul.menu li.active a {
	color: #000;
}

a#active_menu.mainlevel {
	color: #000;
}

#side-column ul.menu li.active li a {
	font-weight: normal;
	font-size:  100%;
	color: #ab0900;
}

#side-column ul.menu span {
	display: block;
}

#side-column ul.menu a {
	display: block;
	line-height: 25px;
	text-indent: 20px;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 120%;
	color: #ab0900;
}

#side-column ul.menu ul {
	margin-left: 35px;
	padding: 0;
}

#side-column ul.menu ul ul {
	padding: 0;
	margin: 0;
}

#side-column ul.menu li li {
	padding: 0;
	margin: 0;
}

#side-column ul.menu ul a {
	background-image: none;
	text-indent: 0;
	line-height: 25px;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 100%;
}

#side-column ul.menu ul ul a {
	text-indent: 15px;
}

#side-column ul.menu ul ul ul a {
	text-indent: 30px;
}

/* @end */

/* @group Mainmenu */

a.mainlevel {
	display: block;
	line-height: 20px;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 120%;
	background: none;
	color: #ab0900;
}

a.sublevel {
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	line-height: 25px;
	padding-left:  5px;
	text-indent: 3px;
	display: block;
	float: left;
	width: 80%;
}

/* @end */

/* @group Content Styles */

/* @group Readon */

.readon {
	font-family: Arial Narrow, Helvetica, sans-serif;
	font-weight: bold;
	font-style: italic;
	display: block;
	margin: 10px 0 0px 0;
	background: #E2F6F9 url(../images/readon.png) 100% 50% no-repeat;
	text-decoration: none;
	color: #333;
	padding: 3px 15px 3px 5px;
	border: 1px solid #F3FBFD;
	width: 75px;
}

a.readon:hover {
	text-decoration: underline;
}

#inset .readon {
	background: url(../images/inset-readon.png) 0 0 no-repeat;
	border: 0;
	color: #fff;
	font-weight: normal;
	display: block;
	width: 78px;
	height: 23px;
	float: right;
	margin: 10px 0 0 0;
}

/* @end */

/* @group Pathway */

span.pathway {
	display: block;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 10px;
	margin-top: 5px;
	padding-left: 10px;
}

span.pathway img {
	float: left;
	width: 9px;
	height: 11px;
	padding-right: 10px;
	background: url(../images/bullet.png) 0 50% no-repeat;
}

span.pathway a {
	float: left;
	padding: 0 10px 0 0;
}

/* @end */

/* @group Typography */

ul {
	padding-left: 0;
	margin-left: 10px;
}

ul li {
	list-style: none;
	margin-left: 0;
	margin-bottom: 5px;
	padding-left: 10px;
	background: url(../images/bullet-2.png) 0 6px no-repeat;
}

pre {
	padding: 10px;
	background: #F3FBFF;
	border: 1px solid #CEE0E4;
	color: #02576B;
}

blockquote {
	color: #02576B;
	font-style: italic;
	font-size: 110%;
	line-height: 150%;
	width: auto;
	padding: 10px 10px 10px 30px;
	margin: 15px 0;
	background: #F3FBFF url(../images/quote.png) 0 0 no-repeat;
	border: 1px solid #CEE0E4;
}

span.alert {
	color: #c00;
	border-top: 3px solid #fe7b7a;
	border-bottom: 3px solid #fe7b7a;
	background: #FFD6D6 url(../images/status-alert.png) 10px 50% no-repeat;
}

span.info {
	color: #0055BB;
	border-top: 3px solid #629de3;
	border-bottom: 3px solid #629de3;
	background: #D8E5F8 url(../images/status-info.png) 10px 50% no-repeat;
}

span.note {
	color: #B79000;
	border-top: 3px solid #fde179;
	border-bottom: 3px solid #fde179;
	background: #FEF6D8 url(../images/status-note.png) 10px 50% no-repeat;
}

span.download {
	color: #57861A;
	border-top: 3px solid #c2df88;
	border-bottom: 3px solid #c2df88;
	background: #EEF7DD url(../images/status-download.png) 10px 50% no-repeat;
}

/* @end */

/* @group Notice Styles */

span.alert,
span.info,
span.download,
span.note {
	display: block;
	padding: 10px 10px 10px 45px;
	margin: 15px 0;	
}

/* @end */

a.nounder {
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

a.nounder:hover {
	text-decoration: none;
}

.clr {
	clear:both;
}

fieldset.input {
	border: 0;
}

/* @end */

Re: search button image?

Posted: Sun Jun 14, 2009 4:56 am
by jondiego
Try this:

Change your css

#menu-bar {
height: 35px;
background: url(../images/header_topmenu.png) 0 0 repeat-x;
}


to

#menu-bar {
height: 35px;
background: url(../images/header_topmenu.png) 0 0 repeat-x;
margin-top:0px;
}

Re: search button image?

Posted: Sun Jun 14, 2009 4:57 am
by jondiego
If that doesn't work, try this.

#menu-bar {
height: 35px;
background: url(../images/header_topmenu.png) 0 0 repeat-x;
padding-top: 0px;
}

Re: search button image?

Posted: Sun Jun 14, 2009 5:22 am
by priyasdipu
Both of these dont seem to work, but when i tried for Margin-top: -5px, it works but the template is getting spoiled in IE.

Please help.

Thanks for your patience in helping me out.

Re: search button image?

Posted: Sun Jun 14, 2009 5:25 am
by jondiego
Use this for Firefox

margin-top:-5px;!important

Re: search button image?

Posted: Sun Jun 14, 2009 5:36 am
by jondiego
Sorry,

It should be more like this

margin-top:-5px !important;

Re: search button image?

Posted: Sun Jun 14, 2009 5:52 am
by priyasdipu
Check now, the problem is solved in Firefox, but the appears odd in IE. Check this and let me know.

Re: search button image?

Posted: Sun Jun 14, 2009 5:56 am
by jondiego
Like I said before it should be

margin-top: 0px !important;



rather than

margin-top:-5px !important;

This should work.

Re: search button image?

Posted: Sun Jun 14, 2009 6:08 am
by priyasdipu
This doesnt work, my friend

Re: search button image?

Posted: Sun Jun 14, 2009 7:14 am
by priyasdipu
Still, this is not working


Another issue with the login module. After login, I am getting this message. "Table 'incubati_jo151.jos_jam_receivers' doesn't exist SQL=SELECT COUNT(id) FROM `jos_jam_receivers` WHERE rid = 62 AND inbox = 1 AND state = 0"

Ne ideas regarding this?

Re: search button image?

Posted: Sun Jun 14, 2009 7:32 am
by jondiego
It appears that you are missing a table in your db, maybe the wrong prefix. I believe default prefix for db table is jos_

Re: search button image?

Posted: Sun Jun 14, 2009 7:40 am
by priyasdipu
But when I perform the check, all appears to be fine.

And how to check if I am missing it or not?

Re: search button image?

Posted: Fri Jun 19, 2009 4:20 pm
by baddjuju
You can view this example that I built using an image for the search button. It is a 1.5 website. Remeber that you need to go into the module manager and set the search module to an image before modifying the joomla helper.php file. Feel free to download the CSS and page to see how I aligned the image.

http://www.mybizexpress.com/joomla

Re: search button image?

Posted: Fri Jun 19, 2009 6:20 pm
by priyasdipu
The aligning of the Search box and the image is solved, now the number of words in the search box seems to be the problem.

In joomla 20 is the default number of words supported and there are no options in the search module to increase this.

Does anybody have the idea to tweak around this?