Jump to content


  • Posts

  • Joined

  • Last visited

  • Days Won


 Content Type 


Release Notes

IPS4 Guides

IPS4 Developer Documentation

Invision Community Blog

Development Blog

Deprecation Tracker

Providers Directory





Everything posted by Rikki

  1. Is there a reason you're creating text settings to hold rgb values? It'd probably make more sense to make them color fields (so users get a color picker), and then using the automatically-created CSS variable instead.
  2. Bear in mind, you don't have to update styles in custom.css. But if you do want to use the new approach: All theme settings that are color fields will automatically be set up as CSS variables, so you don't need to do that yourself (the hex will automatically be converted to an rgb triplet too). So if your "mass_color_main" theme setting is a color field, the --theme-mass_color_main CSS variable will automatically exist. So in your first example, your updated code would be correct and you wouldn't need to do anything extra for that to work. For your second example, are you saying you'd have a theme setting that's just a plain text field? If so, that won't automatically be created as a CSS variable. You'd need to do that yourself, like so: :root { --your_custom_setting: {theme="your_custom_setting"}; } You can then use that variable however you wish. In this second example, nothing is automatic, so you can name your CSS variable whatever you want.
  3. Any theme settings that are "color" fields will automatically be turned into CSS variables for you. If your theme setting has the key "test_color" (like in your screenshot), the CSS variable will be named --theme-test_color. No need to create the CSS variables yourself 🙂
  4. Both background and font color are available as theme settings - look for the "section title" settings on the Text tab (technically you can overwrite the CSS variables as shown above, but it isn't necessary and may be confusing later).
  5. That'll be fixed when we next update 👍
  6. Our menu has more options than most since we've added our website nav, but regardless, that's intended - it's not frequently used and doesn't need to be prominent.
  7. You could, but then you can do that now too. We wouldn't be able to use any pro icons in the base software.
  8. As a side note, I reached out to FA to find out if the Pro license would be an option for us. The bad news is it wouldn't, because anyone who edits/exports themes would be defined as a 'creator' and need a seat on the license. We could use the free version, but the benefits over FA4 are not particularly big, afaik.
  9. icomoon has been removed in 4.5 and jQuery has been upgraded to the 3.x series 🎉
  10. The reason is essentially that it'd be a big undertaking for us to update to FA5 for relatively little benefit for most customers. Some people (like yourself) would obviously have more need for it, but on the whole the cost/benefit of upgrading is minimal. They do have a migration script but again I'm not convinced it's worthwhile to include that on every site.
  11. 4.5 introduces some changes to CSS, so I wanted to provide an overview of those and how they might affect you. IE11 Firstly, we've completely dropped support for IE11. This means you'll start to see newer CSS methods being used that IE11 does not support. Atomic classnames One thing you'll notice as you read on is we're moving towards using atomic classnames for utility styles. What does that mean? Basically, each classname is just a convenience helper for applying one particular style. You build how an element looks and behaves by applying multiple classnames. While this is slightly more verbose in the HTML, it's also much clearer and avoids having to create mutant selectors that exclude certain elements. If you see an element with ipsBorder_top, it's obvious what it does. Don't want a top border? Just remove that class. Another benefit is that it allows more precise control over how styles are applied at different device sizes, because individual styles can be modified. Want a top border on desktop, but not phones? ipsBorder_top sm:ipsBorder:none will do the job - no crazy selectors or additional media queries necessary. Class prefixes/modifiers Wait, what's that sm: bit in the atomic classname example above? That's a new naming convention you'll see which controls at which breakpoints the style is applied. Unprefixed (e.g. ipsBorder_top). Applies to all devices, desktop and smaller. md: (e.g. md:ipsBorder_top). Applies to tablets and smaller. sm: (e.g. sm:ipsBorder_top). Applies to phones only. sm and md prefixes take priority over the desktop classname. This means you provide the desktop classname but can override it for tablets and/or phones by also adding an md: or sm: classname. For example, ipsPadding_top:double sm:ipsPadding_top:half applies double top padding on desktop, but only half top padding on phones. You'll also see modifiers on some classes (as in the example above), for example ipsPadding:half. ipsPadding is saying 'apply padding to all sides', and the ':half' modifier makes it a smaller amount. BEM classnames for modules While we're using atomic classes for global utility styles, we're moving towards BEM for module-specific classes. BEM is simply a naming convention, so it doesn't have too much impact on you - you'll just see a new structure for new classnames that should be easier to understand. Note: We haven't rewritten our CSS framework with the atomic classname, class prefix/modifier or BEM approaches. Don't worry - 90% of the classes you're used to will be the same. I just wanted to point out that going forward, new classes will follow these paradigms. CSS Variables & calc We're now making use of CSS variables (also known as CSS custom properties). Check out this MDN article if you aren't familiar with them. This enables us to define some values in one place but use them throughout the product - and it allows you to change the value in one place if you wish to do so for your theme. Most of our CSS variables are defined at the top of global.css in the CSS framework, but you'll also see some other local variables defined in other places. Variables are simply used by wrapping the name in the var() function, e.g. var(--positive-light). You'll see some variables named --sp-1 and so on. This is our new 4px spacing scale. In 4.5 and going forward, when we style elements we'll generally be using one of these values for widths, heights, borders, spacing etc. to keep everything consistent. You should do the same for elements you create. We're also making use of calc(). This is another CSS function that allows math operations to be done. Instead of having to hardcode numbers for positions, sizes etc., we can now use calc() to do it for us based on some other values (often CSS variables). CSS Variables for theme settings We are deprecating the usage of the {theme} and {hextorgb} tags for color-type theme setting keys (but not for non-color settings or when you need to pass a specific hex code in). Instead, color-type theme settings will automatically have a CSS variable created for them, named --theme-setting_key, where setting_key is the key of the setting as defined in the AdminCP. The variable will be a triplet representing the color, for example 255, 255, 255. Therefore, this value can be used with both the rgb and rgba CSS color functions. Here's an example. If in the past you'd wanted to use the area_background theme setting in your CSS, you'd do background: {theme="area_background"}. Or if you want some opacity, you'd do background: {hextorgb="area_background" opacity="0.2"}. In 4.5, the correct way of using these will be: background: rgb( var(--theme-area_background) ) and background: rgba( var(--theme-area_background), 0.2 ) respectively. We're doing this now because it will open up some exciting functionality in future. To be clear, any existing usage of {theme} and {hextorgb} will continue to work fine in 4.5, but we encourage you to move over to the CSS variable approach. Hardcoded hex values In 4.5 we have largely removed all hardcoded hex colors from our CSS files, and adjusted styles to use theme setting values instead. This will make it much easier for admins to fully colorize their theme without hardcoded colors messing things up. I encourage you to update your app's CSS to follow this approach. Font sizes We've moved font sizes to a fixed scale. These have been implemented as theme settings so they are customizable. However, rather than use the theme setting value directly, you should make use of the new {fontsize} plugin. This plugin ensures the global scale is applied to any values passed in, allowing 'large print' versions of themes to be easily created. You should use the {fontsize} plugin for font sizes both when you use one of the theme settings and when you use specific pixel values (e.g. {fontsize="72"} - for 72px text) When used with the {fontsize} plugin, the type scale keys are: x_small (12px) small (13px) medium (14px) base (16px) large (18px) x_large (20px) 2x_large (24px) 3x_large (30px) 4x_large (36px) Flexbox While we've used flexbox in some places in previous versions, 4.5 makes much wider use of it and also introduces a new family of classes. If you aren't familiar with flexbox, I highly recommend this CSSTricks article for a primer on it. Essentially, instead of positioning elements using floats/clears/etc., flexbox treats the container as a flexible box with properties for controlling how elements inside of it as laid out. 4.5 has a number of new classes that are essentially just convenience for the usual CSS rules. ipsFlex (sets element to display: flex) ipsFlex-ai:start, ipsFlex-ai:center, ipsFlex-ai:end, ipsFlex-ai:stretch (ai - values for align-items property) ipsFlex-as:start, ipsFlex-as:center, ipsFlex-as:end, ipsFlex-as:stretch (as - values for align-self property) ipsFlex-jc:start, ipsFlex-jc:center, ipsFlex-jc:end, ipsFlex-jc:around, ipsFlex-jc:between (jc - values for justify-content property) ipsFlex-fd:column, ipsFlex-fd:row, ipsFlex-fd:column-reverse, ipsFlex-fd:row-reverse (fd - values for flex-direction property) ipsFlex-fw:wrap, ipsFlex-fw:nowrap, ipsFlex-fw:wrap-reverse (fw - values for flex-wrap property) ipsFlex-flex:10 - sets flex-grow: 1 and flex-shrink: 0 ipsFlex-flex:11 - sets flex-grow: 1 and flex-shrink: 1 ipsFlex-flex:01 - sets flex-grow: 0 and flex-shrink: 1 ipsFlex-flex:00 - sets flex-grow: 0 and flex-shrink: 0 All of these classes have md and sm prefixed versions too, and this opens up the possibility of having different layouts on different device sizes in a way that's much easier than the hoops you'd have to jump through before. For example, to create some elements that show as a row on desktop but collapse to a column on mobile, you'd just apply ipsFlex ipsFlex-fd:row sm:ipsFlex-fd:column. The sm:ipsFlex-fd:column class overrules the ipsFlex-fd:row class on mobile, adjusting the layout. (Note: flex-direction: row is the CSS default direction anyway, so you can actually leave out ipsFlex-fd:row - it's implicit. I included it in the example for clarity.) Padding/margin We've added new spacing classes for padding and margin, to allow for atomic classnames, device prefixes and modifiers. ipsPad, ipsPad_double, ipsPad_half, and all of the ipsSpacer_* classes are now deprecated. You'll still see them in our templates and they'll still work in yours, but don't use them in any new work - you should use the updated classes below. The padding classes are now named ipsPadding: ipsPadding, ipsPadding:none, ipsPadding:half, ipsPadding:double - apply padding to all four sides ipsPadding_vertical, ipsPadding_vertical:none, ipsPadding_vertical:half, ipsPadding_vertical:double - apply padding to top and bottom ipsPadding_horizontal, ipsPadding_horizontal:none, ipsPadding_horizontal:half, ipsPadding_horizontal:double - apply padding to left and right ipsPadding_left, ipsPadding_left:none, ipsPadding_left:half, ipsPadding_left:double - apply padding to the left side (RTL aware) ipsPadding_right, ipsPadding_right:none, ipsPadding_right:half, ipsPadding_right:double - apply padding to the right side (RTL aware) ipsPadding_top, ipsPadding_top:none, ipsPadding_top:half, ipsPadding_top:double - apply padding to the top side ipsPadding_bottom, ipsPadding_bottom:none, ipsPadding_bottom:half, ipsPadding_bottom:double - apply padding to the bottom side These classes have md and sm prefixed versions too, allowing you to apply different padding depending on the device size. One side note here: with the old padding classes, padding was simply halved on phones with no opt-out. That's not the case with the new family - if you want half-padding on mobile on an element, you should apply sm:ipsPadding:half in addition to the normal ipsPadding class, for example. This gives you much more control than you previously had. Margins follow basically an identical pattern to padding, with the same variation of classes, except the name is ipsMargin. Gaps Another new family of classes is ipsGap. These classes are used when you want spacing between elements. In the past, you'd have to use :last-child or :first-child to exclude an element, or loop over the elements in the template to leave off a class. If elements wrapped to a new line, putting spacing between the lines was tricky too. ipsGap solves this by applying even spacing between elements, then applying a negative margin on the whole container to bring it back to the starting position. The classname is followed by a modifier, which is a number from our spacing scale, e.g. 1 is 4px spacing, 2 is 8px spacing and so on. ipsGap:1 (1-5 available) - applies both horizontal and vertical spacing around each element in the container ipsGap_row:1 (1-5 available, as well as 0 to remove) - applies vertical spacing on each element in the container Notice ipsGap_row also supports the :0 modifier. This allows you to have horizontal-only spacing - simply apply ipsGap:1 ipsGap_row:0. Be aware that using both ipsMargin (or custom styles that apply a margin) and ipsGap on the same element can cause issues. You may want add a wrapper element to handle your margin in this situation. Borders We've also added a class family to add light grey 1px borders to elements - used commonly as dividers between some parts of the page. ipsBorder - apply border to all sides ipsBorder:none - remove border from all sides ipsBorder_vertical - apply border to top and bottom ipsBorder_horizontal - apply border to left and right ipsBorder_top, ipsBorder_bottom, ipsBorder_left, ipsBorder_right - apply border to a particular side These classes have md and sm prefixed versions too, to control borders shown on each device size. This is particularly useful if you apply a border to a flex child which is in a row on desktop but a column on desktop, for example - you will be able to easily control which side the border appears on once collapsed. "Pull" class To better display content areas on mobile, a class named ipsResponsive_pull has been added which 'pulls' a box on the left and right sides on small devices. It's intended to be used on boxes (normally with the ipsBox class) that you want to take up the whole screen width on mobile, allowing better usage of the available screen space. Template changes We've worked to keep template changes as minimal as possible, but in an update the size of 4.5 there are still quite a number of changes. Whether these impact you will depend on if you've modified the template (for theme designers) or rely on a particular selector for theme hooks (for developers). One area that has received fairly big changes is the post/comment templates. We have redesigned the headers and footers of these templates and moved some elements into a separate parent element on mobile devices. As usual, full template changes will be available once we've released betas.
  12. I'm afraid I won't be able to dig up the example because it was a long time ago, but I'm pretty sure I remember someone building a timeline very similar to that using our Pages app and some custom templates. You'd just need a database with a date field and a content field, and then build some custom templates to display it as a timeline 🙂 If you have HTML/CSS skills it should be doable, or a third-party designer could do it without much trouble I expect.
  13. Nice suggestions. I don't think the concept of replying directly to a post works so neatly on forums (well, Invision Community in particular) because our conversations aren't threaded. Instead you quote one or more posts - but your reply is still part of a linear conversation. That said, you're definitely right that having to go to the bottom of the page is a bit old fashioned and cumbersome. I think it could be made easier - for example, one idea would be to have a floating reply button or even reply box, available on a topic page at all times, so you can start working on your reply wherever you happen to be in the topic.
  14. If you've been around Invision Community for a while, you'll know our frontend default theme hasn't significantly evolved since the early days of 4.0. Indeed, the last significant refresh came with 4.2. With the upcoming release of 4.5, we wanted to revisit the default theme and give it a facelift for 2020, as well as make incremental improvements to the underlying codebase as a stepping stone to a bigger re-engineering in a future version. In this entry, I want to talk a little about some of the design decisions that went into building the new theme. Goals Redesigning for the sake of it is never a good idea, so we first laid out what we wanted to achieve: A brighter UI with more saturation & contrast and simpler overall color scheme Improved typography Better, more consistent, spacing around and between elements, especially on mobile Better logical grouping of sections of each page Reducing underutilized links/buttons on the page and finding alternative ways of making them available Improving how post states are displayed Modernizing and enhancing the underlying code that powers the default theme Let's talk a little about each of these. Brighter UI The most obvious change will be that our default colors are brighter and more saturated than before. Before making any changes, we first created a color scale for both neutrals and the brand color (blue, of course). This gave us a flexible but consistent palette of colors to choose from, with appropriate contrast built in. Neutrals have a touch of blue too to avoid seeming washed out. We've simplified the style, in particular reducing reliance on background colors to differentiate sections within cards (a card essentially being an ipsBox, for those who are familiar with our framework). Instead, we use spacing, borders and appropriate typography to achieve visual separation. Brighter default colors Simplifying the UI by removing block backgrounds Improving typography We've felt our typography has been somewhat muddled for some time - with a mixture of sizes, weights and colors used depending on the particular context. The first step to improving it was to create a typography scale that we could refer to and implement, to ensure we remained consistent throughout the product. Our typography scale (The keen-eyed amongst you may also notice we've switched our default font to Inter. Inter is a fantastic open source font that is ideal for text on the web, and was recently added to the Google Web Fonts project making it super simple for us to incorporate it into our default theme.) We've been much more deliberate about applying type styles, especially for titles, ensuring that they are always visually distinct from surrounding text. We've done this through both color and weight. As a result, pages should instinctively feel more organized and logical than before. An example of improved typography, from the Downloads app Improved spacing (especially on mobile) We identified that spacing (padding and margins) needed some improvement. A lot of spacing values were arbitrary and inconsistent, leading to poor visual harmony across any given page. Most troubling of all, on mobile sizes we simply halved desktop padding values. While this was a reasonable approach in the days of phones with small screens, it has felt decidedly dated for some time. Phone screens are now typically larger and able to accommodate roomier UIs without appearing comical. In 4.5, we have done away with that approach, and the impact was immediate. Mobile sizes now get a much more pleasant interface, with elements having room to breathe. In addition, we've also made most cards full-width to provide additional breathing space for content. Posts can finally breathe on mobile There are numerous other tweaks across the product too: default spacing has been increased a little, data tables (e.g. topic listing) get extra vertical spacing, and spacing between elements has become more consistent. Improved grouping of related elements Prior to 4.5, most content areas existed inside cards. However, one notable exception to this was page headers and as a result, they could feel particularly disorganized, especially for users who had many controls in this part of the page (such as staff). To solve this problem, we've developed a new, standardized design for content item page headers, giving them their own cards and consistent button placement. Topic view header Some areas don't necessarily fit into the same design pattern above. In those areas, we've tweaked styling to suit the context, while still adhering to our overall aesthetic. Calendar header Messenger conversation header Reducing underutilized links/buttons Finally, another area we identified as needing improvement is the abundance of tools, made up of links and buttons, across pages. Many of these are only used occasionally and so would be better moved out of the main view to simplify the page. Two particular areas we focused on were share links and postbits (both forum posts and comments in other apps). Research shows social share links are used by a vanishingly small percentage of users, so even though they were at the bottom of the page, it was unnecessary to make them so prominent (given their eye-catching colors). To solve this, we've added a share link to the page header, with the social network links themselves in a popup menu. The result is ideal: sharing functionality is unobtrusive but obvious. Share links in content items Comment areas have also suffered from 'button creep' over the years. A typical comment will contain a report link, a share link, a quote link and multiquote button, reactions, plus IP address, checkbox, edit and options links for certain users. That is a lot of visual noise around the important part: the content. We've therefore simplified comment boxes as much as is reasonable. Reporting and sharing comments/posts is now available in the post options menu, as are any tools for the author/staff. Quoting and reacting are two primary interactions for users, so they of course retain their position in the control bar. Simpler postbits, even for staff Improving post states Posts/comments in Invision Community can have many states - sometimes more than one. Posts can be hidden/unapproved, popular, recommended, solved (new in 4.5!) or highlighted because of the author's group. It's always been a challenge to indicate these statuses well. In previous versions, we added a border but the most prominent indicator was a flag in the top-right corner of the post. This had three problems: Due to the lack of space (thanks to report/share links), showing more than one flag was difficult. Showing any flags on mobile was messy because of the space constraints. The meaning of the flags was not obvious, especially to new users. Group-highlighted posts had no flag, just a border, which made them even more difficult to understand. With the top-right corner of posts now tidied up and free from fluff, we were able to much more effectively use this space to indicate post statuses. In 4.5, posts and comments will show badges when they have a particular status, as well as a more attractive semi-transparent border. For group-highlighted posts, we show the group name instead (the colors of this highlight are still controllable via theme settings). A post with two states: group highlighted and popular This works much better on mobile too, where the status badges get the prominence they deserve: Mobile post statuses Modernizing the underlying code I wrote about the technical improvements behind the theme in a previous entry. If you're a theme designer or edit the theme for your own community, go and check it out now! Wrapping up As well as these large-scale concepts, you'll notice many other smaller enhancements as you start using the new theme. I've shown some snippets of pages in the screenshots above, but I've included some full-page views below so you can see the overall aesthetic and how these pieces fit together. Modernizing and refreshing our default theme has been needed for some time, but we view this as just a stepping stone to future work that will be reserved for a major version bump, and we're excited to figure out where we go next. Screenshots Desktop forum views (click to expand) Mobile forum views (click to expand) Activity streams & messenger (click to expand)
  15. If you've been around Invision Community for a while, you'll know our frontend default theme hasn't significantly evolved since the early days of 4.0. Indeed, the last significant refresh came with 4.2. With the upcoming release of 4.5, we wanted to revisit the default theme and give it a facelift for 2020, as well as make incremental improvements to the underlying codebase as a stepping stone to a bigger re-engineering in a future version. Keep an eye out for our next blog for more on the facelift. In this entry, I want to go over some of the design and code-level changes we've implemented that will be of particular interest to third-party theme designers, or those building a custom theme for their community. IE11 Support Until now, we've supported IE11 as a 'B' browser - meaning we didn't aim for perfect support (especially visually), but did aim to make all functionality work, and we fixed IE11-specific issues if possible. As of 4.5, we no longer support IE11 in any way and Invision Community will not work well in that browser. By removing support for IE11, we are able to make use of newer CSS technologies which significantly eases development for us and third-party designers. I'll discuss some of those below. Combined theme settings We've combined a number of existing theme settings into one new setting. We've found that settings like poll_bar, step_background, rating_hover and so on are nearly always set to the same color - typically the site's main brand color. These settings have therefore been replaced with one new brand_color setting, which is used throughout the CSS in places where this primary color would be needed. This will simplify the early stages of theme development and make it easier to match branding in Invision Community. Front end colors Removing hardcoded colors While our theme settings have allowed community owners to change most colors, there were still many hardcoded in our CSS framework. These were typically neutral colors used for things like 'close' links, semi-transparent backgrounds and so on, but it was enough to make creating a dark theme an unrealistic prospect without an awful lot of effort (and kudos to those designers who have offered dark themes up until now!). In 4.5, we've removed hardcoded colors from our framework, and instead rely on colors already defined by theme settings. You can now, finally, create a dark theme just by editing the built-in theme settings. Type scale & {fontsize} tag While we've had fixed type-size classes (e.g. ipsType_normal) for a long time, in practice many elements had their own font sizes set. This leads to inconsistency and poor visual rhythm too. Another side effect is it was also tough to globally change the font size (such as for branding purposes, or to create a theme for visually-impaired users). To solve these problems, we first created a type scale; that is, a fixed number of sizes to choose from. A product the size of Invision Community does have need for a flexibility, so we settled on the following scale: x_small: 12; small: 13; medium: 14; base: 16; large: 18; x_large: 20; 2x_large: 24; 3x_large: 30; 4x_large: 36. All of these values are editable as theme settings, so each theme can adjust the type scale used. Our default CSS in 4.5 has been fully updated to put all type on this scale. To actually make use of these settings, we have added a new {fontsize} tag which accepts either a scale key, or a specific pixel size (for those occasional situations where a specific size is absolutely needed, e.g. icons). Why couldn't we just use {theme="x_small"}, or even CSS variables? To solve the problem of globally scaling text, we have also added a percentage-based scale setting that will save you from having to create your own type scale. The {fontsize} tag automatically applies the global scale to any values passed into it. Want text in your theme to be twice as big as default? Simply set the global type scale to 200% and the entire theme will reflect the change immediately. The new font size options Spacing scale The lack of a consistent spacing scale has led to some arbitrary values being used in any given situation, which again has had a negative impact on the visual harmony of our design. We've therefore implemented a 4px spacing scale (using CSS variables rather than theme settings this time) and applied across almost all padding/margin values. In time, we anticipate fully switching all measurement values to the scale. New CSS class families We have added a range of new spacing classes for padding and margins, allowing far more control over how these are applied, especially on different device sizes. Previously, ipsPad (15px) was simply halved on small screens - with no 'opt-out' short of adding specific CSS. We've felt this has been imprecise for some time, especially since mobile devices typically have larger screens in 2020 and don't need to be so tightly-spaced. ipsPad_all now replaces the existing ipsPad, and does not halve itself on small screens. Instead, there's a new responsive naming convention that allows you to apply specific padding on specific device sizes: ipsPad_all:double md:ipsPad_all sm:ipsPad_all:half In this arbitrary example, desktop size (the default) get double padding, medium (tablets) get regular padding and small (phones) get half padding. We've added similar classes for top, bottom, left and right padding, as well as horizontal, vertical and none (to removing all padding) shortcuts. For margins, the old ipsSpacer_* classes have been replaced with a new ipsMargin family that work exactly the same as the padding classes above, with the same range of flexibility. The old ipsPad/ipsSpacer classes will continue working as they did before for backwards compatibility, but should be considered deprecated from 4.5 onwards. We've also added a whole range of new ipsFlex classes, also with responsive controls (making it easy to have horizontal layouts on desktop and vertical layouts on mobile, for example), as well as a new ipsGap utility that automatically adds spacing between elements, without requiring manual :first-child/:last-child exclusions. CSS variables & calc() In 4.5, thanks to IE11 support ending, we're finally making use of CSS variables and calc() to make CSS more maintainable and easier to customize. A lot of repeating or often-customized styles - such as form field styles, message colors, card styles, border radii etc. - are now created as CSS variables, allowing theme designers to easily change styling in one place. Instead of magic numbers, we either stick to our spacing scale, or use calc() to avoid hardcoded numbers. The future The work we've done so far is just a 'first-pass'. We'll be pressing forward with modernization throughout the 4.5.* series and beyond with a view to reducing our footprint, improving our ability to maintain our CSS and, of course, making theming easier for our customers.
  16. Funny you should say that 🤭
  17. I just wanted to note that we've improved the error message for this error in 4.5, so users at least won't see a mysterious "-200" message when it happens.
  18. No need to hold your breath - it's already fixed and merged into the next release 👍
  19. I've logged an issue for this and we'll look at getting it changed for 4.5 🙂
  20. Platforms that use reverse order do so to show feeds - individual items not related to each other. We do that for the topic listing and for streams. I can’t think of any platforms that actually show conversations in reverse order. Twitter replies, iMessage, WhatsApp, Facebook and Instagram comments - they’re all in regular chronological order (aside from when ‘intelligent’ ordering is employed, such as Facebook showing 'relevant' messages or Reddit sorting by most-upvoted). In fact, the only medium I can think of that uses reverse order is, ironically, good old-fashioned email (and even that depends on your client).
  21. Absolutely - and we did this with a compromise. Make a preview tool available for those few customers who have valid edge cases, without adding Yet Another Button in a prominent location for all our other customers. Every extra button or toggle we add to a page increases the complexity for users a little bit more, mostly unnecessarily. We try to consider all users and balance functionality with simplicity as much as we can.
  22. Honest reason it's located where it is: we do not feel it has sufficient usefulness for most sites and most users to justify giving it a more prominent location next to the submit button. We made it a customizable toolbar button so that it's available for those few edge cases where you could argue it's useful, without it being a fundamental part of the editor UI.
  23. .ipsApp_front is also a class on the body element, so you need to remove the space (I've also moved that class to the front of the selector for clarity): body.ipsApp_front[data-pageapp="forums"][data-pagemodule="forums"][data-pagecontroller="index"] .ipsBreadcrumb { display: none !important; } An alternative way is using the data-pagelocation attribute in the same way you've used the others, since that tells you whether it's 'front' or 'admin': body[data-pagelocation="front"][data-pageapp="forums"][data-pagemodule="forums"][data-pagecontroller="index"] .ipsBreadcrumb { display: none !important; } Either of those approaches should work 🙂
  24. We certainly understand that 🙂I'm almost positive v4 will be maintained for a considerable period of time after v5 is available. That said, we of course need to continue to press forward and modernize the platform, especially in terms of UI and taking advantage of more modern approaches to development. We will of course do everything we can to make it as painless as possible when the time comes.
  25. Yeah, I do actually agree with you. But I still love React more.
  • Create New...