Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Center a Input/Search field?
#1
This user has been denied support. This user has been denied support.
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:

Code:
<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:

Code:
.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
Please post your board url. That will be helpful implementing changes live while testing and to provide perfect solution rather than repeated trial-error.
Disclaimer: Don't be misguided looking at my usergroup and assume whatever I say is official. When I speak in community I am just a member with personal opinions.
#3
This user has been denied support. This user has been denied support.
(Yesterday, 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
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
Code:
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
Disclaimer: Don't be misguided looking at my usergroup and assume whatever I say is official. When I speak in community I am just a member with personal opinions.


Forum Jump:


Users browsing this thread: 1 Guest(s)