XenForo How to place ACP Log Out at the top

DarKMaSK · Feb 27, 2022

For quite sometime, I was thinking regularly about the 'Logout' link at the bottom of the ACP. It is so inconvenient. I don't know why the developers of Xenforo didn't think about it!!! So, I found this tutorial, yes at Xenforo's site and applied in Xenforo Test forum on my localhost and it worked. So I thought, just in case this may help others. For anyone who may want to have it also at the top of the page this may help.
NOTE: This is the author did in XF v2.0.10 and I did it in XF 2.4.3, the latest. That means the core of Xenforo is almost remaining the same. So, no problem should occur.
Steps:
1. Turn Development Mode on
In the src folder edit the config.php file by adding:

Code:

$config['development']['enabled'] = true;

at the bottom of the file

2. Go into your XF Admin Control Panel (ACP)
3. Go to Appearance and select Templates.
4. At the top of the template list you should see a Style box...click it and ensure Master Style is selected.
5. You should now see 3 tabs at the top of the template list, Public - Email - Admin...select Admin.
6. Scroll down or search for and open the template PAGE_CONTAINER to edit it.
7. Search for the below code. You may find it at line 43:

Code:

 <a href="index.php" class="p-header-button p-header-button--title" target="_blank">{$xf.options.boardTitle}</a>

8. After that line, add this line:

Code:

<a href="{{ link('login/logout', null, {'t': csrf_token()}) }}" class="p-header-button p-header-button--title">{{ phrase('log_out') }}</a>

Save and Exit the template.

You should now see the 'Log Out' link next to the link to your site's name:

9. The final step is to either change the word 'true' to 'false' in the line you added to your config.php file in step 1 or remove the line all together. Though it is handy to keep it in there but just turn the development mode off by changing the 'true' to 'false' as shown below:

Code:

$config['development']['enabled'] = false;

Hope it helps.

micke · Feb 28, 2022

A good tip

</clown> · Mar 1, 2022

You can also change the style of the button.

HTML:

<div class="background background--light">
  <button class="logoutButton logoutButton--dark">
    <svg class="doorway" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <path class="bang" d="M40.5 43.7L26.6 31.4l-2.5 6.7zM41.9 50.4l-19.5-4-1.4 6.3zM40 57.4l-17.7 3.9 3.9 5.7z" />
    </svg>
    <svg class="figure" viewBox="0 0 100 100">
      <circle cx="52.1" cy="32.4" r="6.4" />
      <path d="M50.7 62.8c-1.2 2.5-3.6 5-7.2 4-3.2-.9-4.9-3.5-4-7.8.7-3.4 3.1-13.8 4.1-15.8 1.7-3.4 1.6-4.6 7-3.7 4.3.7 4.6 2.5 4.3 5.4-.4 3.7-2.8 15.1-4.2 17.9z" />
      <g class="arm1">
        <path d="M55.5 56.5l-6-9.5c-1-1.5-.6-3.5.9-4.4 1.5-1 3.7-1.1 4.6.4l6.1 10c1 1.5.3 3.5-1.1 4.4-1.5.9-3.5.5-4.5-.9z" />
        <path class="wrist1" d="M69.4 59.9L58.1 58c-1.7-.3-2.9-1.9-2.6-3.7.3-1.7 1.9-2.9 3.7-2.6l11.4 1.9c1.7.3 2.9 1.9 2.6 3.7-.4 1.7-2 2.9-3.8 2.6z" />
      </g>
      <g class="arm2">
        <path d="M34.2 43.6L45 40.3c1.7-.6 3.5.3 4 2 .6 1.7-.3 4-2 4.5l-10.8 2.8c-1.7.6-3.5-.3-4-2-.6-1.6.3-3.4 2-4z" />
        <path class="wrist2" d="M27.1 56.2L32 45.7c.7-1.6 2.6-2.3 4.2-1.6 1.6.7 2.3 2.6 1.6 4.2L33 58.8c-.7 1.6-2.6 2.3-4.2 1.6-1.7-.7-2.4-2.6-1.7-4.2z" />
      </g>
      <g class="leg1">
        <path d="M52.1 73.2s-7-5.7-7.9-6.5c-.9-.9-1.2-3.5-.1-4.9 1.1-1.4 3.8-1.9 5.2-.9l7.9 7c1.4 1.1 1.7 3.5.7 4.9-1.1 1.4-4.4 1.5-5.8.4z" />
        <path class="calf1" d="M52.6 84.4l-1-12.8c-.1-1.9 1.5-3.6 3.5-3.7 2-.1 3.7 1.4 3.8 3.4l1 12.8c.1 1.9-1.5 3.6-3.5 3.7-2 0-3.7-1.5-3.8-3.4z" />
      </g>
      <g class="leg2">
        <path d="M37.8 72.7s1.3-10.2 1.6-11.4 2.4-2.8 4.1-2.6c1.7.2 3.6 2.3 3.4 4l-1.8 11.1c-.2 1.7-1.7 3.3-3.4 3.1-1.8-.2-4.1-2.4-3.9-4.2z" />
        <path class="calf2" d="M29.5 82.3l9.6-10.9c1.3-1.4 3.6-1.5 5.1-.1 1.5 1.4.4 4.9-.9 6.3l-8.5 9.6c-1.3 1.4-3.6 1.5-5.1.1-1.4-1.3-1.5-3.5-.2-5z" />
      </g>
    </svg>
    <svg class="door" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <circle cx="66" cy="50" r="3.7" />
    </svg>
    <span class="button-text">Log Out</span>
  </button>
