Ehren

Welcome to Invision Community 5!
Over the coming weeks, we'll be exploring a bunch of new features and improvements coming to our user interface including our brand new theme editor, a new mobile UI, dark mode and performance improvements thanks to a reduction in both JavaScript and CSS. To kick off this series, let’s take a closer look at the new sidebar layout and new view modes for the forum index and topic pages.
Sidebar Layout
Traditionally, Invision Community has shipped with a horizontal header and navigation bar at the top of the page, which is still available in version 5. We're introducing a brand new (and optional) sidebar layout, which can be enabled or disabled easily from within your theme settings. The sidebar not only provides convenient access to your applications, activity streams and search bar, but you can now add links to nodes for even easier access to popular or commonly used areas of your community. For example - a category from your forum, an album from the Gallery, or a product group from Commerce.
Sidebar-zoom.mp4
Forum Index: Feed view
One of our goals for version 5 was to re-imagine new ways for your visitors to consume content, and the sidebar layout is just one of our solutions. Table view has been the typical way of displaying forums, providing visitors with a simple summary of the most recently active topic. Grid mode introduced cover photos to forums and is a great way to make your page more visually engaging, while fluid view allows visitors to filter through a list of topics to easily focus on multiple areas of the community.
Joining these view modes in version 5 is our new Feed view. Optional cover photos and featured forum colours allow you to personalise each forum, and a list of recently active topics with snippets of the most recent reply allow you to easily see what each forum is focusing on at a glance. The topic list drops below the cover photo and converts to a scrollable list on small devices. It's our fresh take on content display, and we can’t wait to hear your feedback!

 
Topic pages: Compact view
In addition, Invision Community 5 also introduces a new, compact layout option for topics. We wanted to create a layout which placed focus on your content while still keeping all of the authors profile information easily accessible within a mini profile. Stats, rank, badges, reputation points and more can be found by tapping the icon at the top of every post. The mini profile strip has also been added to other areas of the software too, such as comments and reviews in applications like Gallery and Blogs, and will appear on the mobile layout when the traditional "table view" is used in topics.
Switching between the new compact view and the author sidebar view takes just seconds giving you complete control over your community.
Mini profile.mp4
 
As part of this view, you also have the choice to feature/pin the original post to the top of every page, making it a breeze for your visitors to easily understand the context of replies without navigating back to page 1. Pinned posts have a slightly larger font-size to distinguish them from replies, and we've thoughtfully truncated them on pages beyond the first to keep scrolling to a minimum.

 
The new sidebar layout and view modes offer a fresh and innovative approach to navigating and interacting with your community. We’re really keen to hear your thoughts on these new views and whether you’ll be unleashing them on your own sites! We appreciate that no two sites are the same, and those who are a fan of the classic header look will benefit from quick styling tools and a visual way to re-arrange the header elements which we’ll cover in a later blog.
We’re looking forward to showcasing a whole bunch of new features over the coming weeks - so stay tuned, and we’ll see you then!
 

View full blog entry

Welcome to Invision Community 5!
Over the coming weeks, we'll be exploring a bunch of new features and improvements coming to our user interface including our brand new theme editor, a new mobile UI, dark mode and performance improvements thanks to a reduction in both JavaScript and CSS. To kick off this series, let’s take a closer look at the new sidebar layout and new view modes for the forum index and topic pages.
Sidebar Layout
Traditionally, Invision Community has shipped with a horizontal header and navigation bar at the top of the page, which is still available in version 5. We're introducing a brand new (and optional) sidebar layout, which can be enabled or disabled easily from within your theme settings. The sidebar not only provides convenient access to your applications, activity streams and search bar, but you can now add links to nodes for even easier access to popular or commonly used areas of your community. For example - a category from your forum, an album from the Gallery, or a product group from Commerce.
Sidebar-zoom.mp4
Forum Index: Feed view
One of our goals for version 5 was to re-imagine new ways for your visitors to consume content, and the sidebar layout is just one of our solutions. Table view has been the typical way of displaying forums, providing visitors with a simple summary of the most recently active topic. Grid mode introduced cover photos to forums and is a great way to make your page more visually engaging, while fluid view allows visitors to filter through a list of topics to easily focus on multiple areas of the community.
Joining these view modes in version 5 is our new Feed view. Optional cover photos and featured forum colours allow you to personalise each forum, and a list of recently active topics with snippets of the most recent reply allow you to easily see what each forum is focusing on at a glance. The topic list drops below the cover photo and converts to a scrollable list on small devices. It's our fresh take on content display, and we can’t wait to hear your feedback!

 
Topic pages: Compact view
In addition, Invision Community 5 also introduces a new, compact layout option for topics. We wanted to create a layout which placed focus on your content while still keeping all of the authors profile information easily accessible within a mini profile. Stats, rank, badges, reputation points and more can be found by tapping the icon at the top of every post. The mini profile strip has also been added to other areas of the software too, such as comments and reviews in applications like Gallery and Blogs, and will appear on the mobile layout when the traditional "table view" is used in topics.
Switching between the new compact view and the author sidebar view takes just seconds giving you complete control over your community.
Mini profile.mp4
 
As part of this view, you also have the choice to feature/pin the original post to the top of every page, making it a breeze for your visitors to easily understand the context of replies without navigating back to page 1. Pinned posts have a slightly larger font-size to distinguish them from replies, and we've thoughtfully truncated them on pages beyond the first to keep scrolling to a minimum.

 
The new sidebar layout and view modes offer a fresh and innovative approach to navigating and interacting with your community. We’re really keen to hear your thoughts on these new views and whether you’ll be unleashing them on your own sites! We appreciate that no two sites are the same, and those who are a fan of the classic header look will benefit from quick styling tools and a visual way to re-arrange the header elements which we’ll cover in a later blog.
We’re looking forward to showcasing a whole bunch of new features over the coming weeks - so stay tuned, and we’ll see you then!
 

View full blog entry

Welcome to Invision Community 5!
Over the coming weeks, we'll be exploring a bunch of new features and improvements coming to our user interface including our brand new theme editor, a new mobile UI, dark mode and performance improvements thanks to a reduction in both JavaScript and CSS. To kick off this series, let’s take a closer look at the new sidebar layout and new view modes for the forum index and topic pages.
Sidebar Layout
Traditionally, Invision Community has shipped with a horizontal header and navigation bar at the top of the page, which is still available in version 5. We're introducing a brand new (and optional) sidebar layout, which can be enabled or disabled easily from within your theme settings. The sidebar not only provides convenient access to your applications, activity streams and search bar, but you can now add links to nodes for even easier access to popular or commonly used areas of your community. For example - a category from your forum, an album from the Gallery, or a product group from Commerce.
Sidebar-zoom.mp4
Forum Index: Feed view
One of our goals for version 5 was to re-imagine new ways for your visitors to consume content, and the sidebar layout is just one of our solutions. Table view has been the typical way of displaying forums, providing visitors with a simple summary of the most recently active topic. Grid mode introduced cover photos to forums and is a great way to make your page more visually engaging, while fluid view allows visitors to filter through a list of topics to easily focus on multiple areas of the community.
Joining these view modes in version 5 is our new Feed view. Optional cover photos and featured forum colours allow you to personalise each forum, and a list of recently active topics with snippets of the most recent reply allow you to easily see what each forum is focusing on at a glance. The topic list drops below the cover photo and converts to a scrollable list on small devices. It's our fresh take on content display, and we can’t wait to hear your feedback!

 
Topic pages: Compact view
In addition, Invision Community 5 also introduces a new, compact layout option for topics. We wanted to create a layout which placed focus on your content while still keeping all of the authors profile information easily accessible within a mini profile. Stats, rank, badges, reputation points and more can be found by tapping the icon at the top of every post. The mini profile strip has also been added to other areas of the software too, such as comments and reviews in applications like Gallery and Blogs, and will appear on the mobile layout when the traditional "table view" is used in topics.
Switching between the new compact view and the author sidebar view takes just seconds giving you complete control over your community.
Mini profile.mp4
 
As part of this view, you also have the choice to feature/pin the original post to the top of every page, making it a breeze for your visitors to easily understand the context of replies without navigating back to page 1. Pinned posts have a slightly larger font-size to distinguish them from replies, and we've thoughtfully truncated them on pages beyond the first to keep scrolling to a minimum.

 
The new sidebar layout and view modes offer a fresh and innovative approach to navigating and interacting with your community. We’re really keen to hear your thoughts on these new views and whether you’ll be unleashing them on your own sites! We appreciate that no two sites are the same, and those who are a fan of the classic header look will benefit from quick styling tools and a visual way to re-arrange the header elements which we’ll cover in a later blog.
We’re looking forward to showcasing a whole bunch of new features over the coming weeks - so stay tuned, and we’ll see you then!
 

View full blog entry

Welcome to Invision Community 5!
Over the coming weeks, we'll be exploring a bunch of new features and improvements coming to our user interface including our brand new theme editor, a new mobile UI, dark mode and performance improvements thanks to a reduction in both JavaScript and CSS. To kick off this series, let’s take a closer look at the new sidebar layout and new view modes for the forum index and topic pages.
Sidebar Layout
Traditionally, Invision Community has shipped with a horizontal header and navigation bar at the top of the page, which is still available in version 5. We're introducing a brand new (and optional) sidebar layout, which can be enabled or disabled easily from within your theme settings. The sidebar not only provides convenient access to your applications, activity streams and search bar, but you can now add links to nodes for even easier access to popular or commonly used areas of your community. For example - a category from your forum, an album from the Gallery, or a product group from Commerce.
Sidebar-zoom.mp4
Forum Index: Feed view
One of our goals for version 5 was to re-imagine new ways for your visitors to consume content, and the sidebar layout is just one of our solutions. Table view has been the typical way of displaying forums, providing visitors with a simple summary of the most recently active topic. Grid mode introduced cover photos to forums and is a great way to make your page more visually engaging, while fluid view allows visitors to filter through a list of topics to easily focus on multiple areas of the community.
Joining these view modes in version 5 is our new Feed view. Optional cover photos and featured forum colours allow you to personalise each forum, and a list of recently active topics with snippets of the most recent reply allow you to easily see what each forum is focusing on at a glance. The topic list drops below the cover photo and converts to a scrollable list on small devices. It's our fresh take on content display, and we can’t wait to hear your feedback!

 
Topic pages: Compact view
In addition, Invision Community 5 also introduces a new, compact layout option for topics. We wanted to create a layout which placed focus on your content while still keeping all of the authors profile information easily accessible within a mini profile. Stats, rank, badges, reputation points and more can be found by tapping the icon at the top of every post. The mini profile strip has also been added to other areas of the software too, such as comments and reviews in applications like Gallery and Blogs, and will appear on the mobile layout when the traditional "table view" is used in topics.
Switching between the new compact view and the author sidebar view takes just seconds giving you complete control over your community.
Mini profile.mp4
 
As part of this view, you also have the choice to feature/pin the original post to the top of every page, making it a breeze for your visitors to easily understand the context of replies without navigating back to page 1. Pinned posts have a slightly larger font-size to distinguish them from replies, and we've thoughtfully truncated them on pages beyond the first to keep scrolling to a minimum.

 
The new sidebar layout and view modes offer a fresh and innovative approach to navigating and interacting with your community. We’re really keen to hear your thoughts on these new views and whether you’ll be unleashing them on your own sites! We appreciate that no two sites are the same, and those who are a fan of the classic header look will benefit from quick styling tools and a visual way to re-arrange the header elements which we’ll cover in a later blog.
We’re looking forward to showcasing a whole bunch of new features over the coming weeks - so stay tuned, and we’ll see you then!
 

View full blog entry

I believe this happens when the dropdown menu is taller than your viewport (browser window).
I imagine this is done intentionally because browsers can't scroll "above the viewport", they can only scroll below the viewport. Imagine if your theme menu was only 900px from the top of your screen (which could happen on certain pages), but the dropdown menu was 1200px in height. If it opened upwards, the top of the menu wouldn't be clickable since it would go above your screen.
Not really a bug, but this will only happen in situations when your theme menu is really tall, so this is technically working as intended 🙂

I believe this was a bug that was resolved quite a while ago. Are you also seeing this on a default unaltered theme? If this is the case, please provide an example I can take a look at

Looking good. Exceedingly well done by the looks of it. You guys are revolutionizing the forum world with Invision Community 5. Hats off to you. 

I like it so far. The dynamic theme editor looks extremely cool, I particularly like the ability to move header/nav blocks around ad hoc.
Random Q: will there be an option for sticky header/navbar in V5 out of the box? Not a gamechanger, I'm happy to use CSS to do it myself, but I'm just curious because the ballache I have with doing that in V4 is in accounting for all the anchor links (making sure content doesn't sit behind the sticky header when they jump to content/next page). Figure that sort of thing would be better accounted for if designed in-house. 😄
I really like the 'Helpful' button there as well, very 'Reddit' - and it doesn't take away (read: sit included within) the existing Reactions feature as I hoped. Very promising so far!
Can't wait to see more!

Very nice feature with being able to position the logo and nav bar. 
Thanks for sharing a peek!

I like this teaser, looking forward to discovering this new modern forum view and the theme editor seems awesome

Definitely. The CSS framework has been rebuilt, and light/dark mode is at the core - it's not an afterthought.

Then, we are in very excellent hands in this situation. We are really fortunate to have him on board since he truly is one of the greatest. 🙂 

In @Ehren we trust.

Thanks, this seems to be a rendering issue with Firefox and semi-transparent gradients. At the time, it was the only way to blend currentColor with a semi-transparent version of the background color.
This can now be done with color-mix. If you'd like to update it on your site, adding this to custom.css should do the trick:
@supports (color: color-mix(in srgb, red, blue)){ .ipsBadge{ background: var(--badge--background, color-mix(in srgb, currentColor 10%, rgba( var(--theme-area_background_reset), 1 ))); } }  

Thanks, this seems to be a rendering issue with Firefox and semi-transparent gradients. At the time, it was the only way to blend currentColor with a semi-transparent version of the background color.
This can now be done with color-mix. If you'd like to update it on your site, adding this to custom.css should do the trick:
@supports (color: color-mix(in srgb, red, blue)){ .ipsBadge{ background: var(--badge--background, color-mix(in srgb, currentColor 10%, rgba( var(--theme-area_background_reset), 1 ))); } }  

Thanks, this seems to be a rendering issue with Firefox and semi-transparent gradients. At the time, it was the only way to blend currentColor with a semi-transparent version of the background color.
This can now be done with color-mix. If you'd like to update it on your site, adding this to custom.css should do the trick:
@supports (color: color-mix(in srgb, red, blue)){ .ipsBadge{ background: var(--badge--background, color-mix(in srgb, currentColor 10%, rgba( var(--theme-area_background_reset), 1 ))); } }  

99+1%

Thanks for your feedback @Ibai. The next major version of Invision Community will be focusing on performance improvements such as this (adding width/height attributes, using native lazy loading, etc). We don't have any information to share yet, but things like this will be implemented by default in the future 🙂
 
The width and height tags only support numerical values. Adding units will make them invalid. Instead, you should simply use width="24" height="24"

I will certainly get that pointed out to our designer to take a look at for future releases of the platform

Hello,
Adding this to custom.css should help. I've only tested it on an unmodified default theme, but it may also work on some 3rd party themes depending on their HTML markup.
/* Ensure widgets are shown below the main content on mobiles */ @media (max-width: 979px){ #ipsLayout_contentWrapper{ display: grid; } #ipsLayout_sidebar{ order: 1; } }  

Hello,
Adding this to custom.css should help. I've only tested it on an unmodified default theme, but it may also work on some 3rd party themes depending on their HTML markup.
/* Ensure widgets are shown below the main content on mobiles */ @media (max-width: 979px){ #ipsLayout_contentWrapper{ display: grid; } #ipsLayout_sidebar{ order: 1; } }  

Hello,
Adding this to custom.css should help. I've only tested it on an unmodified default theme, but it may also work on some 3rd party themes depending on their HTML markup.
/* Ensure widgets are shown below the main content on mobiles */ @media (max-width: 979px){ #ipsLayout_contentWrapper{ display: grid; } #ipsLayout_sidebar{ order: 1; } }  

@Ehren you are the best. 👍

Some say his English is not his first language. Its CSS

Hello,
Adding this to custom.css should help. I've only tested it on an unmodified default theme, but it may also work on some 3rd party themes depending on their HTML markup.
/* Ensure widgets are shown below the main content on mobiles */ @media (max-width: 979px){ #ipsLayout_contentWrapper{ display: grid; } #ipsLayout_sidebar{ order: 1; } }