Change a CSS class if user logged in vs logged out

[MM]

Hi, I'm trying to change CSS around a button depending on whether a user is logged in or logged out.

No link yet as on localhost.

For example,

Not logged in.... the Log In button is:

`
background-color: #000;
padding: 10px;
color: #fff;
border-radius: 15px;

And when a user IS logged in, I don't want 'Sign Out' (which the button becomes) to be a call to action highlighted button.

Rather, it should be

background-color: #fff;
color: #000;

Does anyone know how to achieve this? Sounds like some form of conditional CSS class... thanks for the help!

[Ben @ Inbound Creative]

I've never tried this, so it might not work.

However, when you're logged in, WordPress itself adds a page class of logged-in.

Try this:

.logged-in .classname {
     background-color: #fff;
     color: #000;
}

Change .classname to whatever your class name is. You might also need to add a 'a' selector after the class name, but you shouldn't need it.

The alternative is to use the same class name structure, but then use 'display: none;' instead of the background color and color.

Let me know if that works.

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[Author]

Posts