Ehren

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Just six short weeks ago, Ehren hit record on a video that changed everything for Invision Community.
The blog was called "Introducing a fresh new vision for Invision Community 5," and it ripped up the rule book on what forums should look like and revealed a slick new look featuring a new forum home feed view and sidebar navigation.
A lot has been discussed, but we're not even close to done!
Before we bring you news of more features after Thanksgiving, I wanted to take a mid-season break to recap what we've seen so far.
First up was the introduction video, which gave a broad overview of the new UI Invision Community 5 would be sporting. Ehren takes us through many new elements, including the sidebar navigation, forum feed view, simplified post view and more.
 
 
Up next was a focus on dark mode, accessibility and mobile views. Invision Community 5 features the ability to have native dark mode without additional themes or complex variables to set up. Our aim with Invision Community 5 is to hide the complexities and technology and just let you focus on creating a great community experience for your audience.
 
 
Bringing complex theming to everyone was the message in the blog talking about the new theme editor. Now, you can make wide-ranging changes to your theme without the need to edit CSS or manage HTML templates, all driven by a smart and simple interface.
 
 
Next, it was my turn to talk about a new feature. I introduced two new features designed to help those who run support-based communities. Finding the most helpful answers and identifying community experts help your members do more with less time and frustration.
 
 
Last week, Ehren demonstrated our new icon and badge builder, which is an amazingly powerful tool to produce slick and professional badges along with the ability to customize your community further with emojis and icons for menus, reactions and more. Building ways to reduce the barrier to customization has been a strong theme for Invision Community 5.
 
 
Phew!
We can all agree that we've showcased a lot of impressive functionality coming with Invision Community 5 already.
But what does the future hold?
Lots! We have a lot of new functionality that we're putting the finishing touches on, and we can't wait to show you more. These new features further help to reduce noise in topics, make the community feel alive and bring long-needed updates to core components such as the editor. Not to mention, there is a significant update to Pages underway.
We also have a lot of less flashy updates, such as the new consolidated Feature/Our Picks feature, which is now a single feature.
 
Feature-window.mp4
 
An improved Moderators Control Panel brings a more uniform experience across deleted, hidden, and content waiting to be approved.
 

We're still on course for a release of Invision Community in early 2024 and can't wait for you to experience the future of forums.
What has been your favourite feature so far? I'd love to know; drop a comment below!

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!