jaeitee

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.

We were recently asked if it's possible to color code tags - the customer in question used tags as statuses on topics, and so wanted 'resolved' to be green, and so on. Despite being a great idea, this isn't something that is currently possible 'out of the box' - although we'll add it to our internal feature idea list to follow up on later!
But just because it isn't built in, that doesn't mean it isn't possible! In fact, with a little CSS, this is quite easy to achieve now.
 
Writing a CSS selector
We can do this by writing a CSS selector that matches the tag URL for the tag we want to style - a handy way to use CSS that can be applied to lots of other ideas within the suite!
Lets say we have a tag called 'resolved', and we want to make it green. Add the following CSS to your custom.css file:
.ipsTags a[href*="/tags/resolved/"] { background: SeaGreen; } html[dir="ltr"] .ipsTags a[href*="/tags/resolved/"]:before { border-color: transparent SeaGreen transparent transparent; } The first style is the main part of the tag element; the second matches the :before pseudo-selector which we use to make the 'point' of the tag.
Another tag we'll style is called 'needs help'. In this case, there's spaces in the name, which are represented by the + symbol in the URL (since it's URL-encoded). We'll make it purple this time:
.ipsTags a[href*="/tags/needs+help/"] { background: Purple; } html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before { border-color: transparent Purple transparent transparent; }  
 
Supporting prefixes
This little CSS snippet won't change prefixes, however - they'll still be shown in the default color (specified by your theme settings). If you want to change prefixes too, you need to adjust the CSS as follows - replace the previous CSS with this version:
.ipsTags a[href*="/tags/needs+help/"], a.ipsTag_prefix[href*="?tags=needs+help"] { background: Purple; } html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before, html[dir="ltr"] a.ipsTag_prefix[href*="?tags=needs+help"]:before { border-color: transparent Purple transparent transparent; } (Note: Notice the slightly different string we're matching in the href attribute; once you upgrade to 4.1.14, this won't be necessary - both selectors can use the same href format, e.g. /tags/needs+help/. Prior to 4.1.14, tags and prefixes used slightly different URL formats.)
That's it - now everything looks correct!
 

Topic View
 
 

Forum View
 

An enterprise customer recently asked us how to have a different feed block for each of their forums. Their goal was to have each forum show a 'popular topics' block containing topics only from that particular forum. Unfortunately this isn't possible using the standard block manager right now, since each view is treated as one configuration. That means that any blocks added to forum view will show for all forums.
However, as usual in IPS4, some of the more advanced power under the hood does allow you to achieve the same goal - in this case, by using HTML Logic. This technique uses a similar idea to the one I outlined in the Dynamic-ish Forum Feeds blog in May.
 
Creating conditional blocks
The way we would implement this functionality is by creating a custom block that is simply a wrapper for other blocks. This wrapper block will contain HTML Logic that determines which feed block to show, based on some information about the current page.
The first step would be to create standard feed blocks for each of the forums to which this should apply. In our example we're creating 'popular topics' blocks, but it could be anything you wish - the principle will remain the same. Another idea would be to create a 'Topics from other forums' block for each of your forums, whereby in the block configuration, you set it to include topics from all forums except the one in which it will be displayed - a good way of cross-promoting your topics.
In order to include the blocks later, set the template key of each to be forum_x, where x is the ID of the forum in which you will display the block.
 
Once we've created a block for each forum, the next step is to create our wrapper block, which should be a custom block set to use Manual HTML, with the following code:
{{if request.app == 'forums' && request.module == 'forums'}} {{$id = \IPS\Request::i()->id;}} {block="forum_{$id}"} {{endif}} What's happening here is we're checking the app and module from the page URL are both 'forums', which indicates we're in forum view. We then use the {block} tag to insert the appropriate block based on the ID parameter from the URL.
To use this block, simply save it, then using the Block Manager on the front-end, drag it into the desired location in your forum view.
I hope this quick suggestion gives you some ideas for other ways to create blocks that show contextually depending on what the user is viewing. If you have ideas for interesting ways to use this technique, share them in the comments!