Public Forums 71,145 posts

[sukinoz Friend sukinozJoin date: December 2013Posts: 44Downloads:107Uploads:5 Thanks: 13 Thanked: 2 times in 2 posts]

#842833

Hello,

My website visitors dont know how to use the Search Bar option, by pressing the "enter" in keyboard. (the try to press with mouse the "search icon")

I would like if the "search icon" (or other) shoud be clickeable.

I want to say… How can i add a "Search Button" to press for search the word introduced?

Thanks

[sukinoz Friend sukinozJoin date: December 2013Posts: 44Downloads:107Uploads:5 Thanks: 13 Thanked: 2 times in 2 posts]

#842900

i think i have it…

• delete (or rename) the /templates/purity_iii/html/mod_search/default.php

• in module "search" at jooma backend: Search Button and Search Button Image options = Yes Box Text = "Search…" Module Class Suffix = "topbar"

• load and image button searchButton.gif (attached here) to /templates/purity_iii/images/

• add to the custom.css

.head-search .searchtopbar { background: #0067a2; }

.head-search .form-control { margin: 0; padding: 0 0 0 5px; width: 60px; }

.searchtopbar input[type="image"] { padding: 0; margin: 0 5px -5px 0; }

Sure there mistakes (my css is very poor) … but seems to work.

Hope it will be usefull for someone else.

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#844287

Hello sukinoz
I can see the search button is working on your site .
Thanks for sharing solution for other members , I marked it as TIP .

[sukinoz Friend sukinozJoin date: December 2013Posts: 44Downloads:107Uploads:5 Thanks: 13 Thanked: 2 times in 2 posts]

#844768

wait a moment…

in mobile view there is a problem: the search buttom image is shown under the text box, not at the right side of it.

any solution?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#845028

Hi
sorry as there is not enough space its not able to fit in the mobile layout . > http://prntscr.com/9p0u4n
You can change icon padding but it also look bad as there is very less space in mobile layout .

[sukinoz Friend sukinozJoin date: December 2013Posts: 44Downloads:107Uploads:5 Thanks: 13 Thanked: 2 times in 2 posts]

#846756

OK OK OK…

Now i have it!

Users wants "Search Button", so, i give it to them: A "SEARCH BUTTON" LINKED TO THE SEARCH PAGE!

Unpublish the Search Module in "head-search" position

create a Custom HTML: Code:

<a href="index.php?option=com_search&view=search&Itemid=1070" title="Buscar Ambientales"><i class="fa fa-search"></i></a>

Module Class Sufix: "(space)search-top-button" Positon: Head-Search

in custom.css added:

.search-top-button > a {
    display: block;
    position: relative;
    float: left;
    padding: 15px 10px;
    background: #0067A2;
    height: 55px;
    width: 40px;
    color: #bbe6ff;
    text-align: center;
}
.search-top-button > a:hover {
    background: #0067A2;
    color: #fff;
}

Now SOLVED

[Author]

Posts