Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 13, 2014 at 12:40 am #350503
    andrassberlin

    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!

    November 13, 2014 at 6:07 pm #350821
    Elliott

    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 10 years ago by Elliott.
    November 14, 2014 at 12:03 am #351007
    andrassberlin

    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

    November 14, 2014 at 12:54 pm #351211
    andrassberlin

    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

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