Change CSS when user is logged in

Question

So I have the following code:

        <h3>
             <div class="sellertitle"><a class="allseller" href="#">Something</a> </div>

             <?php if ( is_user_logged_in() ) { ?>          
                     <div class="otherseller">  <a class="allotherseller" href="#">Else</a> </div>
             <?php } ?>
        </h3>

Then, for the "sellertitle," I have the following CSS:

<--logged in-->
.sellertitle {
  float: left;
  width: 49%;      
}

As you can see, "Something" is always visible and "Else" is only visible when the user is logged in.

However when the user is logged out, I want the "sellertitle" CSS to be "float:none"

<--logged out-->
  .sellertitle {
   float: none;
   width: 49%;      
 }

What would be the best way to achieve this?

Answer 1

Here is another CSS-only approach, without any inline-PHP and needless CSS-spam in the head. If your theme is correctly using body_class() and a user is logged in, Wordpress adds a class "logged-in" to the body-element, so we can use this in our stylesheet:

<--logged out-->
.sellertitle {
  float: none;
  width: 49%;      
}

.otherseller {
  display: none;
}

<--logged in-->
.logged-in .sellertitle {
  float: left;     
}

.logged-in .otherseller {
  display: inline;
}

Answer 2

you could try something like this... this will add css on the head

add_action('wp_head', 'add_css_head');
function add_css_head() {
   if ( is_user_logged_in() ) {
   ?>
      <style>
          .sellertitle {
             float: left;
             width: 49%;      
           }
      </style>
   <?php
   } else {
   ?>
      <style>
          .sellertitle {
             float: none;
             width: 49%;      
           }
      </style>
   <?php
   }
}

---

another is to change class if logged in...

so you will have two css

.sellertitle {
  float: none;
  width: 49%;      
}
.sellertitle.logged {
  float: left;      
}

then on your div something like this...

<div class="sellertitle <?php if ( is_user_logged_in() ) {echo 'logged';}">