Ehren

That bug has been fixed for the next update. If you add your code to the front end Custom CSS area (in the Theme Editor), it'll work correctly.

My talents unfortunately don’t extend far beyond web design but I appreciate the compliment regardless! 😅

Sorry, I edited my code shortly after posting it but you must have been faster than me and copied the code before it was updated. Using the new code will fix it everywhere 🤝

Thanks @Madhouseau and @zelgadis , this will be fixed for the next update. In the mean time, you can add this to your Custom CSS area to fix it: /* Prevent hr's from stretching vertically */ .ipsHr{ max-height: 1px; }

Don’t add Adlagos code from above as it will remove the last author and the stats from every widget on your page. Terabytes code is correct.

The ACP area is best if you’re a theme developer and you want to distribute your theme to clients. This allows you to add your code to the theme while ensuring the frontend “Custom CSS” area is empty for your clients (which is a convenient area for them to add their own code). Separating your code from theirs makes it easy to debug issues in the future since you can easily see what code has been added behind yours. If you’re developing a theme for yourself and have no plans on distributing it to others, then adding your code to the frontend editor is typically more convenient 🙂 From a technical perspective, the ACP code is saved into a CSS file while the frontend code is added into a style tag. So that may also sway your decision.

Tablets are defined as 768px to 979px. Mobiles and desktops fall on either side of that breakpoint. We don’t use device detection, so there will definitely be cases where the “desktop” layout is shown on a tablet. “Desktop”, “tablet” and “mobile” should really be referenced as “large”, “medium” and “small” these days since devices vary considerably in size. I hope that helps!

Hiding the existing footer and attempting to recreate it with your own links isn't the best way to handle this. If elements don't have a hook point you can target, then using Javascript is a simple alternative. (function(){ const mobileMoreButton = document.querySelector('[data-ips-hook="mobileFooter"] [data-el="more"]'); mobileMoreButton.insertAdjacentHTML("beforebegin", ` <li data-el="chat" class="ipsMobileFooter__item"> <a href="#" class="ipsMobileFooter__link"> <span class="ipsMobileFooter__icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.8 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"/></svg> </span> <span class="ipsMobileFooter__text">Chat</span> </a> </li> `); })();

You could use the data-ips-theme and data-ips-scheme attributes (on the html element) to hide certain widgets in certain themes. A simple way would be to use a Raw HTML widget and use if statements like so: <div class="i-display_light"> {{if \IPS\Theme::i()->id === 1}} <img src="light-theme-1.jpg" alt=""> {{elseif \IPS\Theme::i()->id === 2}} <img src="light-theme-2.jpg" alt=""> {{else}} <img src="light-image-fallback.jpg" alt=""> {{endif}} </div> <div class="i-display_dark"> {{if \IPS\Theme::i()->id === 1}} <img src="dark-theme-1.jpg" alt=""> {{elseif \IPS\Theme::i()->id === 2}} <img src="dark-theme-2.jpg" alt=""> {{else}} <img src="dark-image-fallback.jpg" alt=""> {{endif}} </div>The first div holds the "light" images, separated by theme. The second div holds the dark ones. That should work. Alternatively, if you're comfortable with HTML/CSS, recreating that design using code (and the CSS variables) would automatically make it match light/dark mode AND all of your color schemes.

Hello, The inherited colors can be disabled using the following CSS: :root{ --i-inherited-footer-widgets: disable; }I hope that helps!

Hi @My Sharona The width of the side panel can be tweaked using this CSS: .ipsNavPanel{ flex-basis: 400px; }By default, the column has a semi-fluid width of clamp(280px, 16vw, 340px) which gives it a min-width of 280px on small screens, and prevents the panel from being too large (no wider than 340px) on wide screens.

Hi @ntxpla In v5, the navigation menu has been simplified into a single row of links. Submenus are now dropdown menus. Since these menus are opened by clicking the parent item (which is highly recommended over a hover due to accessibility), it's not possible for a link to be assigned to the parent item (you wouldn't want to both open a dropdown menu and navigate to the new link at the same time)

Sure .ipsBox .ipsBox{ background-color: var(--i-box--ba-co); border-radius: var(--i-box--bo-ra); box-shadow: var(--i-box--bo-sh); border-width: var(--i-box--bo-wi); border-style: var(--i-box--bo-st); border-color: var(--i-box--bo-co); }

When ipsBox is nested inside another ipsBox, its styles are removed. Ideally, these boxes should never be nested in the first since it can make some themes look quite broken, but sometimes that’s hard to avoid in the system. Instead, using a different shade background such as i-background_2 (or even no box at all) is typically a cleaner approach than nesting boxes 👍

Reordering these blocks (on the Events page and others such as the Downloads page) is something on my future wish list. I'm not sure of the complexities/hurdles yet, but it would be a nice feature in a future 5.x update. I believe the only way to move your widget below the header would be to create a custom block and then use template hooks to insert it. To hide the other blocks, you can use this CSS: /* Hide Featured Events, Happening Near You and Online Events */ .cEvents__overview-featured, [data-controller="calendar.front.overview.nearMe"], [data-controller="calendar.front.overview.nearMe"] + .ipsBox:not([data-controller="calendar.front.overview.eventList"]){ display: none; } .cEvents__overview-header{ display: block; }I'll add some modifier classes such as .ipsBox--onlineEvents in a future update to make this easier 🤝

There are no plans to implement this by default, however you can achieve that using CSS if you wish: /* Scrollable sidebar */ .ipsLayout__secondary-sticky-inner{ max-height: calc(100vh - var(--i-sticky-offset) - var(--i-sp_block) * 2); overflow: auto; }

Yeah, the flag icons aren't FontAwesome, so none of that code will work. Adding this to your CSS area will allow you to adjust the size of the flag by modifying the --_size variable. With that said, the flag image will start getting blurry after 32px, so it's not super flexible. We don't display flags larger than this by default, so we haven't needed anything larger. .ipsFlag{ --_size: 50px; font-size: var(--_size); line-height: var(--_size); width: var(--_size); height: var(--_size); background-size: var(--_size) auto; background-position: 0 calc(var(--y) / -16 * var(--_size)); }

I have a feeling my slice will be pretty cold after 20+ hours of flights to get here 😬

Light/dark mode can be configured (or even disabled) via the Theme Editor.

👍

The missing "Wallpaper backgrounds" have been fixed and should hopefully be available shortly when Matt pushes the patch. That bug slipped by me as it only seems to happen in some browsers. Regardless, that issue was my mistake, sorry all! 😅

If you can, post it as a bug in the Bug Tracker (including a URL so I can inspect the code) and I'll do my best to help! 🤝

Version 5 has had a huge focus on accessibility. A menu which relies on clicks rather than hover is typically a far more accessible approach. Inspiration was taken from the “File, Edit, etc” menus in both macOS and Windows, where a click is used to open the menu. You could change this to a hover menu by using custom JS, however it wouldn’t allow you to reliably add a link to the submenu header, since those are button elements.

Hello, Navigation submenus in v5 are toggled on click/tap. It's therefore not possible for normal navigation links (such as application links) to be submenu toggles, because clicking them would open the dropdown menu instead of opening the link.

You probably don't want to overwrite every bell icon on the site (for example), just the user panel ones @Drewfus. This code is much safer: /* Larger, bolder user panel icons */ .ipsUserNav__icon{ font-weight: 900; font-size: 18px; }