Navigation
Archive / Login | Logout links in TopBar … Need CSS Help
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • November 28, 2016 at 4:55 pm #1273758

    Craig Allan Teich | FormulaWP
    Participant

    The site is FormulaWP

    On the right side of the TopBar, I’m attempting to have two states of links visible depending if the visitor is logged in or out.

    If NOT logged in, I want the visible links in the right side of the TopBar to be:

    Blog | Login

    If logged in, I want the visible links to be:

    Blog | Help Center | Forum | My Account | Logout

    Currently, I’ve gotten the Login link to disappear when someone is already logged in, but for some reason I can’t get the Help Center | Forum | My Account links to disappear when the visitor is logged out.

    I have the following code in the Customizer > Header > TopBar Content:

    <p><span style="float:left; color: #333; padding-top: 4px;">For a Limited Time: 
<a href="/free-website-seo-audit-report/" 
style="color: #008aad; text-transform: titlecase;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#008aad';" 
alt="What's your Score? Get your own Free Website SEO Audit Report today! 10 page report with 3 pages of checklist items to improve your sites SEO and traffic." 
title="Limited time offer: FREE WEBSITE SEO AUDIT REPORT">
Free Website SEO Audit Report</a></span>

<span style="float:right; padding-top: 5px;font-size: 0.8em; color: #ccc;">
<a href="/blog" style="color: #000;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#000';">Blog</a>
<a href="/help" class="wp-helpcenter-url" style="color: #000;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#000';"> Help Center </a>
<a href="/forums/get/help/" class="wp-forum-url" style="color: #000;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#000';"> Forum </a>
<a href="/my-account" class="wp-myaccount-url" style="color: #000;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#000';"> My Account </a>
<a href="/wp-login.php" class="wp-login-url" style="color: #000;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#000';"> Login</a>
<a href="/wp-login.php?action=logout" class="wp-logout-url" style="color: #000;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#000';"> Logout</a>
</span>
</p>

    And I have the following CSS in the Customizer > Custom > Edit Global CSS section:

    /* LOGIN | LOGOUT */
.wp-login-url:before, .wp-helpcenter-url:before, .wp-forum-url:before, .wp-myaccount-url:before, .wp-logout-url:before {content: ' | ';}
.wp-logout-url, .logged-in .wp-login-url {display: none !important;}
.logged-in .wp-helpcenter-url, .wp-forum-url, .wp-myaccount-url, .wp-logout-url {display: inline !important;}

    I’ve obviously got something not correct in the CSS portion. I’ve tried about fifty iterations of this code, but haven’t gotten anywhere. I’m hoping that the Themeco gurus who all know a ton more about CSS than I do can spot the problem and suggest the solution. I think I’m close, but need a bit of help to get across the goal line.

    Thanks in advance.

    I’ll provide some login details below.

    November 28, 2016 at 4:56 pm #1273760

    Craig Allan Teich | FormulaWP
    Participant
    This reply has been marked as private.
    November 28, 2016 at 8:43 pm #1274038

    Craig Allan Teich | FormulaWP
    Participant

    I figured it out…after about another 50 experiments.

    The CSS that finally made it work the way I wanted is this:

    /* LOGIN | LOGOUT */
.wp-login-url:before, .wp-helpcenter-url:before, .wp-forum-url:before, .wp-myaccount-url:before, .wp-logout-url:before {content: ' | ';}
.wp-logout-url, .logged-in .wp-login-url {display: none !important;}
.logged-in .wp-helpcenter-url, .logged-in .wp-forum-url, .logged-in .wp-myaccount-url, .logged-in .wp-logout-url {display: inline !important;}

    Hopefully this will benefit a few others in the community.

    Cheers, Craig

    November 28, 2016 at 9:58 pm #1274103

    Craig Allan Teich | FormulaWP
    Participant

    Ok, now I’m baffled. It seemed to be working as intended, but now it’s not.
    Can you please take a look at the custom CSS I’m using and let me know if you see how to fix it so it works as intended?

    Thank you in advance!!!

    November 28, 2016 at 11:11 pm #1274144

    Rupok
    Member

    Hi there,

    Thanks for writing in! Simply you can use two div and add your menu items there.

    HTML should look like :

    <div class="custom-header-menu">
	<div class="logged-in-menu">
		<a href="/blog">Blog</a>
		<a href="/wp-login.php">Login</a>
	</div>

	<div class="logged-out-menu">
		<a href="/blog">Blog</a>
		<a href="/help">Help Center</a>
		<a href="/forums/get/help/">Forum</a>
		<a href="/my-account">My Account</a>
		<a href="/wp-login.php?action=logout">Logout</a>
	</div>
</div>

    Then add this CSS : 

    .custom-header-menu {
  float: right;
}
.custom-header-menu a {
  color: #000;
}

.custom-header-menu a:hover {
  color: #00bee0;
}

.logged-in-menu {
  display: none;
}

.logged-in .logged-in-menu {
  display: block;
}

.logged-in .logged-out-menu {
  display: none;
}

    Now adjust other CSS if needed.

    Cheers!

    November 29, 2016 at 9:19 am #1274738

    Craig Allan Teich | FormulaWP
    Participant

    Hey Rupok, you’re an all star!

    I knew there must be a more elegant way to do this, but was standing to close to the problem for too long.
    Thanks for pointing me in the right direction.

    I had to make a few modifications to what you suggested to get it to work exactly how I wanted, but your approach with the div’s was definitely a huge help.

    I will include the combination of code below for anyone else who might be looking to do something similar:

    HTML TO BE ENTER INTO CUSTOMIZER > HEADER > TOP BAR CONTENT:

    <div class="topbar-left-menu">For a Limited Time: <a href="/free-website-seo-audit-report/" 
style="color: #008aad; text-transform: titlecase;" onmouseover="this.style.color='#00bee0';" onmouseout="this.style.color='#008aad';" 
alt="What's your Score? Get your own Free Website SEO Audit Report today! 10 page report with 3 pages of checklist items to improve your sites SEO and traffic." 
title="Limited time offer: FREE WEBSITE SEO AUDIT REPORT">
Free Website SEO Audit Report</a></div>

<div class="custom-header-menu">
	<div class="logged-out-menu">
		<a href="/blog">Blog</a>&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="/wp-login.php">Login</a></div>

	<div class="logged-in-menu">
		<a href="/blog">Blog</a>&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="/help">Help Center</a>&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="/forums/get/help/">Forum</a>&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="/my-account">My Account</a>&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="/wp-login.php?action=logout">Logout</a>
	</div>
</div>

    CSS TO BE ENTER INTO CUSTOMIZER > CUSTOM > EDIT GLOBAL CSS:

    /* TOP BAR LINKS - LOGIN LOGOUT */
.topbar-left-menu {float: left;}
.topbar-left-menu {padding-top: 5px;}
.topbar-left-menu a {color: #000;}
.topbar-left-menu a:hover {color: #00bee0;}

.custom-header-menu {float: right;}
.custom-header-menu {padding-top: 5px;}
.custom-header-menu a {color: #000;}
.custom-header-menu a:hover {color: #00bee0;}

.logged-in-menu {display: none;}
.logged-in .logged-in-menu {display: block;}
.logged-in .logged-out-menu {display: none;}

    THANKS AGAIN!!!

    November 29, 2016 at 9:24 am #1274746

    Joao
    Moderator

    I am glad our all star colleague Rupok managed to help you 🙂

    Let us know if you need help with anything else.

    Joao

  • Author
    Posts