Change dinamically the Side-Bar icon

  • Hi

    I’ve got change the Side-Bar icon with this change in the style.css

    .menu-toggle:before,
.navigation-main .widget-handle:before {
	content: '\f304';
	font-family: 'Genericons';
	font-size: 2rem;
	font-weight: bold;
	text-decoration: none;
	vertical-align: top;
}

    Now I would like to show the Genericon ‘\f304’ when the users are logout and shoe the the Genericon ‘\f445’ when the user is login; then I’ve change the file “navigation.php” with this code:

    <?php global $user_ID;
      get_currentuserinfo();

      if ('' == $user_ID) {
         //no user logged in
         ?>
 	          <a class="widget-handle genericon" href="#" title="<?php esc_attr_e( 'Login', 'bushwick' ); ?>"></a>
        <?php
      } else {
          ?>
 	          <a class="widget-handle genericon" style="content: '\f445';" href="#" title="<?php esc_attr_e( 'Profile Setting', 'bushwick' ); ?>"></a>
         <?php
      }
?>

    But the side-bar icons always is the same ‘\f304’… ??

    Any idea How could change the Side-Bar icon dinamically?

    You can try in this link: LottoGol Club

Viewing 5 replies - 1 through 5 (of 5 total)

  • You could try using the is_user_logged_in() function and set a different class on the link depending if the user is logged in or not. One class would have one Genericon and the other class would have the other.

    https://developer.www.ads-software.com/reference/functions/is_user_logged_in/

    Let me know how it goes.

    Thread Starter Specting

    (@specting)

    Hi Kathryn

    I’ve added a new class called “widget-handle-logout” but the jquery function that is the file “function.js” doesn’t work with the new class.

    How could I get that the jquery function would be triggered with both class?

    Even I’ve changed this $( '.widget-handle-logout' ).on but It doesn’t work for the new class.

    Thank you in advance…

    My colleague Thomas reminded me that when you’re logged in, the class .logged-in is added, so we can use that to our advantage, making this a lot simpler.

    Give this a try and let me know how it goes:

    .menu-toggle:before,
.navigation-main .widget-handle:before {
  content: "\f304";
}

.logged-in .menu-toggle:before,
.logged-in .navigation-main .widget-handle:before {
  content: "\f445";
}
    Thread Starter Specting

    (@specting)

    I’ve added the code of your last reply,
    but it always show the same genericon

    In other hand I can see the class logged-in that is added in the <body> after the login.

    I’m not sure why it’s not working for you – I tried it on my test site and both toggles work fine.

    Logged-in: https://cloudup.com/cQrTc05LUMP
    Logged-out: https://cloudup.com/cKxTJ9b-J3k

    How are you making these CSS changes? You should be using one of the two recommended methods:

    – CSS editor plugin, OR
    – child theme.

    Details:

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change dinamically the Side-Bar icon’ is closed to new replies.