1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to change login/signup button

Discussion in 'Styling and Customization Questions' started by Diana, Aug 2, 2012.

  1. Diana

    Diana Active Member

    How can I change the login/signup button

    from this:

    signin2.png

    to this:

    signin1.png

    and create a little bit more space at the top.
     
  2. Neil E.

    Neil E. Active Member

  3. Diana

    Diana Active Member

    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.
     
  4. Diana

    Diana Active Member

    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.
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    To add the button:

    Admin CP -> Appearance -> Templates -> logo_block

    Add the red code:

    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:

    Code:
    #loginBarHandle
    {
    	display: none;
    }
    
     
  6. Diana

    Diana Active Member

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

Share This Page