</div>

<div class="background background--dark">
  <button class="logoutButton logoutButton--light">
    <svg class="doorway" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <path class="bang" d="M40.5 43.7L26.6 31.4l-2.5 6.7zM41.9 50.4l-19.5-4-1.4 6.3zM40 57.4l-17.7 3.9 3.9 5.7z" />
    </svg>
    <svg class="figure" viewBox="0 0 100 100">
      <circle cx="52.1" cy="32.4" r="6.4" />
      <path d="M50.7 62.8c-1.2 2.5-3.6 5-7.2 4-3.2-.9-4.9-3.5-4-7.8.7-3.4 3.1-13.8 4.1-15.8 1.7-3.4 1.6-4.6 7-3.7 4.3.7 4.6 2.5 4.3 5.4-.4 3.7-2.8 15.1-4.2 17.9z" />
      <g class="arm1">
        <path d="M55.5 56.5l-6-9.5c-1-1.5-.6-3.5.9-4.4 1.5-1 3.7-1.1 4.6.4l6.1 10c1 1.5.3 3.5-1.1 4.4-1.5.9-3.5.5-4.5-.9z" />
        <path class="wrist1" d="M69.4 59.9L58.1 58c-1.7-.3-2.9-1.9-2.6-3.7.3-1.7 1.9-2.9 3.7-2.6l11.4 1.9c1.7.3 2.9 1.9 2.6 3.7-.4 1.7-2 2.9-3.8 2.6z" />
      </g>
      <g class="arm2">
        <path d="M34.2 43.6L45 40.3c1.7-.6 3.5.3 4 2 .6 1.7-.3 4-2 4.5l-10.8 2.8c-1.7.6-3.5-.3-4-2-.6-1.6.3-3.4 2-4z" />
        <path class="wrist2" d="M27.1 56.2L32 45.7c.7-1.6 2.6-2.3 4.2-1.6 1.6.7 2.3 2.6 1.6 4.2L33 58.8c-.7 1.6-2.6 2.3-4.2 1.6-1.7-.7-2.4-2.6-1.7-4.2z" />
      </g>
      <g class="leg1">
        <path d="M52.1 73.2s-7-5.7-7.9-6.5c-.9-.9-1.2-3.5-.1-4.9 1.1-1.4 3.8-1.9 5.2-.9l7.9 7c1.4 1.1 1.7 3.5.7 4.9-1.1 1.4-4.4 1.5-5.8.4z" />
        <path class="calf1" d="M52.6 84.4l-1-12.8c-.1-1.9 1.5-3.6 3.5-3.7 2-.1 3.7 1.4 3.8 3.4l1 12.8c.1 1.9-1.5 3.6-3.5 3.7-2 0-3.7-1.5-3.8-3.4z" />
      </g>
      <g class="leg2">
        <path d="M37.8 72.7s1.3-10.2 1.6-11.4 2.4-2.8 4.1-2.6c1.7.2 3.6 2.3 3.4 4l-1.8 11.1c-.2 1.7-1.7 3.3-3.4 3.1-1.8-.2-4.1-2.4-3.9-4.2z" />
        <path class="calf2" d="M29.5 82.3l9.6-10.9c1.3-1.4 3.6-1.5 5.1-.1 1.5 1.4.4 4.9-.9 6.3l-8.5 9.6c-1.3 1.4-3.6 1.5-5.1.1-1.4-1.3-1.5-3.5-.2-5z" />
      </g>
    </svg>
    <svg class="door" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <circle cx="66" cy="50" r="3.7" />
    </svg>
    <span class="button-text">Log Out</span>
  </button>
