MyBB Community Forums

Forum Link: http://www.eplforums.net

I've added a custom CSS navigation to my forum, which when view by a guest, displays "Login" and "Register". When the login button is clicked, the default login Javascript is executed, hiding the navigation buttons, and displaying the login area. It works fine but the problem at the minute is, the login area is too high up. Is there a way I can fix this??

(You can see what I mean if you go to my site above, and click "Login").
I'd like the login inputs, (and the rest), to be centered within the panel.

Here's my current header_welcomeblock_guest code:

<script type="text/javascript">
<!--
	lang.username = "{$lang->login_username}";
	lang.password = "{$lang->login_password}";
	lang.login = "{$lang->login}";
	lang.lost_password = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\">{$lang->lost_password}<\/a>";
	lang.register_url = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=register\">{$lang->welcome_register}<\/a>";
	lang.remember_me = "{$lang->remember_me}";
// -->
</script>

<ul class="navMain">
<span id="quick_login">
<li>
<a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="MyBB.quickLogin(); return false;">{$lang->welcome_login}</a>
</li>
<li>
 <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
</li>
</span>
</ul>

---

Anybody help with this? It's been rattling my brain all day.

ul class="navMain" in global css with a little padding. Should work, maybe margin top a little but padding should be it.

Yeh, but that affects the navigation, when I only want the login area to be affected. For example, changing Margin Top to lower it, will also lower the nav.

.navMain input{margin-top:10px;} is what worked for me.



I took out some other elements in the css. you will have to adjust back the li links to what you want. But that pushes down the inputs.

#panel {
	background: #3D3D3D;
	color: #FFF!important;
	font-size: 11px;
        height: 40px;
	padding-top:0;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 4;
        overflow:hidden;        
}




.navMain {
       margin:0;
}

.navMain input{margin-top:10px;}

.navMain ul{
        background: #3D3D3D;
	padding:2px 5px;
	font-size:13px;
	color:#e7e7e7;
}

.navMain li	{
        list-style-type: none;
        float: left;
	padding:7px 8px;
	border-top:solid 5px #D7D7D7;
	margin-top:0px;	
}

.navMain li:hover	{
        color:#fff;
        list-style-type: none;
        border-top: solid 5px #E73942;
	background:#555;
	cursor:pointer;
}

(2012-02-04, 12:43 PM)tbint Wrote: [ -> ].navMain input{margin-top:10px;} is what worked for me.

http://www.ttb62.com/test.htm

I took out some other elements in the css. you will have to adjust back the li links to what you want. But that pushes down the inputs.

#panel {
	background: #3D3D3D;
	color: #FFF!important;
	font-size: 11px;
        height: 40px;
	padding-top:0;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 4;
        overflow:hidden;        
}




.navMain {
       margin:0;
}

.navMain input{margin-top:10px;}

.navMain ul{
        background: #3D3D3D;
	padding:2px 5px;
	font-size:13px;
	color:#e7e7e7;
}

.navMain li	{
        list-style-type: none;
        float: left;
	padding:7px 8px;
	border-top:solid 5px #D7D7D7;
	margin-top:0px;	
}

.navMain li:hover	{
        color:#fff;
        list-style-type: none;
        border-top: solid 5px #E73942;
	background:#555;
	cursor:pointer;
}

Nice one. Worked perfectly, thanks.

Would you mind editing that link to the file out I deleted it so its going nowhere?

(2012-02-04, 02:15 PM)Fragma Wrote: [ -> ]Nice one. Worked perfectly, thanks.