When applying this code i got the result of the photo attached.
http://i.imgur.com/kzkFAuk.png
You'll see that the search bar now has the icon on the wrong side and is still bleeding out of the intended place inside the mid bar.
This is the coding from my entire navbar section in vbulletin: (maybe it can be of somehelp? I believe both the search and the midbar are in this coding. )
<div id="navbar" class="navbar">
<ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">
{vb:raw template_hook.navtab_start}
{vb:raw navigation}
{vb:raw template_hook.navtab_end}
</ul>
</div>
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<vb:if condition="$stylevar['titleimage']"><a name="top" href="{vb:link forumhome}" id="logo"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a>
<a href="http://store.killbillet.com/" target="_blank"><img class="banner-custom" src="/images/finished.gif" /></a>
</vb:if>
<vb:if condition="$vboptions['enablesearches']">
<div class="searchBox">
<!-- search form -->
<form action="search.php?{vb:raw session.sessionurl}do=process" method="post">
<vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="process" />
<ul>
<li><div class="searchWrap"><input class="searchinput" type="text" name="query" tabindex="1004" value="Type Here..." onfocus="if (this.value == 'Type Here...') this.value = '';" onblur="if (this.value == '') this.value = 'Type Here...';" size="23" /></div></li>
<li><input type="image" src="{vb:stylevar imgdir_themedir}/searchButton-{vb:stylevar left}.png" value="Search" alt="Submit" /></li>
</ul>
</form>
<!-- / search form -->
</div>
<div class="bannerBox">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
</vb:if>
</div>
</div><!-- closing div for above_body -->
<!-- Custom Content Wrap -->
<div id="midBar" class="clearfix">
<vb:if condition="$show['member']">
<div id="toplinks" class="toplinks clearfix">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:ra w bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
<vb:if condition="$show['registerbutton']">
<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if>
<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
<vb:if condition="$notifications_total">
<li class="popupmenu notifications" id="notifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
<ul class="popupbody popuphover">
{vb:raw notifications_menubits}
</ul>
</li>
<vb:else />
<li class="popupmenu nonotifications" id="nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
<ul class="popupbody popuphover">
<li>{vb:rawphrase no_new_messages}</li>
<vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
</ul>
</li>
</vb:if>
<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
{vb:raw template_hook.header_userinfo}
<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
</div>
<vb:else />
<div class="welcomeWrap"><div class="welcomeBar">
<vb:if condition="$show['registerbutton']">
<a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow" class="registerButton"><img src="{vb:stylevar imgdir_themedir}/button-register.png" alt="{vb:rawphrase register}" /></a>
</vb:if>
</div></div>
<div class="loginWrap"><div class="loginBox">
<!-- login form -->
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<ul class="clearfix">
<li class="inputPad"><div class="loginBoxInput"><input type="text" class="loginInput<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" /></div></li>
<li><div class="loginBoxInput"><input type="password" class="loginInput" tabindex="102" name="vb_login_password" id="navbar_password" size="10" /><input type="text" class="loginInput default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" /></div></li>
<li class="submitButton"><input type="image" src="{vb:stylevar imgdir_themedir}/loginButton.png" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /></li>
</ul>
<div class="loginBottom">
<a href="login.php?do=lostpw">Forgot Username?</a>
<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
</div>
<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<script type="text/javascript">
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
vB_XHTML_Ready.subscribe(function()
{
//
YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
});
function navbar_username_focus(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
{
//
textbox.value='';
textbox.style.color='{vb:stylevar input_color}';
}
}
function navbar_username_blur(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
//
textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
textbox.style.color='{vb:stylevar shade_color}';
}
}
function navbar_password_hint(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
YAHOO.util.Dom.get('navbar_password').focus();
}
function navbar_password(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
}
}
</script>
</div></div>
</vb:if>
</div>
<div id="breadcrumb" class="breadcrumb">
<div class="bcLeft"><div class="bcRight"><div class="bcWrap">
<ul class="floatcontainer">
<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
{vb:raw navbits.breadcrumb}
{vb:raw navbits.lastelement}
</ul>
<hr />
</div></div></div>
</div>
<div id="contentMain"><div class="contentWrap">
<div class="contentLeft"><div class="contentRight">
<div class="contentTL"><div class="contentTR"><div class="contentBL"><div class="contentBR">
<div class="contentBodyWrap">
<div class="body_wrapper">
{vb:raw ad_location.ad_navbar_below}
{vb:raw ad_location.global_below_navbar}
<vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'">
<form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices">
<input type="hidden" name="do" value="dismissnotice" />
<input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
<input type="hidden" name="url" value="{vb:raw return_link}" />
<ol>
{vb:raw notices}
</ol>
</form>
</vb:if>
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the +1 button to render -->
<g
lusone></g
lusone>
--------------- Added [DATE]1418072631[/DATE] at [TIME]1418072631[/TIME] ---------------
I just used FireBug in Mozilla to try and place it. Could it possibly be that I am using this program? I wanted to see the changes before applying them to the actual code.
Am i supposed to take out the searchBox class all together and just make it a div with the styles you have highlighted in red then?
--------------- Added [DATE]1418072749[/DATE] at [TIME]1418072749[/TIME] ---------------
And do I only need to move that section of the searchbox you posted. What about the coding above it : <vb:if condition="$vboptions['enablesearches']"> ??
More Information