</div>

CSS:

// Colors
$dark: #1f2335;
$middle: #4371f7;
$light: #f4f7ff;

.logoutButton {
  --figure-duration: 100ms;
  --transform-figure: none;
  --walking-duration: 100ms;
  --transform-arm1: none;
  --transform-wrist1: none;
  --transform-arm2: none;
  --transform-wrist2: none;
  --transform-leg1: none;
  --transform-calf1: none;
  --transform-leg2: none;
  --transform-calf2: none;

  background: none;
  border: 0;
  color: $light;
  cursor: pointer;
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  outline: none;
  padding: 0 0 0 20px;
  perspective: 100px;
  position: relative;
  text-align: left;
  width: 130px;
  -webkit-tap-highlight-color: transparent;

  // Background of button is independent of the button content
  &::before {
    background-color: $dark;
    border-radius: 5px;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: none;
    transition: transform 50ms ease;
    width: 100%;
    z-index: 2;
  }

  &:hover {
    .door {
      transform: rotateY(20deg);
    }
  }

  &:active {
    &::before {
      transform: scale(.96);
    }

    .door {
      transform: rotateY(28deg);
    }
  }

  // button was clicked
  &.clicked {
    &::before {
      transform: none;
    }

    .door {
      transform: rotateY(35deg);
    }
  }

  // close the door
  &.door-slammed {
    .door {
      transform: none;
      transition: transform 100ms ease-in 250ms;
    }
  }

  // the figure is falling
  &.falling {
    animation: shake 200ms linear;

    .bang {
      animation: flash 300ms linear;
    }

    .figure {
      animation: spin 1000ms infinite linear;
      bottom: -1080px;
      opacity: 0;
      right: 1px;
      transition: transform calc(var(--figure-duration) * 1ms) linear,
        bottom calc(var(--figure-duration) * 1ms) cubic-bezier(0.7, 0.1, 1, 1) 100ms,
        opacity calc(var(--figure-duration) * 0.25ms) linear calc(var(--figure-duration) * 0.75ms);
      z-index: 1;
    }
  }

  &--light {
    &::before {
      background-color: $light;
    }

    .button-text {
      color: $dark;
    }


    .door,
    .doorway {
      fill: $dark;
    }
  }
}

.button-text {
  color: $light;
  font-weight: 500;
  position: relative;
  z-index: 10;
}

svg {
  display: block;
  position: absolute;
}

.figure {
  bottom: 5px;
  fill: $middle;
  right: 18px;
  transform: var(--transform-figure);
  transition: transform calc(var(--figure-duration) * 1ms) cubic-bezier(0.2, 0.1, 0.80, 0.9);
  width: 30px;
  z-index: 4;
}

.door,
.doorway {
  bottom: 4px;
  fill: $light;
  right: 12px;
  width: 32px;
}

.door {
  transform: rotateY(20deg);
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  transition: transform 200ms ease;
  z-index: 5;

  path {
    fill: $middle;
    stroke: $middle;
    stroke-width: 4;
  }
}

.doorway {
  z-index: 3;
}

.bang {
  opacity: 0;
}

.arm1, .wrist1, .arm2, .wrist2, .leg1, .calf1, .leg2, .calf2 {
  transition: transform calc(var(--walking-duration) * 1ms) ease-in-out;
}

.arm1 {
  transform: var(--transform-arm1);
  transform-origin: 52% 45%;
}

.wrist1 {
  transform: var(--transform-wrist1);
  transform-origin: 59% 55%;
}

.arm2 {
  transform: var(--transform-arm2);
  transform-origin: 47% 43%;
}

.wrist2 {
  transform: var(--transform-wrist2);
  transform-origin: 35% 47%;
}

.leg1 {
  transform: var(--transform-leg1);
  transform-origin: 47% 64.5%;
}

.calf1 {
  transform: var(--transform-calf1);
  transform-origin: 55.5% 71.5%;
}

.leg2 {
  transform: var(--transform-leg2);
  transform-origin: 43% 63%;
}

.calf2 {
  transform: var(--transform-calf2);
  transform-origin: 41.5% 73%;
}

@keyframes spin {
  from { transform: rotate(0deg) scale(0.94); }
  to { transform: rotate(359deg) scale(0.94); }
}

