•
1
0
Today Magma was released - a new dark style for WoltLab Suite 3.1.
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;
}
}
}The best place for this code would be the Global CSS and SCSS in your WoltLab Suite's ACP.
Related Articles
1
•
1
0
*drum roll* Elevenfour releases a new plugin. And it's a dark mode for your WoltLab Suite's ACP. It's still in closed beta - if you'd like to learn more, this article explains.
•
2
1
Bootstrap Icons are designed to work with the Bootstrap Framework - but you can use them outside of that, too. So, I thought I'd bring them to WoltLab Suite.