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
#2
Not Solved
Please post your board url. That will be helpful implementing changes live while testing and to provide perfect solution rather than repeated trial-error.
#3
Not Solved
(2018-08-13, 05:27 AM)effone Wrote: Please post your board url. That will be helpful implementing changes live while testing and to provide perfect solution rather than repeated trial-error.

https://doom.sx/index.php
#4
Not Solved
Hello there,

The forum you have posted does not have the minimum "Powered by MyBB" notice we require for technical support here. In order for us to give you further support, please add the following code to the footer template of your forum:

Admin CP --> Templates & Style --> *expand your template set* --> Footer Templates --> footer
Powered by <a href="http://www.mybb.com">MyBB</a>

I will close this thread until you have reinstated the Powered By line. Please post in the Private Inquiries forum to ask to have this thread reopened, where you can also raise any questions you have about this policy.

With regards,
MyBB Support Team


Forum Jump:


Users browsing this thread: 1 Guest(s)