WordPress.org

Ready to get started?Download WordPress

Forums

Login added to header (3 posts)

  1. leinster
    Member
    Posted 1 year ago #

    Hi Guys,

    I want to place this code I found on the web so that it will display a login/logout.register url in the top right hand side of my header.

    This is what I have so far.

    Header.php

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <div class="header-login">
    	<?php if(is_user_logged_in()): ?>
    	<a href="<?php echo wp_logout_url(get_permalink() ); ?>" title="Logout">Logout</a>
    	<?php endif; ?>
    	<?php if(!is_user_logged_in()): ?>
    	<a href="<?php echo wp_login_url(); ?>" title="Login">Login</a> | <a href="http://www.xxx.com/login/?action=register/">Register</a>
    	<?php endif; ?></div>

    style.css

    /* Header
    ---------------------------------------- */
    #header {
    	height:205px;
    	position:relative;
    	z-index:9999;
    }
    /* Login Style */
    .header-login
    {position: absolute;
    top: 50px;
    right: 180px;
    Z-index:1;
    }
    /* End of Login Style */

    There are two issues which is happening.
    1. The login URL is not a link in Firefox
    2. The link does not stay in a fixed position.

    I've tried relative and absolute position to resolve 2. but it doesnt work for me.
    After spending two days trying to understand css and div positioning etc I'm at a loss as to how to solve this. Could someone be kind enough to explain what I am doing wrong.

    Please help.

    Lenard

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. leinster
    Member
    Posted 1 year ago #

    Login Link locked out in Firefox. Trawled examples of css.
    Any idea whats wrong?

    style.css

    /* Header
    ---------------------------------------- */
    #header {
    	height:205px;
    	position:relative;
    	z-index:9999;
    }
    
    /* Login Style */
    .header-login
    {position: absolute;
    top: 50px;
    right: 180px;
    Z-index:1;
    }
    /* End of Login Style */

Topic Closed

This topic has been closed to new replies.

About this Topic