Jump to content

4.5: Introducing our updated default theme

If you've been around Invision Community for a while, you'll know our frontend default theme hasn't significantly evolved since the early days of 4.0. Indeed, the last significant refresh came with 4.2.

With the upcoming release of 4.5, we wanted to revisit the default theme and give it a facelift for 2020, as well as make incremental improvements to the underlying codebase as a stepping stone to a bigger re-engineering in a future version.

In this entry, I want to talk a little about some of the design decisions that went into building the new theme.


Redesigning for the sake of it is never a good idea, so we first laid out what we wanted to achieve:

  • A brighter UI with more saturation & contrast and simpler overall color scheme
  • Improved typography
  • Better, more consistent, spacing around and between elements, especially on mobile
  • Better logical grouping of sections of each page
  • Reducing underutilized links/buttons on the page and finding alternative ways of making them available
  • Improving how post states are displayed
  • Modernizing and enhancing the underlying code that powers the default theme

Let's talk a little about each of these.


Brighter UI

The most obvious change will be that our default colors are brighter and more saturated than before. Before making any changes, we first created a color scale for both neutrals and the brand color (blue, of course). This gave us a flexible but consistent palette of colors to choose from, with appropriate contrast built in. Neutrals have a touch of blue too to avoid seeming washed out.

We've simplified the style, in particular reducing reliance on background colors to differentiate sections within cards (a card essentially being an ipsBox, for those who are familiar with our framework). Instead, we use spacing, borders and appropriate typography to achieve visual separation.


Brighter default colors



Simplifying the UI by removing block backgrounds


Improving typography

We've felt our typography has been somewhat muddled for some time - with a mixture of sizes, weights and colors used depending on the particular context.

The first step to improving it was to create a typography scale that we could refer to and implement, to ensure we remained consistent throughout the product.


Our typography scale

(The keen-eyed amongst you may also notice we've switched our default font to Inter. Inter is a fantastic open source font that is ideal for text on the web, and was recently added to the Google Web Fonts project making it super simple for us to incorporate it into our default theme.)

We've been much more deliberate about applying type styles, especially for titles, ensuring that they are always visually distinct from surrounding text. We've done this through both color and weight. As a result, pages should instinctively feel more organized and logical than before.


An example of improved typography, from the Downloads app


Improved spacing (especially on mobile)

We identified that spacing (padding and margins) needed some improvement. A lot of spacing values were arbitrary and inconsistent, leading to poor visual harmony across any given page.

Most troubling of all, on mobile sizes we simply halved desktop padding values. While this was a reasonable approach in the days of phones with small screens, it has felt decidedly dated for some time. Phone screens are now typically larger and able to accommodate roomier UIs without appearing comical.

In 4.5, we have done away with that approach, and the impact was immediate. Mobile sizes now get a much more pleasant interface, with elements having room to breathe. In addition, we've also made most cards full-width to provide additional breathing space for content.


Posts can finally breathe on mobile


There are numerous other tweaks across the product too: default spacing has been increased a little, data tables (e.g. topic listing) get extra vertical spacing, and spacing between elements has become more consistent.


Improved grouping of related elements

Prior to 4.5, most content areas existed inside cards. However, one notable exception to this was page headers and as a result, they could feel particularly disorganized, especially for users who had many controls in this part of the page (such as staff).

To solve this problem, we've developed a new, standardized design for content item page headers, giving them their own cards and consistent button placement.


Topic view header


Some areas don't necessarily fit into the same design pattern above. In those areas, we've tweaked styling to suit the context, while still adhering to our overall aesthetic.


Calendar header


Messenger conversation header


Reducing underutilized links/buttons

Finally, another area we identified as needing improvement is the abundance of tools, made up of links and buttons, across pages. Many of these are only used occasionally and so would be better moved out of the main view to simplify the page.

Two particular areas we focused on were share links and postbits (both forum posts and comments in other apps).

Research shows social share links are used by a vanishingly small percentage of users, so even though they were at the bottom of the page, it was unnecessary to make them so prominent (given their eye-catching colors). To solve this, we've added a share link to the page header, with the social network links themselves in a popup menu. The result is ideal: sharing functionality is unobtrusive but obvious.


Share links in content items

Comment areas have also suffered from 'button creep' over the years. A typical comment will contain a report link, a share link, a quote link and multiquote button, reactions, plus IP address, checkbox, edit and options links for certain users. That is a lot of visual noise around the important part: the content.

We've therefore simplified comment boxes as much as is reasonable. Reporting and sharing comments/posts is now available in the post options menu, as are any tools for the author/staff. Quoting and reacting are two primary interactions for users, so they of course retain their position in the control bar.


Simpler postbits, even for staff


Improving post states

Posts/comments in Invision Community can have many states - sometimes more than one. Posts can be hidden/unapproved, popular, recommended, solved (new in 4.5!) or highlighted because of the author's group. It's always been a challenge to indicate these statuses well.

In previous versions, we added a border but the most prominent indicator was a flag in the top-right corner of the post. This had three problems:

  • Due to the lack of space (thanks to report/share links), showing more than one flag was difficult.
  • Showing any flags on mobile was messy because of the space constraints.
  • The meaning of the flags was not obvious, especially to new users. Group-highlighted posts had no flag, just a border, which made them even more difficult to understand.

With the top-right corner of posts now tidied up and free from fluff, we were able to much more effectively use this space to indicate post statuses.

In 4.5, posts and comments will show badges when they have a particular status, as well as a more attractive semi-transparent border. For group-highlighted posts, we show the group name instead (the colors of this highlight are still controllable via theme settings).


A post with two states: group highlighted and popular

This works much better on mobile too, where the status badges get the prominence they deserve:


Mobile post statuses


Modernizing the underlying code

I wrote about the technical improvements behind the theme in a previous entry. If you're a theme designer or edit the theme for your own community, go and check it out now!


Wrapping up

As well as these large-scale concepts, you'll notice many other smaller enhancements as you start using the new theme.

I've shown some snippets of pages in the screenshots above, but I've included some full-page views below so you can see the overall aesthetic and how these pieces fit together.

Modernizing and refreshing our default theme has been needed for some time, but we view this as just a stepping stone to future work that will be reserved for a major version bump, and we're excited to figure out where we go next.



Topic View.jpg   Forum View.jpgCreate Topic.jpg

Desktop forum views (click to expand)


Topic View (mobile).jpg    Forum View (mobile).jpg

Mobile forum views (click to expand)


Activity Stream.jpg Messenger.jpg

Activity streams & messenger (click to expand)



Recommended Comments

3 hours ago, Cruizin said:

I like the spacing. Its cleaner and it may solve my forum's issues with google saying that elements are too close together, spacing issues. 

You should make your site user-friendly, not Google-friendly.


Edited by Takohashi
Link to comment
Share on other sites

Bravo team! 👏

It is a change more than welcome, but the change will be nicer if the team can do a redesign as well on the footer. It looks outdated.


  • dark mode on the default theme;
  • update the emojis (iOS version), the current emojis look too ugly;
  • focus on speed — the most important; 🚀

PS: Change the year of copyright on this site  be attention to the details.


Link to comment
Share on other sites

This is my favorite default design since the IPS4 beta days. This might be my favorite forums design of all time. Extremely modern and aesthetically pleasing. You've just kept me as an IPS customer with this update. While we haven't seen the new default forums view yet, are you able to add a blue color back for the forums headers, replacing the grey?

I recently upgraded from IPS4.1 to 4.4 and the 4.4 design is horrendous and on vBulletin 5 levels of awful. The 4.4 update pushed me toward XenForo. This new update seems to correct everything and surpasses any previous IPS4 design. Really impressive work on this

Edited by Stritix
Link to comment
Share on other sites

17 hours ago, Rikki said:

but there's no guarantee a community uses the highlighted group feature for staff only

No guarantee, but very likely.

A great addition, especially for support forums, would be an option to jump from staff post to staff post within a topic. And an icon on the forums list indicating that a staff member has posted in a topic.

Link to comment
Share on other sites

Glad to see my suggestions have once again yielded some awesome looking fruit. 🙂 Looks much better in terms of spacing! 

Things don't need to be jammed together, but too much white space just looks horrible. I think this is a great step in the right direction. A bit more tweaking with the spacing on widgets and little things here and there and it's gold! 

Keep the awesome surprises coming!

Link to comment
Share on other sites

"Quoting and reacting are two primary interactions for users, so they of course retain their position in the control bar."

As is reporting a post.

IMO there is enough hassle explaining to users how to do it now (basically hidden function; mouse over top right until you can actually see the link) but at least it's a one click operation, in the new theme, the drop down menu is at least prominent (although obscure to less techy people as a lot of our membership is) but turns it into a 2 click operation.

Personally would prefer it to be a simple link as per "Quote" link. 

Link to comment
Share on other sites

I find that there is no sense to cut the image (avatar) by highlighting the member's badge icon. Why is that?

The badge is additional practical but not essential information on the identity of the member. The member defines himself and is quickly recognized above all by his image and not his badge.

Thank you for this gamification option by the very practical badge, but see the place rather than cutting the image in half!

We say in the comment that there is plenty of white space, you have enough space then I think.

I think on the signature side, it would be very good.

Edited by annadaa
Link to comment
Share on other sites

On 5/2/2020 at 4:42 AM, annadaa said:

could you please improve the display of clubs and blogs?



Agree. We rent out Club space and the better it is the more customers we will have. 

Link to comment
Share on other sites

Stop everything, you are doing it wrong ! you are wasting your time !

All of the users of forums are on mobile now ! we need an android/ios app as soon as possible to keep the users on forums, if not, we are losing users, users will use Facebook app and Facebook groups !! 

Link to comment
Share on other sites

3 hours ago, MC3 said:

Stop everything, you are doing it wrong ! you are wasting your time !

All of the users of forums are on mobile now ! we need an android/ios app as soon as possible to keep the users on forums, if not, we are losing users, users will use Facebook app and Facebook groups !! 


Link to comment
Share on other sites


Just upgraded my production board to 4.5, every things is great but I can't find the "revert" option for dark theme ?

  • Adjusted Easy Mode theme editor to remove support for gradients and simplify the user interface. Added support for 'invert' to easily create dark themes.


Link to comment
Share on other sites

I wonder how many users they are loosing. 

I know of two communities that will not be renewing their subscription because this new update messes up their entire site.  I wish there were some help manuals on how to prepare your site or how to figure out exactly what the new upgrade is going to screw up.  I remember reading all of the information I could before trying to upgrade one of my communities and I did not see anything that I thought would be a problem but, half the stuff they were talking about was over my head anyway but I did try.

How many others are in the same boat as me?  I tried to update one of my communities and it was so messed up I had to have my server people do a complete restore twice to get the site back up.   I know there are a ton of people who could fix this but I can not.  The last time I let someone into one of my communities I spent the next six months chasing Malware and a coinhive thing.  

So I am pretty much screwed.  I am 60+ so, it's pretty much to late for me to learn all this stuff. 

I still cant figure out where all the cool programs went when the 4.0 came out.   The market place changed so much I can not use it ether.  Maybe the 4.0 changed so much that the number of programs that would work with it was reduced.  I waited nearly 2 years before I even upgraded to 4.0 because I was terrified because it was so different. 

Now comes 5.0.  So trying to figure out how to upgrade all my add on's is beyond me too.  There used to be a bunch of cool skins too but they seem to be all gamer skins now.

I love all the stuff the communities can do.  The support people have been super helpful and more than kind to me and my frustrated ignorance.  I enjoy running the two communities that I currently administrate but....  I am sorry to say this new 5.0 has taken me out of the game.

I do not even know if I will be able to use the help forums when my last subscription expires so "Thank you" to all whom have helped me over the years.

Jeff A Thompson.  HotAirBalloonist.com and TheSkiSkool.com

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...