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.

Positioning Search Bar

View previous topic View next topic Go down

Solved Positioning Search Bar

Post by TruStealth™ on January 20th 2014, 2:47 am

Below is a pic where I would like to move it to


TruStealth™
Forumember

Posts : 107
Reputation : 1
Language : English

http://Sorry.No-Forum-Address-Given.sorry

Back to top Go down

Solved Re: Positioning Search Bar

Post by Ange Tuteur on January 20th 2014, 4:29 pm

Hello BewizPro,

Since we cannot publicly view your forum to see this search bar, did you apply this from the templates ? If so did you also add some CSS to your sheet for it ?

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Positioning Search Bar

Post by TruStealth™ on January 20th 2014, 4:46 pm

@Ange Tuteur wrote:Hello BewizPro,

Since we cannot publicly view your forum to see this search bar, did you apply this from the templates ? If so did you also add some CSS to your sheet for it ?
Yes here is the codes i used

Code:
<div id="search" class="attach">
<form method="get" action="/search?search_where=11" id="search-box">
<fieldset>
<label for="main_search" class="hide"></label>
<a href="/search" title="Advanced Search" accesskey="4" rel="search" id="adv_search" class="attach"></a>
<span id="search_wrap">
<input type="text" name="search_keywords" id="main_search" maxlength="128" value="Search..." onclick="if (this.value == 'Search...') this.value = '';" onblur="if (this.value == '') this.value = 'Search...';">
<span class="choice ipbmenu clickable" id="search_options" style="">CSSTips</span>
<input type="submit" class="submit_input clickable" value=""></span>
</fieldset>
</form>
</div>


CSS Code:
Code:
.attach{float: right;}
.hide{display: none;}
#adv_search{width: 16px;
height: 16px;
background: url(http://community.invisionpower.com/filestore/public/style_images/master/advanced_search.png) no-repeat right 50%;
text-indent: -3000em;
display: inline-block;
margin: 4px 0 4px 4px;}
#search_wrap{position: relative;
background: white;
display: block;
padding: 0 26px 0 4px;
height: 26px;
line-height: 25px;
-moz-border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
min-width: 230px;}
#main_search {margin-top: 5px;
font-size: 12px;
border: 0;
padding: 0;
background: transparent;
width: 130px;
outline: 0;}
#search_options {font-size: 10px;
height: 20px;
line-height: 20px;
margin: 3px 3px 3px 0;
padding: 0 6px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #EAEAEA;
display: inline-block;
float: right;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;}
#search .submit_input {background: #7BA60D url(http://community.invisionpower.com/filestore/public/style_images/master/search_icon.png) no-repeat 50%;
text-indent: -3000em;
padding: 0;
border: 0;
border: 1px solid #7BA60D;
display: block;
width: 26px;
height: 26px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
-webkit-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);}

TruStealth™
Forumember

Posts : 107
Reputation : 1
Language : English

http://Sorry.No-Forum-Address-Given.sorry

Back to top Go down

Solved Re: Positioning Search Bar

Post by Ange Tuteur on January 20th 2014, 4:56 pm

Use this CSS to reposition the searcher :
Code:
.attach {
position:absolute;
top:50px;
right:20px;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Positioning Search Bar

Post by TruStealth™ on January 20th 2014, 5:18 pm

One problem now when I move the search box i got this problem now

TruStealth™
Forumember

Posts : 107
Reputation : 1
Language : English

http://Sorry.No-Forum-Address-Given.sorry

Back to top Go down

Solved Re: Positioning Search Bar

Post by Ange Tuteur on January 20th 2014, 5:40 pm

Add the following code to your CSS, I didn't notice that also shared the same class name.

Code:
#adv_search.attach { position:static; }

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Positioning Search Bar

Post by TruStealth™ on January 20th 2014, 5:58 pm

okay now i can't see the advance search so it's not gonna be able to be used? Or do I need to move it to the front of the search box?

TruStealth™
Forumember

Posts : 107
Reputation : 1
Language : English

http://Sorry.No-Forum-Address-Given.sorry

Back to top Go down

Solved Re: Positioning Search Bar

Post by Ange Tuteur on January 20th 2014, 6:00 pm

I'll be honest, I didn't see it to begin with. Shocked

If you want to move it around, remove the last code and position it relatively.

Code:
#adv_search.attach {
position:relative;
top:0px;
left:0px;
bottom:0px;
right:0px;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Positioning Search Bar

Post by TruStealth™ on January 20th 2014, 6:03 pm

okay ill see what the results are and I will get back with updates for this topic for the mean time I will be testing what the results are. so please don't "Close" this topic thanks.

TruStealth™
Forumember

Posts : 107
Reputation : 1
Language : English

http://Sorry.No-Forum-Address-Given.sorry

Back to top Go down

Solved Re: Positioning Search Bar

Post by TruStealth™ on January 20th 2014, 7:05 pm

Thread is "Solved" and can be closed and "Archived" thanks for the help @Ange Tuteur.

TruStealth™
Forumember

Posts : 107
Reputation : 1
Language : English

http://Sorry.No-Forum-Address-Given.sorry

Back to top Go down

Solved Re: Positioning Search Bar

Post by Ange Tuteur on January 20th 2014, 7:28 pm

You're welcome Smile

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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