Ehren

Hi @GoGators Since these are just FontAwesome icons, you can change them (or resize them) however you like with a sprinkle of CSS 🙂

Nope, it's not dynamic yet, but I imagine that's something I could do in the future with relative color syntax. With that said, when you select a colour from the editor, you'd probably expect that colour to be the same across on all light (or dark) themes - although I guess a slight change to the brightness (to ensure sufficient contrast) would be okay.

No worries. The What's New carousel can be adjusted using: .ipsData--downloads-whats-new{ --i-data--basis: 200px; /* The width of each item */ --i-data--max: 99; /* The maximum number of columns visible at one time. By default, this is 4, but 99 effectively removes this limit */ } :

Hey, This will reduce the size of the grid on the Downloads page when viewing a category. If I'm misunderstood the page you're referring to, let me know: /* Reduce size of downloads page grid */ .ipsData--download-file-table{ --i-data--basis: 260px; }

Everything’s correct, you just need to assign a smaller column width. By default, the “ideal size” for columns is 280px. Since there isn’t enough space for 6 of those columns (1560px + gaps), they collapse instead of becoming squashed. Making the ideal size of columns smaller can be done by adding a basis class, such as i-basis_120 to the ipsGrid element (the basis name was inspired by flex-basis and can be used on flex children too). Just make sure to test all screen sizes by adjusting your browser window.

Thanks for the feedback, I agree with all of this. I'll likely remove the "mobile carousel" feature for the moment until I can find a better solution in the future. The tall widgets make smaller ones look too empty which isn't ideal. I've also simplified the Followers area by removing the "See all followers" link (clicking/tapping on the row takes you to the same page anyway). And if the box gets too narrow, the avatars will wrap to a new line instead of squashing the text. 🤝

This will do it. Nice and simple 🙂 /* Reverse user navigation */ .ipsUserNav--member{ flex-direction: row-reverse; }

I’m glad you think so too. Numbers have been much easier to work with compared to descriptive names. 🙂 I should also mention that those variables map directly to utility classes, such as class=“i-background_2 i-color_hard”

All of the theme colours are available as variables. The most useful ones for backgrounds are --i-background_1 through to --i-background_6. Background 1 is the lightest colour in a light theme, and the darkest in the dark theme. There are 3 main colors: --i-color_root, --i-color_soft and --i-color_hard. "Root" is the global text colour, "soft" is a subtle/softer colour and "hard" is a higher contrast colour. There are also a bunch of others including --i-color_primary, --i-color_secondary, --i-color_positive, --i-color_negative. In practice, variables in v5 look like this: .box{ background-color: var(--i-background_3); color: var(--i-color_hard); padding: 1em; }

If you can elaborate on what you're trying to achieve, I might be able to help 🙂

Yeah, tabs were overhauled in beta 5 to fix numerous accessibility concerns (which Lighthouse was reporting). As part of that overhaul, those options were removed as they're no longer required. [aria-selected="true"] is now used instead of the active class. And I don't believe the panelPrefix was ever used.

Oh whoops, I totally misunderstood this haha. Marc's code will work fine in that case! 😅

This may look a little confusing at first, but this is an alternative way to hide it (and how the default CSS handles it). .ipsData--grid.ipsData--topic-feed-widget{ --i-data--show-last-author: initial; --i-data--show-last-reply: ; } In the future, it'll be more readable. Something like this (but this code won't work just yet): .ipsData--grid.ipsData--topic-feed-widget{ --hide-meta: true; }

No promises for 5.0.0, but I'll see if the developers have a solution! 🙂

