Ehren

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!

View full blog entry

Thanks for the feedback everyone!
Thanks mate! Third party designers will be able to release themes which take advantage of all of these features, which almost makes "premade themes" much closer to "custom themes". If you find a theme for sale, but the header positions aren't quite right for example, you'll be able to customize it without asking the designer for custom changes. Win win for both the designer and the customer!
 
The web developer tools built into your browser are likely the best solution here. I'll write up documentation for all of the new components (grid, buttons, etc), but as for the custom CSS editor, there are no plans at this stage to expand it beyond a regular code editor.
 
Yeah, the swatches will come in really handy. It's a much easier system instead of manually trying to allocate light/dark shades manually.
The header background in the intro was added via Custom CSS. I've been thinking of the best way to add an image feature for the header, but making a simple UI for something like that is ironically a very complex task since you also need to cater for the multiple header/nav bars as you mentioned. It's very simple to add using CSS, so at least there's a simple fallback if nothing else comes to mind before the release date 🙂
There are no plans for gradients, but since you seem pretty confident with CSS, you'll have no problems adding them using the code editor 🙂
 
Thanks David!
There certainly is. Snippets are truncated to a maximum of 680 characters for memory - but you can trim that down using CSS line-clamp. One line of CSS can do that for you. 👍

Thanks for the feedback everyone!
Thanks mate! Third party designers will be able to release themes which take advantage of all of these features, which almost makes "premade themes" much closer to "custom themes". If you find a theme for sale, but the header positions aren't quite right for example, you'll be able to customize it without asking the designer for custom changes. Win win for both the designer and the customer!
 
The web developer tools built into your browser are likely the best solution here. I'll write up documentation for all of the new components (grid, buttons, etc), but as for the custom CSS editor, there are no plans at this stage to expand it beyond a regular code editor.
 
Yeah, the swatches will come in really handy. It's a much easier system instead of manually trying to allocate light/dark shades manually.
The header background in the intro was added via Custom CSS. I've been thinking of the best way to add an image feature for the header, but making a simple UI for something like that is ironically a very complex task since you also need to cater for the multiple header/nav bars as you mentioned. It's very simple to add using CSS, so at least there's a simple fallback if nothing else comes to mind before the release date 🙂
There are no plans for gradients, but since you seem pretty confident with CSS, you'll have no problems adding them using the code editor 🙂
 
Thanks David!
There certainly is. Snippets are truncated to a maximum of 680 characters for memory - but you can trim that down using CSS line-clamp. One line of CSS can do that for you. 👍

Every IPS client at launch of v5 immediately changing all of their color schemes just to play with the theme editor.  
Nice job with the theme editor controls.  There are so many options to customize the theme.  
I'm personally most excited about mobile views and header controls to control the placement of logos, menus, and breadcrumbs.  Menus and above the fold placement is especially important for a mobile world, and we need to be judicious with how space is allocated.  

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!

View full blog entry

Thanks for the feedback everyone!
Thanks mate! Third party designers will be able to release themes which take advantage of all of these features, which almost makes "premade themes" much closer to "custom themes". If you find a theme for sale, but the header positions aren't quite right for example, you'll be able to customize it without asking the designer for custom changes. Win win for both the designer and the customer!
 
The web developer tools built into your browser are likely the best solution here. I'll write up documentation for all of the new components (grid, buttons, etc), but as for the custom CSS editor, there are no plans at this stage to expand it beyond a regular code editor.
 
Yeah, the swatches will come in really handy. It's a much easier system instead of manually trying to allocate light/dark shades manually.
The header background in the intro was added via Custom CSS. I've been thinking of the best way to add an image feature for the header, but making a simple UI for something like that is ironically a very complex task since you also need to cater for the multiple header/nav bars as you mentioned. It's very simple to add using CSS, so at least there's a simple fallback if nothing else comes to mind before the release date 🙂
There are no plans for gradients, but since you seem pretty confident with CSS, you'll have no problems adding them using the code editor 🙂
 
