Not Solved Center a Input/Search field?
#1
Not Solved
So I'm designing a theme for my MyBB forum, and I'm trying to center the search field. Here's what I have:

[Image: zovTFgV.png]

I did some reading and they said the problem is that input/search fields are inline-block by default, and to make them display: block; but that didn't seem to do anything. How can I get this centered?

Here's whats in my Header template:

<div id="container">
 <a name="top" id="top"></a>
<div id="header">
<div id="logo">
<div class="wrapper">


<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" style="
    margin: 2px 10px -38px -1px;
    font-size: 39px;" /></a>
<ul class="menu top_links">
<a href="{$mybb->settings['bburl']}/index.php">HOME</a>
<a href="{$mybb->settings['bburl']}/index.php">MEMBERLIST</a>
<a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">HELP</a>
<a href="{$mybb->settings['bburl']}/index.php">SHOP</a>
<a href="{$mybb->settings['bburl']}/index.php">CONTACT</a>
</ul>
</div>
</div>
<div id="panel">

<div id="content">

<div class="wrapper" style="
    background: #272727;
    border: 1px solid #464646;
    padding: 11px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.52), 0 0 1px #000000;
">

<div class="navmenu" style="background: #333333;color: #9c9c9c;margin-left: -12px;ma;margin-top: -12px;margin-bottom: 30px;margin-right: -12px;border: 1px solid #464646;padding: 10px 8px;"><i class="fa fa-list" style="font-size: 20px;margin-left: 5px;margin-top: 9px;    color: #cccccc;
    text-shadow: 1px 1px 1px #171717;"></i> <i class="fa fa-plus-square" style="font-size: 20px;margin-left: 14px;margin-top: 9px;     color: #cccccc;
    text-shadow: 1px 1px 1px #171717;"></i> <span style="
    font-size: 20px;
    color: #cccccc;
    padding: 10px;
    text-shadow: 1px 1px 1px #171717;
    text-transform: uppercase;
">BTC = $6,113.02</span>

<form role="search" method="get" id="searchform" class="searchform" action="#" _lpchecked="1" style="display: inline-block;">

<div class="searchboxwrapper">
  
<input class="searchbox" type="text" value="" name="s" placeholder="Search..." id="s">
  
<input class="searchsubmit" type="submit" id="searchsubmit" value="">
 

</div>
</form>

<img style="
    border-radius: 100%;
    height: 45px;
    width: 45px; float: right;margin-top: -4px;" src="{$mybb->user['avatar']}" /><i class="fa fa-bell" style="font-size: 20px;margin-right: 14px;margin-top: 9px;float: right;    color: #cccccc;
    text-shadow: 1px 1px 1px #171717;"></i>  <i class="fa fa-inbox" style="font-size: 20px;margin-right: 14px;margin-top: 9px;float: right;    color: #cccccc;
    text-shadow: 1px 1px 1px #171717;"></i></div>
{$pm_notice}
{$remote_avatar_notice}
{$remote_profile_picture_notice}{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$awaitingusers}

and then here's the CSS for the search bar:

.searchform div {
width: 193px;
}

.searchboxwrapper {
position: relative;
}

.searchbox {
width: 438px;
display: initial !important;
padding: 7px 9px;
border-radius: 2px;
color: #C9C9C9;
background-color: rgb(46, 46, 46);
border: 1px solid #444444;
}

.searchsubmit {
    font-family: 'FontAwesome';
    width: 20px;
    height: 24px;
    font-size: 12px;
    position: absolute;
    top: 4px;
    right: -255px;
    background: transparent;
    border: none;
    color: #969696;
    cursor: hand;
    cursor: pointer;
}

Tried figuring it out myself but idk


Messages In This Thread
Center a Input/Search field? - by Thanos - 2018-08-13, 03:41 AM
RE: Center a Input/Search field? - by effone - 2018-08-13, 05:27 AM
RE: Center a Input/Search field? - by Thanos - 2018-08-13, 06:00 AM
Center a Input/Search field? - by effone - 2018-08-13, 06:55 AM

Forum Jump:


Users browsing this thread: 1 Guest(s)