The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Search Hover in Topics

View previous topic View next topic Go down

Solved Search Hover in Topics

Post by Ace 1 on September 11th 2015, 2:50 pm

I want a search bar to appear when I hover over a topic on my forums. I found the following code on the Forumotion site, but it's in HTML...

Code:
<input class="inputbox search" name="search_keywords" value="Search archives..." onfocus="if (this.value == 'Search archives...') this.value = ''" onblur="if (!this.value) this.value = 'Search archives...'" type="text">

Any help?


Last edited by Ace 1 on September 11th 2015, 9:59 pm; edited 1 time in total

Ace 1
Forumember

Male Posts : 689
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ange Tuteur on September 11th 2015, 3:13 pm

Hi @Ace 1,

Just add the following to the description of a forum or category :
Code:
<form method="get" action="/search?search_where=42">
  <input name="search_keywords" class="inputbox search" value="Search..." onclick="if (this.value == 'Search...') this.value = '';" onblur="if (this.value == '') this.value = 'Search...';" type="text">
  <input class="button2" value="Search" type="submit">
</form>

Replace 42 by the id of the forum. If any questions let me know.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ace 1 on September 11th 2015, 4:28 pm

This works, but it's not transparent like on ForuMotion...

Ace 1
Forumember

Male Posts : 689
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ange Tuteur on September 11th 2015, 4:41 pm

You need to add CSS for that. Zen

For example :
Code:
.row form[action^="/search"] {
  opacity:0;
  visibility:hidden;
  transition:300ms;
}

.row:hover form[action^="/search"] {
  opacity:1;
  visibility:visible;
}

You can replace form[action^="/search"] by a class if you add one to the form. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ace 1 on September 11th 2015, 6:07 pm

Uh, when I hover the whole forum, the search bar appears. Anyway you give me a code to make it appear if I hover over the transparent search bar?

Ace 1
Forumember

Male Posts : 689
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ange Tuteur on September 11th 2015, 6:37 pm

I'm not sure how you'll find it if you don't know where it is.. but Shocked
Code:
.row form[action^="/search"] {
  opacity:0;
  transition:300ms;
}

.row form[action^="/search"]:hover {
  opacity:1;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ace 1 on September 11th 2015, 8:10 pm

Uh Idk lol. It's cool how it actually. Do you know how to make the input a smaller size and right justified like on ForuMotion?

The search bar is hella long lol. I want it short like Fm's

Ace 1
Forumember

Male Posts : 689
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ange Tuteur on September 11th 2015, 8:58 pm

Oh right, I didn't think of that. xD

You can use float:right; to put the search all the way on the right. CSS for that :
Code:
.row form[action^="/search"] {
  float:right;
}

Then to set a default width for the field use this rule :
Code:
.row form[action^="/search"] .inputbox {
  width:125px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ace 1 on September 11th 2015, 9:59 pm

Thanks

I like when you help me :D

Ace 1
Forumember

Male Posts : 689
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Search Hover in Topics

Post by Ange Tuteur on September 12th 2015, 12:09 am

You're welcome ^^

Topic archived

Have a good weekend. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum