ossipetz

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

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

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

You may have noticed many of the Invision Community apps getting updates recently. Over the last several months we have revealed revamped Events, Gallery and Downloads apps and have listened to how you have been using them.
As a result, we are including some further app refinements as a direct result of that feedback.
Gallery
Many of you asked for more customisation options with the new overview page so 🎉 it is now possible to hide and show different sections of the overview using simple toggle settings without the need for theme edits. You can also adjust the number of items that show.

Searching for existing Gallery images to include in topics has been a feature of Invision Community for a while but previously search has been limited to the image name. Now, when searching for images via the "Insert other attachment" editor option, searching by album name returns images from that album.
Gallerysearch.mp4
Events
We added a similar improved overview to Events in the October release but for those of you with multiple Calendars you wanted a quicker way to subscribe to all events.
It is now possible to subscribe to all events from a prominent button in the header of the overview page. Members can subscribe to an iCal feed or download an export in just a couple of clicks.
 
Clubs
We also decided to use this release to add a couple of updates to clubs.
The popular “Mark solved” functionality is now available directly in your clubs with control over who can mark the item solved. You can allow the topic author to mark questions as solved or leave it to moderators only.
…and last but not least we added a contextual search tweak so that when members are viewing a club, the search filter defaults to “This Club”

We hope these small but useful improvements are popular in your communities and we look forward to hearing more of your feedback and requests.
Is there anything we missed? Let us know in the comments.
The features discussed in this announcement are available in both Invision Community and Invision Community Classic.

Humans are visual beings. Images attract our attention, can communicate ideas faster than the written word and can trigger meaningful discussions. At Invision Community we recognised this very early in the company history and have included a Gallery application for many years. During this time online communities have evolved substantially so we thought it was time to re-assess what it means to offer a community gallery and have some exciting developments to share.
Visual Refresh
The first thing we wanted to do was to give the look & feel a modern overhaul. @Ehren has done a fantastic job with modern design ideas. We took inspiration from the recent overhaul of the Events app and included a brand new Gallery overview page. This view better highlights featured and new images but also brings recent image comments in to focus to promote discussion.

Better Video Support
Video support has been included in Invision Community for a while but browser support has varied wildly. This often led to a poor experience where viewers were prompted to download plugins or forced to download the video in its entirety. Browser support for MP4 playback has moved on however and we have been able to update Gallery with some new functionality.
Frames from the video can be extracted for the preview thumbnail automatically. We have retained the option to upload a separate preview image however for people that want manual control over the image shown. Skipping ahead in videos is now also supported without the need to download the entire file or use plugins.
For communities that are able to leverage our cloud platform non MP4 videos will be automatically converted to support these features.
Searchable Image Contents
Another benefit for Cloud Communities is images can now be optionally analysed to make their contents searchable. For example, if an image of a tree or woodland scene is uploaded, this would previously only be searchable if the title or description of the image contained specific words or phrases. Now images can be identified solely by their visual contents.
NSFW (Not Safe For Work)
Invision Community contains tools to automatically moderate sensitive images to prevent them being posted. Some communities with more mature audiences may wish to allow these to be posted however but with some protection. We have therefore added the ability for images to be optionally set as NSFW when uploading. This will cause images to be blurred until the viewer opts in to viewing them.

Performance & Usability
Images by their nature can be slow to load (particularly on mobile connections) so we took some time and removed lots of redundant javascript and CSS. Where appropriate we have also added support for prefetching the next and previous images in an album or category and lazy loading is handled by the browser natively. We combined this with an improved image navigation experience using an image carousel when viewing individual images and removed the confusing Lightbox overlay. The Lightbox is now used solely for full screen image previews without the visual clutter of comment counts and other meta data.

These changes are the start of further Gallery improvements to come and as always we will continue to develop based on your feedback.
Let us know what you think in the comments.

To celebrate Invision Community turning 20-years-old (an eternity in Internet years), I interviewed the company's founding fathers.
Ahh the good ol' days. Remember simpler times?
This new video interview touches on Invision Community's past, present and future thanks to the invaluable insight from  @Charles, @Matt and @Lindy. 
 
In our chat together, these gentlemen...
 
Take a nostalgic trip down memory lane and reflect on the company's origins Explain the power of community amidst the social media boom Offer advice for new community leaders on how to grow Share some of the biggest changes to the platform Recant fond memories from the earlier days Reveal a teaser of what's next for Invision Community  
Noteworthy quotes:
Charles:
 
Lindy:
 
Matt:
 
Thoughts on the interview? We'd love to hear from you in the comments! 🎂 

Twenty years ago today, Invision Community was founded and within months the first version of Invision Community was released. Little did we know, this would be the start of a remarkable journey spanning several decades.
Our first version appeared shortly after we founded the company. It might be hard to imagine a time before social media and YouTube, but when we started out, the web looked very different.

The first version of Invision Community was called Invision Board, reflecting the popular term for forums back in the early 2000s. It was full featured and you may recognise some elements that persist today.
Like today, it even had a separate control panel where you could create new areas of discussion and customise the theme.

Twenty years is a long time and we've continued to adapt with the ever-changing needs of community managers. We've seen the rise of social media impact how people consume content and found ways to compliment Twitter and Facebook by offering a place for long-form permanent discussion.
Several elements remain from those early days but the concepts behind the theme have change significantly. New workflows, UI elements and views have helped the platform stay fresh and we've certainly innovated a few features that have since become industry standard over that time.
I can't express how proud I am of what we've built together. From those humble beginnings working until 2am to growing a creative and talented team around our passion for community.
I'm still as excited today as I was back in 2002. This year will see us build and release new tools to help guide and inform community managers. Our community platform continues to go from strength to strength.
Of course, the platform is only one part of Invision Community. Over the last twenty years I've been grateful to get to know many of you and watch your lives unfold.
This is as pure as community can get and I'm privileged to be part of it.

We have a few other surprises to celebrate our twentieth anniversary. We can't wait to share them!

I'd love to hear your memories of Invision Community! When did you first use our products and what was your community for? Please let me know in the comments below.

Emoji: built in to Invision Community 4.3! ?
Invision Community has a long history. We remember the early days of forums, back when graphical "emoticons" or "smilies" were added.
We have always shipped our products with a basic set of emoticons with the ability to add your own images and has supported emoji from mobile devices.
Emoji has become a standard across mobile and desktop devices so it made sense to bring them to Invision Community fully.
You can choose from 3 different styles of Emoji:
The native style provided by the user's operating system (if you choose this option, users on different platforms will see different styles) Twitter style EmojiOne style
Emoji Settings
Once you have chosen one of these options, all of the available Emoji will show in the emoticons selector when making a post. Unlike in older versions, the entire list is scrollable (the categories drop down will jump you to the category rather than filter), you can search, and standard Emoji features like skin tone modifiers are fully supported, and of course, you can make them as big as you like.

Navigating Emoji

Skin Tone Modifier

Make Emoji any size
 
Autocompleting Short Codes
In addition to using the selector, you can also use optionally enable standard :short_codes:. These will be autocompleted as you type.

Autocompleting Short Codes
You can also enable more conventional ASCII emoticons to be automatically replaced too:

ASCII Short Codes
 
Don't Worry: Custom Emoticons Aren't Going Anywhere!
You can use custom emoticons either instead of, or even alongside Emoji. If you give your custom emoticons a text replacement starting and ending with : they will even show in the autocompletion alongside Emoji.

Custom Emoticons
 
Technical Details 
Whichever style you choose, Emoji is stored in the database as the actual Unicode characters, so you can even change the setting and all Emoji, even those in existing posts, will immediately change.
If you choose to use the native style (so the Emoji will match the style provided by the operating system), the system will automatically detect which Emojis are supported and the selector will only try to show the ones the platform can render.