How to change login/signup button

[Diana]

How can I change the login/signup button

from this:



to this:



and create a little bit more space at the top.

 

[Neil E.]

I asked Jake how to put a login/signup button in the nav bar:
http://xenforo.com/community/threads/change-login-bar-to-an-overlay.29219/page-2#post-382931

And how to give it some style:
http://xenforo.com/community/threads/styling-the-new-nav-bar-login-button.33733/#post-384098

These two posts might get you started in the right direction.

 

[Diana]

Thanks, I'll check it out.

Was hoping not to bother Jake. He seems like he's everywhere at once. Don't know how he does it.

 

[Diana]

Neil. E. thank you for the links. However, I think it confuses what I want to do, since I'm not looking to do an overlay or move the login into the navbar. I want to replace the existing login with a button, position it level with the logo, as shown above, and still keep the current functionality.

 

[Jake Bunce]

To add the button:

Admin CP -> Appearance -> Templates -> logo_block

Add the red code:

<div id="logoBlock">
	<div class="pageWidth">
		<div class="pageContent">
			<xen:include template="ad_header" />
			<xen:hook name="header_logo">
			<div id="logo"><a href="{$logoLink}">
				<span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
				<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
			</a></div>
			</xen:hook>

			<xen:if is="!{$visitor.user_id}">
				<div style="width: 220px; float: right;">
				<label for="LoginControl" id="SignupButton">
				<a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a>
				</label>
				</div>
			</xen:if>

			<span class="helper"></span>
		</div>
	</div>
</div>

To hide the current handle:

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

#loginBarHandle
{
	display: none;
}

 

[Diana]

Thank you Jake. This is exactly what I needed. Works like a charm.