Single post in Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides > Site Skins: How-To, and Helpful CSS >
The show/hide menu button on about mes toggles a class name so you can use that to make the about me a hide box. The usual menu (Send Message/Nice/Report) is shown at the bottom of the about in expanded mode. This does not work in multiuser mode though because multiuser abouts don't have menu icons.
code
/* #content > #profilepage to ensure this only runs on single profile pages,
not in multiuser */
#content > #profilepage #aboutme {
max-height: 0;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
transition: max-height 0.4s ease-in-out;
}
#content > #profilepage #aboutme > .bbcode {
order: -1;
margin-bottom: 0.75rem;
}
#content > #profilepage #aboutbox.menu > #aboutme {
max-height: 2000px;
}
/* make whole header act as toggle */
#content > #profilepage #aboutbox > h3 {
display: flex;
position: relative;
}
#content > #profilepage #aboutbox > h3:after {
display: flex;
align-items: center;
content: "▶";
transform-origin: 50% 50%;
font-size: 0.75em;
margin-left: 8px;
transition: 0.4s;
}
#content > #profilepage #aboutbox.menu > h3:after {
transform: rotate(90deg);
}
#content > #profilepage #aboutbox > h3 > a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#content > #profilepage #aboutbox > h3 > a > .menu_icon,
#content > #profilepage #aboutbox > h3 > a:before,
#content > #profilepage #aboutbox > h3 > a:after {
display: none;
}
/* reduce stutter */
#content > #profilepage #aboutbox > div > .menu {
display: block;
margin-bottom: 0;
}
screenshot
Avatar by Kaelwolfur.
Sent from my PokéNav