@keyframes shake {
  0% { transform: rotate(-1deg); }
  50% { transform: rotate(2deg); }
  100% { transform: rotate(-1deg); }
}

@keyframes flash {
  0% { opacity: 0.4; }
  100% { opacity: 0; }
}



/**** Wrapper styles ****************/
html,
body {
  height: 100%;
}
body {
  align-items: center;
  background: $light;
  display: flex;
  justify-content: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;

  .background {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 50%;
    &--light {
      background: $light;
    }
    &--dark {
      background: $dark;
    }
  }

  button {
    margin: 20px;
  }
}

DarKMaSK · Mar 3, 2022

clown said:

You can also change the style of the button.

HTML:

<div class="background background--light">
  <button class="logoutButton logoutButton--dark">
    <svg class="doorway" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <path class="bang" d="M40.5 43.7L26.6 31.4l-2.5 6.7zM41.9 50.4l-19.5-4-1.4 6.3zM40 57.4l-17.7 3.9 3.9 5.7z" />
    </svg>
    <svg class="figure" viewBox="0 0 100 100">
      <circle cx="52.1" cy="32.4" r="6.4" />
      <path d="M50.7 62.8c-1.2 2.5-3.6 5-7.2 4-3.2-.9-4.9-3.5-4-7.8.7-3.4 3.1-13.8 4.1-15.8 1.7-3.4 1.6-4.6 7-3.7 4.3.7 4.6 2.5 4.3 5.4-.4 3.7-2.8 15.1-4.2 17.9z" />
      <g class="arm1">
        <path d="M55.5 56.5l-6-9.5c-1-1.5-.6-3.5.9-4.4 1.5-1 3.7-1.1 4.6.4l6.1 10c1 1.5.3 3.5-1.1 4.4-1.5.9-3.5.5-4.5-.9z" />
        <path class="wrist1" d="M69.4 59.9L58.1 58c-1.7-.3-2.9-1.9-2.6-3.7.3-1.7 1.9-2.9 3.7-2.6l11.4 1.9c1.7.3 2.9 1.9 2.6 3.7-.4 1.7-2 2.9-3.8 2.6z" />
      </g>
      <g class="arm2">
        <path d="M34.2 43.6L45 40.3c1.7-.6 3.5.3 4 2 .6 1.7-.3 4-2 4.5l-10.8 2.8c-1.7.6-3.5-.3-4-2-.6-1.6.3-3.4 2-4z" />
        <path class="wrist2" d="M27.1 56.2L32 45.7c.7-1.6 2.6-2.3 4.2-1.6 1.6.7 2.3 2.6 1.6 4.2L33 58.8c-.7 1.6-2.6 2.3-4.2 1.6-1.7-.7-2.4-2.6-1.7-4.2z" />
      </g>
      <g class="leg1">
        <path d="M52.1 73.2s-7-5.7-7.9-6.5c-.9-.9-1.2-3.5-.1-4.9 1.1-1.4 3.8-1.9 5.2-.9l7.9 7c1.4 1.1 1.7 3.5.7 4.9-1.1 1.4-4.4 1.5-5.8.4z" />
        <path class="calf1" d="M52.6 84.4l-1-12.8c-.1-1.9 1.5-3.6 3.5-3.7 2-.1 3.7 1.4 3.8 3.4l1 12.8c.1 1.9-1.5 3.6-3.5 3.7-2 0-3.7-1.5-3.8-3.4z" />
      </g>
      <g class="leg2">
        <path d="M37.8 72.7s1.3-10.2 1.6-11.4 2.4-2.8 4.1-2.6c1.7.2 3.6 2.3 3.4 4l-1.8 11.1c-.2 1.7-1.7 3.3-3.4 3.1-1.8-.2-4.1-2.4-3.9-4.2z" />
        <path class="calf2" d="M29.5 82.3l9.6-10.9c1.3-1.4 3.6-1.5 5.1-.1 1.5 1.4.4 4.9-.9 6.3l-8.5 9.6c-1.3 1.4-3.6 1.5-5.1.1-1.4-1.3-1.5-3.5-.2-5z" />
      </g>
    </svg>
    <svg class="door" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <circle cx="66" cy="50" r="3.7" />
    </svg>
    <span class="button-text">Log Out</span>
  </button>
</div>

