Jump to content

Vakarian96

Clients
  • Posts

    105
  • Joined

  • Last visited

Reputation Activity

  1. Thanks
    Vakarian96 reacted to Ehren for a blog entry, Invision Community 5: The All New Theme Editor   
    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!
  2. Thanks
    Vakarian96 reacted to Matt for a blog entry, Introducing Community Hive   
    Everyone at Invision Community is pleased to introduce Community Hive.
    We are creating a new free-to-use service to help independent communities reach new audiences and re-engage existing members.
    Community Hive delivers updates from your favourite communities and helps you explore new ones by bringing all the communities you follow into a single feed with optional email updates.
    The Invision Community September 2023 release will bring Community Hive integration to Invision Community and we're also releasing integrations for XenForo, Squarespace and WordPress. More integrations for popular platforms are planned over the coming months.
     

     
    The "Why"
    We believe in the power of independent communities. Technology has changed over the two decades we've been building community tools and despite the advances in technology a key problem independent communities still have is re-engaging existing members and finding new audiences. Social media has diminishing returns, and search results continually down-rank user-generated content. Reaching new audiences has never been more challenging.
    Community Hive solves that by providing a single platform to showcase your content to new and existing audiences. We don't keep your content; the only way to engage is to visit your site, ensuring you retain complete control and ownership.
    Regular updates via email and push notifications reach your existing members wherever they are.
    As our attention spans shorten and our online time becomes more cluttered, checking in with each community becomes more of a struggle. Independent and forum based communities fight for attention with social media, and owned platforms like Discord and Slack. Allowing your members to follow your community with Community Hive gives you increased visibility and discoverability and helps level the playing field.
     
    The Platform
    Community Hive has a familiar feed view with two main areas. "Following" shows a feed of communities you already follow to ensure you see more of what you like. This feed learns over time what content you favour and ensures you see more of what you like.
    The "Discover" tab shows you a feed of content from communities outside of your following list, which is a great way to discover new online communities to join. Following is easy; you don't even need to register on the community to add it to your followed list on Community Hive.
    Robust account management makes it easy to unfollow communities and set your desired audience classification preferences.
    Community Hive is mobile-first with push notifications and is ready to be added to your phone's home screen as an app.
     
    Integration
    Community Hive will launch with integration for several platforms such as XenForo, Squarespace and WordPress. Invision Community integration has several tools to nudge your members to add your community to Community Hive with buttons in key follow areas.

    Following from a community only requests your email address. You can optionally set a password later on Community Hive to enable your feed to be viewed on multiple devices.

    Clicking "Follow on Community Hive" from an Invision Community when you have an account with that community.

    Clicking "Follow on Community Hive" from an Invision Community when you do not have an account with that community.
    Community Hive will be launched in beta alongside Invision Community's September 2023 release, with integrations released for other platforms.
    You can visit Community Hive now and join in the discussion on the Community Hive forums. We look forward to seeing you there!
×
×
  • Create New...