2018-08-13, 03:41 AM
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]](https://camo.mybb.com/8522e97d8eaa7d8daf58326e986bd30bdf310ac9/68747470733a2f2f692e696d6775722e636f6d2f7a6f76544667562e706e67)
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:
and then here's the CSS for the search bar:
Tried figuring it out myself but idk
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