<div class="background background--dark">
  <button class="logoutButton logoutButton--light">
    <svg class="doorway" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <path class="bang" d="M40.5 43.7L26.6 31.4l-2.5 6.7zM41.9 50.4l-19.5-4-1.4 6.3zM40 57.4l-17.7 3.9 3.9 5.7z" />
    </svg>
    <svg class="figure" viewBox="0 0 100 100">
      <circle cx="52.1" cy="32.4" r="6.4" />
      <path d="M50.7 62.8c-1.2 2.5-3.6 5-7.2 4-3.2-.9-4.9-3.5-4-7.8.7-3.4 3.1-13.8 4.1-15.8 1.7-3.4 1.6-4.6 7-3.7 4.3.7 4.6 2.5 4.3 5.4-.4 3.7-2.8 15.1-4.2 17.9z" />
      <g class="arm1">
        <path d="M55.5 56.5l-6-9.5c-1-1.5-.6-3.5.9-4.4 1.5-1 3.7-1.1 4.6.4l6.1 10c1 1.5.3 3.5-1.1 4.4-1.5.9-3.5.5-4.5-.9z" />
        <path class="wrist1" d="M69.4 59.9L58.1 58c-1.7-.3-2.9-1.9-2.6-3.7.3-1.7 1.9-2.9 3.7-2.6l11.4 1.9c1.7.3 2.9 1.9 2.6 3.7-.4 1.7-2 2.9-3.8 2.6z" />
      </g>
      <g class="arm2">
        <path d="M34.2 43.6L45 40.3c1.7-.6 3.5.3 4 2 .6 1.7-.3 4-2 4.5l-10.8 2.8c-1.7.6-3.5-.3-4-2-.6-1.6.3-3.4 2-4z" />
        <path class="wrist2" d="M27.1 56.2L32 45.7c.7-1.6 2.6-2.3 4.2-1.6 1.6.7 2.3 2.6 1.6 4.2L33 58.8c-.7 1.6-2.6 2.3-4.2 1.6-1.7-.7-2.4-2.6-1.7-4.2z" />
      </g>
      <g class="leg1">
        <path d="M52.1 73.2s-7-5.7-7.9-6.5c-.9-.9-1.2-3.5-.1-4.9 1.1-1.4 3.8-1.9 5.2-.9l7.9 7c1.4 1.1 1.7 3.5.7 4.9-1.1 1.4-4.4 1.5-5.8.4z" />
        <path class="calf1" d="M52.6 84.4l-1-12.8c-.1-1.9 1.5-3.6 3.5-3.7 2-.1 3.7 1.4 3.8 3.4l1 12.8c.1 1.9-1.5 3.6-3.5 3.7-2 0-3.7-1.5-3.8-3.4z" />
      </g>
      <g class="leg2">
        <path d="M37.8 72.7s1.3-10.2 1.6-11.4 2.4-2.8 4.1-2.6c1.7.2 3.6 2.3 3.4 4l-1.8 11.1c-.2 1.7-1.7 3.3-3.4 3.1-1.8-.2-4.1-2.4-3.9-4.2z" />
        <path class="calf2" d="M29.5 82.3l9.6-10.9c1.3-1.4 3.6-1.5 5.1-.1 1.5 1.4.4 4.9-.9 6.3l-8.5 9.6c-1.3 1.4-3.6 1.5-5.1.1-1.4-1.3-1.5-3.5-.2-5z" />
      </g>
    </svg>
    <svg class="door" viewBox="0 0 100 100">
      <path d="M93.4 86.3H58.6c-1.9 0-3.4-1.5-3.4-3.4V17.1c0-1.9 1.5-3.4 3.4-3.4h34.8c1.9 0 3.4 1.5 3.4 3.4v65.8c0 1.9-1.5 3.4-3.4 3.4z" />
      <circle cx="66" cy="50" r="3.7" />
    </svg>
    <span class="button-text">Log Out</span>
  </button>
</div>

CSS:

// Colors
$dark: #1f2335;
$middle: #4371f7;
$light: #f4f7ff;