ipsGrid has moved to a more fluid concept in version 5. With version 4, you'd typically add ipsGrid and then each child would need to use a ipsGrid_spanx class which told it how many columns to span (out of 12). On tablets and phones, these grids would automatically collapse to 1 column. That concept was fine a decade ago, but with the limitless amount of devices these days, fluid/dynamic concepts are better. In version 5, when you assign ipsGrid, all children are automatically assigned to a grid (the span class is now redundant). By default, grids have an ideal column width of 260px, but you can change that by adding a basis class, such as i-basis_350 which will make all columns 350px, or by changing the --i-basis CSS variable for that element. Columns will automatically grow/shrink/add/remove depending on the available space on the screen. If you need to restrict the grid to a certain amount of columns (lets assume you never want more than 3 columns for some reason), you can add ipsGrid--max-3 to the parent. If you need to use the old grid system and force content into a 12 column grid (like v4), you can use .ipsSpanGrid on the parent, and then ipsSpanGrid__4 (for example) on the children. But the new fluid code is better 🙂

Yep, that should work 🙂

Since <button> elements shouldn't contain <a> elements, I'd recommend using this instead: <style> /* Smooth scroll when the button is clicked */ html:has(.scrollToTop:hover, .scrollToTop:focus){ scroll-behavior: smooth; } /*Floating Back-To-Top Button*/ .scrollToTop { position: fixed; bottom: 10px; inset-inline-end: 10px; font-size: 12px; color: #fff; background-color: var(--i-background_dark); padding: 10px 15px; border-radius: 4px; } .scrollToTop:hover { background-color: var(--i-primary); } .scrollToTop i{ margin-inline-end: .4em; opacity: .7; } </style> <a href="#" class="scrollToTop"><i class="fa-solid fa-circle-chevron-up"></i> Back to Top</a>

Thanks for the suggestion! Dropdown menus will likely receive an overhaul in a future 5.x update, but a select menu is a nice suggestion for this area. I'll keep it in mind for the future 🙂

This isn’t possible at the moment. The layouts require different HTML so we’d need to load both layouts on every page (which we don’t do currently) and then hide one with CSS. Sorry about that!

By default, the bar is just a border which can't be blurred. But you can replace it with a pseudo element and add a box-shadow to it like so: /* Glowing category bar */ .ipsCategoryWithFeed__item{ border-top-width: 0; } .ipsCategoryWithFeed__item::before{ content: ''; grid-column: 1/-1; height: 6px; background: var(--i-featured, var(--i-background_6)); box-shadow: var(--i-featured, var(--i-background_6)) 0px 0px 20px; }

Hi Maxxius, I believe horizontal scrolling can be done with mouse wheels by holding the Shift key and scrolling, which might be helpful in this instance. Clicking and dragging to navigate through content isn't really a web standard, but rather a hacky attempt at mimicking touch events using a mouse. It also breaks native events that users might expect (such as clicking/dragging to select a line of text). Maybe give the Shift approach a try to see if that improves your workflow. If not, increasing the size of the scrollbar is also an option. We don't have any immediate plans to adjust the functionality of carousels leading up to 5.0.0, but see how those solutions go and we can always reevaluate in the future if necessary 🙂

Definitely don't use this code, it'll reset margins on every image on your site. This will center the logo: .ipsNavPanel .ipsLogo{ justify-content: center; } Correct. Background images were never implemented, so CSS is the best solution for the moment. 🙂

When mentioning the "tabbed UI", do you mean the carousel? If so, you can replicate that in the main column by clicking a widget group (not an individual widget, but the group of them) and then choose "Carousel" from the "Area Layout" options.

Hey Jimi, Sounds good to me. I'll discuss this with the team to see if it's possible 🙂

Hi @Baian007 Adding this to your Custom CSS area will add a side column to your login page, only on pages wider than 980px. I hope that helps! /* Add a side column to login form */ @media (min-width: 980px){ .cLogin_single{ max-width: none; } .cLogin_single .ipsBox{ --image-width: min(400px, 40%); padding-inline-end: var(--image-width); position: relative; overflow: hidden; } .cLogin_single .ipsBox::after{ content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; background-color: #222; background-image: url("https://site.com/image.jpg"); background-size: cover; background-position: 50%; width: var(--image-width); } }