Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #350503

    Hey there,
    Following this: Post, I tried to create a login / logout button in main-menu. This code I have integrated this code at the end of the functions.php:

    function add_login_logout_link($items, $args)
    {
    if(is_user_logged_in() && $args->theme_location == 'avia')
    {
    $newitems = $items;
    $newitems .= '<li><a title="'.__('Logout','avia_framework').'" href="'. wp_logout_url(get_permalink()) .'">'.__('Logout','avia_framework').'</a></li>';
    }
    else if($args->theme_location == 'avia')
    {
    $newitems = $items;
    $newitems .= '<li><a title="'.__('Login','avia_framework').'" href="'. wp_login_url(get_permalink()) .'">'.__('Login','avia_framework').'</a></li>';
    }else{
    $newitems .= $items;
    }
    return $newitems;
    }
    add_filter('wp_nav_menu_items', 'add_login_logout_link', 5, 2);
    

    The link will appear just fine. But how I can create a button styled like “Button-Style (Colored)” in avia builder?
    I tried to style himself, but without success.
    Thanks for your help!

    • This topic was modified 9 years, 4 months ago by andrassberlin.
    #350821

    Hi andrassberlin!

    You could try adding this to the list item class.

    av-menu-button av-menu-button-colored
    

    So it looks like this.

    $newitems .= '<li class = "av-menu-button av-menu-button-colored"><a title="'.__('Logout','avia_framework').'" href="'. wp_logout_url(get_permalink()) .'">'.__('Logout','avia_framework').'</a></li>';
    

    But you may need to add some extra styling as well. You can find the menu button styles in /enfold/css/layout.css around line 584.

    Cheers!
    Elliott

    • This reply was modified 9 years, 4 months ago by Elliott.
    #351007

    Hi Elliott,
    Thanks for your reply. I had already tried this, but without success. The CSS classes are declared, but the result is different to the button styled with “Button-Style (Colored)” in avia builder.

    my functions.php looks like this:

    ...
    $newitems .= '<li class="av-menu-button av-menu-button-colored"><a class ="avia-menu-text" title="'.__('Logout','avia_framework').'" href="'. wp_logout_url(get_permalink()) .'">'.__('Logout','avia_framework').'</a></li>';
    ...

    my style.css:

    ...
    .av-menu-button-colored {
        background-color: #ff5d4c;
        border: medium none;
        color: #fff;
        border-radius: 3px;
    }
    
    .av-menu-button-colored:hover {
        opacity: 0.9;
        transition: all 0.2s linear 0s;
    }
    
    .av-menu-button-colored:hover a {
        color: #fff !important;
    }
    
    .av-menu-button-colored > a .avia-menu-text {
        border-color: -moz-use-text-color;
        border-radius: 3px;
        border-style: none none solid;
        border-width: medium medium 1px;
        padding: 11px 10px 10px;
    }
    ...

    You have any idea?
    Greetings
    Andreas

    #351211

    I found solution:
    this is the right code. Any additional style-declarations are not necessary.

    function add_login_logout_link($items, $args)
    {
    if(is_user_logged_in() && $args->theme_location == 'avia')
    {
    $newitems = $items;
    $newitems .= '<li class="av-menu-button av-menu-button-colored avia-menu-text"><a class="avia-menu-text" title="'.__('Logout','avia_framework').'" href="'. wp_logout_url(get_permalink()) .'"><span class="avia-menu-text">'.__('Logout','avia_framework').'</span></a></li>';
    }
    else if($args->theme_location == 'avia')
    {
    $newitems = $items;
    $newitems .= '<li class="av-menu-button av-menu-button-colored avia-menu-text"><a class="avia-menu-text" title="'.__('Login','avia_framework').'" href="'. wp_login_url(get_permalink()) .'"><span class="avia-menu-text">'.__('Login','avia_framework').'</span></a></li>';
    
    }else{
    $newitems .= $items;
    }
    return $newitems;
    }
    add_filter('wp_nav_menu_items', 'add_login_logout_link', 5, 2);
    

    Andreas

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Login / Logout Button in Main-Menu – styling’ is closed to new replies.