[Answered] .globalsearch problem

[svsanchez]

Hello, I need to tell . globalsearch to show it's contents a little further below where it actually is, because It doesn't let me click on my right-most links in the navbar. Please help, you can see what I mean by going here and trying to click on the right-most links in the navbar ("Lideres" and "Blogs").

https://www.deguate.com/foros/forums.php

Thank you!

[TheLastSuperman]

I can't view a forum here http://www.deguate.com/foros/forums.php only a cms type of system with broken images at the moment... Although I would think you could simply add this to additional.css to move:

#globalsearch, .globalsearch {
margin-top:26px !important;
}

span.buttoncontainer {
-moz-border-radius-bottom{vb:stylevar right}:5px;
-webkit-border-bottom-{vb:stylevar right}-radius:5px;
border-bottom-{vb:stylevar right}-radius:5px;
}

.navbar_advanced_search {
display:none !important;
}

*However please note that:
We moved the Search down to the sub-menus area where the "Advanced Search" link normally is, moving this to the left (and trying to still include the advanced search link) could make it overlap sub-menu links depending on what part of the site your navigating etc so I told it via CSS to "hide" the "Advanced Search" link. I also told it in the css to round the bottom right corner of the search button i.e. the magnifying glass otherwise it had a straight edge on right and looked sloppy. This is a work-around to what you wanted and I hope it helps .

[John Lester]

Note that moving the text box down will leave a mismatched color area above the text box (it won't be the same color as the navbar). At least it does here when I fool around with it in firebug

- - - Updated - - -

I remember fooling around with this awhile back and decided it was easier to hide the search box with template edits and make a search forums navtab

[TheLastSuperman]

Note that moving the text box down will leave a mismatched color area above the text box (it won't be the same color as the navbar). At least it does here when I fool around with it in firebug

- - - Updated - - -

I remember fooling around with this awhile back and decided it was easier to hide the search box with template edits and make a search forums navtab

Hmm your right and it's due to the border/bevel... use this instead of the above you two:

.globalsearch .textboxcontainer span {
border-left: 1px solid transparent !important;
border-top: 1px solid transparent !important;
}

.globalsearch .buttoncontainer span {
border-left: 1px solid transparent !important;
border-top: 1px solid transparent !important;
-moz-border-radius-bottom{vb:stylevar right}:5px;
-webkit-border-bottom-{vb:stylevar right}-radius:5px;
border-bottom-{vb:stylevar right}-radius:5px;
}

.navbar_advanced_search {
display:none !important;
}

Edit: Related post - https://www.vbulletin.com/forum/show...c-search-field

[John Lester]

I saw your css on the other thread TLS but since I already made mine a navtab I have yet to try it. Perhaps I'll give it a go on the test site

Doh! The css hiding would be better than a template edit

[svsanchez]

Hello TLS, your first solution worked for me, I don't see the color mismatch that John is refering to. Thank you very much!

[TheLastSuperman]

Hello TLS, your first solution worked for me, I don't see the color mismatch that John is refering to. Thank you very much!

svsanchez that's good to hear .

John please let me know how htis works for you when you have time .

[John Lester]

John please let me know how htis works for you when you have time .

Ok so I wasn't that tired and thought I'd screw around with this. This is what I came up with, next step I'm considering is adding the text "Search" to the left of the input box. Haven't decided if I want to though

/* CSS to drop search box down below the navtabs */
#globalsearch, .globalsearch {
margin-top:26px !important;
}

.navbar_advanced_search {
display:none !important;
}

/* CSS to erase borders around input box and search button */
.navbar_search input {
    border: 0px !important;
    font-size: 11px;
    padding: 1px;
    vertical-align: middle;
}
.globalsearch .textboxcontainer {
    border-left: 0px !important;
    display: inline-block;
    float: left;
    height: 26px;
    text-align: center;
}
.globalsearch .textboxcontainer span {
    border-left: 0px !important;
    border-top: 0px !important;
    display: inline-block;
    height: 22px;
    margin-bottom: 1px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 3px;
    width: 147px;
}
.globalsearch input.textbox {
    width: 140px;
}

.globalsearch .buttoncontainer {
    border-left: 0 none !important;
    border-right: 0 none !important;
    display: inline-block;
    float: left;
    height: 26px;
    overflow: hidden;
    width: 25px;
}

.globalsearch .buttoncontainer span {
    border-left: 0 none !important;
    border-top: 0 none !important;
    display: inline-block;
    height: 23px;
    padding-left: 10px;
    padding-top: 2.5px;
}

.globalsearch .searchbutton {
    border: 0 none;
    margin-left: -2px;
    margin-top: -2px;
    padding: 0;
    width: 22px;
}

See the attachment for how it looks on the vanilla test site.



This is what it looked like with your css TLS.

[TheLastSuperman]

Ohh now I like the time spent John, very clean looking "Mikey Likey" .

[John Lester]

Ty I like the cleanness as well, which is why I haven't replaced the magnifying glass with "search". I'm going to see if I can find out how to put text in the input box (I've seen it other places but I can't recall where) so in the input box it would say "Search here ..." and the input goes blank when you click in it to add your search terms.

[John Lester]

So I was thinking that I would have to use JS to do this (and I don't know much JS yet) until I stumbled across a link that pointed me to a new HTML element for HTML 5 called placeholder. When you click in the search box the input box clears for the user to enter their search words

NOTE: I just checked with IE and it doesn't appear to support the placeholder element yet

This is what I did

ACP -> Styles & Templates -> Style Manager -> style -> Edit Templates -> Navbar

Find

<span class="textboxcontainer"><span><input type="text"

After add (you can change Search here... to whatever you want obviously)

 placeholder="Search here..."

Complete span look like

<span class="textboxcontainer"><span><input type="text" placeholder="Search here..." value="" name="query" class="textbox" tabindex="99"/></span></span>

What it looks like on screen


- - - Updated - - -

Supposedly this (link below) will work in IE as well, but I have no idea where to place the script or the

$.fn.placeholder();

http://corymathews.com/html5-placeholder-in-ie/