.logoutButton {
  --figure-duration: 100ms;
  --transform-figure: none;
  --walking-duration: 100ms;
  --transform-arm1: none;
  --transform-wrist1: none;
  --transform-arm2: none;
  --transform-wrist2: none;
  --transform-leg1: none;
  --transform-calf1: none;
  --transform-leg2: none;
  --transform-calf2: none;

  background: none;
  border: 0;
  color: $light;
  cursor: pointer;
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  outline: none;
  padding: 0 0 0 20px;
  perspective: 100px;
  position: relative;
  text-align: left;
  width: 130px;
  -webkit-tap-highlight-color: transparent;

  // Background of button is independent of the button content
  &::before {
    background-color: $dark;
    border-radius: 5px;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: none;
    transition: transform 50ms ease;
    width: 100%;
    z-index: 2;
  }

  &:hover {
    .door {
      transform: rotateY(20deg);
    }
  }

  &:active {
    &::before {
      transform: scale(.96);
    }

    .door {
      transform: rotateY(28deg);
    }
  }

  // button was clicked
  &.clicked {
    &::before {
      transform: none;
    }

    .door {
      transform: rotateY(35deg);
    }
  }

  // close the door
  &.door-slammed {
    .door {
      transform: none;
      transition: transform 100ms ease-in 250ms;
    }
  }

  // the figure is falling
  &.falling {
    animation: shake 200ms linear;

    .bang {
      animation: flash 300ms linear;
    }

    .figure {
      animation: spin 1000ms infinite linear;
      bottom: -1080px;
      opacity: 0;
      right: 1px;
      transition: transform calc(var(--figure-duration) * 1ms) linear,
        bottom calc(var(--figure-duration) * 1ms) cubic-bezier(0.7, 0.1, 1, 1) 100ms,
        opacity calc(var(--figure-duration) * 0.25ms) linear calc(var(--figure-duration) * 0.75ms);
      z-index: 1;
    }
  }

  &--light {
    &::before {
      background-color: $light;
    }

    .button-text {
      color: $dark;
    }


    .door,
    .doorway {
      fill: $dark;
    }
  }
}

.button-text {
  color: $light;
  font-weight: 500;
  position: relative;
  z-index: 10;
}

svg {
  display: block;
  position: absolute;
}

.figure {
  bottom: 5px;
  fill: $middle;
  right: 18px;
  transform: var(--transform-figure);
  transition: transform calc(var(--figure-duration) * 1ms) cubic-bezier(0.2, 0.1, 0.80, 0.9);
  width: 30px;
  z-index: 4;
}

.door,
.doorway {
  bottom: 4px;
  fill: $light;
  right: 12px;
  width: 32px;
}

.door {
  transform: rotateY(20deg);
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  transition: transform 200ms ease;
  z-index: 5;

  path {
    fill: $middle;
    stroke: $middle;
    stroke-width: 4;
  }
}

.doorway {
  z-index: 3;
}

.bang {
  opacity: 0;
}

.arm1, .wrist1, .arm2, .wrist2, .leg1, .calf1, .leg2, .calf2 {
  transition: transform calc(var(--walking-duration) * 1ms) ease-in-out;
}

.arm1 {
  transform: var(--transform-arm1);
  transform-origin: 52% 45%;
}

.wrist1 {
  transform: var(--transform-wrist1);
  transform-origin: 59% 55%;
}

.arm2 {
  transform: var(--transform-arm2);
  transform-origin: 47% 43%;
}

.wrist2 {
  transform: var(--transform-wrist2);
  transform-origin: 35% 47%;
}

.leg1 {
  transform: var(--transform-leg1);
  transform-origin: 47% 64.5%;
}

.calf1 {
  transform: var(--transform-calf1);
  transform-origin: 55.5% 71.5%;
}

.leg2 {
  transform: var(--transform-leg2);
  transform-origin: 43% 63%;
}

.calf2 {
  transform: var(--transform-calf2);
  transform-origin: 41.5% 73%;
}

@keyframes spin {
  from { transform: rotate(0deg) scale(0.94); }
  to { transform: rotate(359deg) scale(0.94); }
}

@keyframes shake {
  0% { transform: rotate(-1deg); }
  50% { transform: rotate(2deg); }
  100% { transform: rotate(-1deg); }
}

@keyframes flash {
  0% { opacity: 0.4; }
  100% { opacity: 0; }
}



/**** Wrapper styles ****************/
html,
body {
  height: 100%;
}
body {
  align-items: center;
  background: $light;
  display: flex;
  justify-content: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;

  .background {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 50%;
    &--light {
      background: $light;
    }
    &--dark {
      background: $dark;
    }
  }

  button {
    margin: 20px;
  }
}

To me, the simple one is good because it matches the default Xenforo Admin theme and I am a bit lazy for doing some extra work.

DarKMaSK · Mar 4, 2022

@clown Now I have a question.

If I want to make this button where should I put these html and css codes? I think CSS should be put in extra.less. Am I right? And the html?

XenForo How to place ACP Log Out at the top

DarKMaSK

micke

</clown>

DarKMaSK

DarKMaSK