Thanks David!
There certainly is. Snippets are truncated to a maximum of 680 characters for memory - but you can trim that down using CSS line-clamp. One line of CSS can do that for you. 👍

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!

View full blog entry

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!

View full blog entry

This is remarkable. 
Will there be a way to adjust the length of the snippets? I like the idea, but I wouldn't want them to be too long. Trying to strike a balance between enough content visible to get people interested in the conversation, but not too much so that they still have to open the topic to read more. 
I was going to watch a Netflix movie but I think I'll watch that video 6 times in a row instead. 😍
@Ehren for the win!! 

This is hot hot hot!
I assume there will be a process to save and import/export themes still?

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!

View full blog entry

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!

View full blog entry

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!

View full blog entry

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!

View full blog entry

Insane! I love it!

🤯 🤯 🤯
I thought this was going to be something along the lines of Wordpress' theme editor (which is okay, but... I really did have to hack a lot of CSS in there when I was using it), something nice for newbies to play around with... but after watching that video I think it honestly touches 99% of all the colour scheme-related theme tweaks I've ever needed to work with! What an amazing feature! Fantastic work Ehren and team!
I've made some 17 colour variants of the same core custom theme on my community (+ dynamic dark modes for each), and although I took advantage of loads of CSS tricks (variables out the wazoo) it was a significant amount of effort - I can imagine that time being cut down so dramatically with this Theme Editor. Even the content box colours, wtf. 😄 The swatches are a really really nice touch as well, thank you for that thoughtful inclusion!
The only thing I didn't see that was teased in the intro was the use of background image in the header... I wonder how that works (will there be opacity options so that any image you add doesn't complicate the nav links etc)..? 
Also, is there scope in a future release/update to support gradients for some of the colour options? I tend to use gradients for the content box headers rather than block colours, but if not it's definitely something I can just work in using the Custom CSS as I have been doing before.
I love it, I love this. Great stuff! 👏
PS. I had a feeling this was going to be a good update when it didn't arrive on Wednesday like the last two blogs! 😆
EDIT: 
I second this! One of the biggest issues in custom theming V4 is the lack of documentation/guides on what existing structural properties exist in the codebase... meaning that I ended up adding custom CSS to achieve things (like grids etc) that most likely already exist out of the box. I just know that, for as much as I've tried my best, there are elements of my custom code which is just wasteful because of it.

As I was just reading your blog on Theme Tools and the part where you said "the short version is that the CSS framework has been completely rewritten from scratch with a new approach to how CSS classes interact with page elements.", I was wondering this exact thing.  I'll have to wait to see the deeper level details of the CSS framework to better understand once they become available!  Thanks Matt!

Absolutely amazing work.👍

When Ehren talks about the new CSS structure, you'll see how it all goes together. The new CSS framework is remarkable.

It's truly amazing to see how easy the theme editor is. The amount of possibilities are really endless. And that will definitely be fun to see various communities making their own version. Having a 3rd party theme designer create something like this custom for you is worth alone thousands of dollars. This version takes your community to a whole new level. I don't think people can really comprehend how much work goes into this.
Brilliant work team, well done. Couldn't be more excited to see more!

Wow!  This is honestly, in a word...incredible!  Exceptionally well done @Ehren, feature rich and superb UX!
One of the biggest enhancements I can see being added is some level of quick linking or hover effect to expose the available CSS properties for a given component (button, header, etc) within the theme editor.  In your example, maybe when you hover the button you converted to upper case, fill the CSS editor box with the available properties or maybe a modal showing the documentation of available properties.   That is one of the biggest hurdles I have with theme editing, in that I often have to find examples of what I want to do in the suite or come up with my own CSS properties to achieve the effect (potentially adding unnecessary code vs reusing what may be available but is unknown).
Overall this has truly elevated the ability for site owners to control their themes in a magnificent way, seriously raising the bar of what this suite offers to a new level!  Very well done! 👍

This is absolutely next level. well done IPS 👏
Great job @Ehren

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!

View full blog entry

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!

View full blog entry

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!

View full blog entry