search button image?

[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!

[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>

[baddjuju]

Horiible answer. that is static html code and not joomla php code. Sounds like you are giving lazy answers.

[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.

[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.

[astra05]

Thank You Baddjuju for solving this .

[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

[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.

[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.........

[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

[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?

[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

[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 */

[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;
}

[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;
}

[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.

[jondiego]

Use this for Firefox

margin-top:-5px;!important

[jondiego]

Sorry,

It should be more like this

margin-top:-5px !important;

[priyasdipu]

Check now, the problem is solved in Firefox, but the appears odd in IE. Check this and let me know.

[jondiego]

Like I said before it should be

margin-top: 0px !important;



rather than

margin-top:-5px !important;

This should work.

[priyasdipu]

This doesnt work, my friend

[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?

[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_

[priyasdipu]

But when I perform the check, all appears to be fine.

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

[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

[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?