Cambiar CSS cuando el usuario ha iniciado sesión

Question

Cambiar CSS cuando el usuario ha iniciado sesión

19 mar 2015, 07:51:58

Vistas: 36.3K

Votos: 4

Tengo el siguiente código:

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

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

Luego, para "sellertitle", tengo el siguiente CSS:

<--con sesión iniciada-->
.sellertitle {
  float: left;
  width: 49%;      
}

Como pueden ver, "Algo" siempre es visible y "Otro" solo es visible cuando el usuario ha iniciado sesión.

Sin embargo, cuando el usuario no ha iniciado sesión, quiero que el CSS de "sellertitle" sea "float:none"

<--sin sesión iniciada-->
  .sellertitle {
   float: none;
   width: 49%;      
 }

¿Cuál sería la mejor manera de lograr esto?

Steve Kim

375

css

Todas las respuestas a la pregunta

Comentarios

Enfoque inteligente. Usa lo que ya está ahí por defecto :-). +1

Pieter Goosen

19 mar 2015 14:05:24

Yo agregaría que esta respuesta necesita que el tema use correctamente la función body_class(), solo para los usuarios que no lo conocen. +1.

cybmeta

19 mar 2015 14:25:42

@cybmeta de hecho, tienes razón... en la mayoría de los casos uso _s como base para mis temas, que incluye body_class() por defecto :)

Rafael

19 mar 2015 14:32:39

¡Ja! Otro más añadido a mi momento "¡ajá!". Esto debería marcarse como la respuesta. :)

Reigel Gallarde

19 mar 2015 18:37:25

Enfoque increíble. Voy a probar esto. :-) Gracias, chicos.

Steve Kim

19 mar 2015 19:01:46

podrías intentar algo como esto... esto agregará CSS en el 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
   }
}

otra opción es cambiar la clase si está logueado...

así tendrías dos estilos CSS

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

luego en tu div sería algo así...

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

Reigel Gallarde

889

19 mar 2015 08:00:04

Comentarios

agregué otra opción... y creo que es el mejor enfoque.. ;)

Reigel Gallarde

19 mar 2015 08:04:13

Ya veo. Eso es algo que nunca probé. ¡Gracias por la información! =)

Steve Kim

19 mar 2015 08:07:45

No es muy inteligente agregar estilos directamente a wp_head. Crea una hoja de estilos personalizada y usa wp_enqueue_scripts para cargar tu hoja de estilos personalizada. De esta manera, los plugins y temas hijos pueden sobrescribir estos estilos fácilmente si es necesario. También, revisa la otra respuesta que usa lo que viene por defecto :-)

Pieter Goosen

19 mar 2015 14:08:57

Rafael 236 · Accepted Answer · 2015-03-19T13:58:46Z

Aquí hay otro enfoque solo con CSS, sin PHP en línea y sin spam innecesario de CSS en el head. Si tu tema está usando correctamente body_class() y un usuario está conectado, WordPress añade una clase "logged-in" al elemento body, así que podemos usarla en nuestra hoja de estilos:

<--usuario desconectado-->
.sellertitle {
  float: none;
  width: 49%;      
}

.otherseller {
  display: none;
}

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

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

Rafael

236

19 mar 2015 13:58:46