Today Magma was released - a new dark style for WoltLab Suite 3.1.
How to Shrink the userPanel Dropdowns
-
- Tutorial
- 1,146 Views
- Featured
If you've installed some plugins that extend the Dropdowns of WoltLab Suite, you might want to shrink them down a little bit, a least for notebook screens that are wide but no so tall. The following code adjusts font and icon sizes and the padding so the panel fits better and would only be executed if the viewport is wider than 1024px and has a maximum height of 700px.
Sass (Scss)
@media (min-width: 1025px) and (max-height: 700px) {
.interactiveDropdown {
.containerHeadline > h3, .interactiveDropdownTitle, .loading, .noItems {
font-size: $wcfFontSizeDefault;
}
.inlineList {
font-size: $wcfFontSizeSmall;
}
.interactiveDropdownItems > li {
padding: 10px 15px;
}
.icon48 {
font-size: 28px;
height: 32px;
line-height: 32px;
width: 32px;
vertical-align: -5px;
}
.userAvatarImage {
max-width: 32px;
max-height: 32px;
}
}
}
Display More
The best place for this code would be the Global CSS and SCSS in your WoltLab Suite's ACP.