Welcome, Guest Login

Support Center

IdeaScale Guide to Community Custom Layout

Last Updated: Oct 11, 2017 11:57AM PDT

IdeaScale Community Custom Options

IdeaScale aims to provide an easy and fast way to adapt to your corporate identity and offers a productized way to do this. This will explains the layout options for your new IdeaScale community’s custom landing page, and the inner community pages. We’ve provided you with a number of options for quickly and beautifully representing your brand, while simultaneously ensuring code maintainability and mobile-responsiveness across diverse screen sizes. 

General Custom Layout guidelines and tips:

Note About Images and Responsiveness: Designing a web page that can adjust to vastly different screen-size configurations and browsers is a notoriously challenging task. We’ve spent a lot of time studying and implementing the most modern best-practices in web design to ensure that your images display well across multiple platforms. While most images in your content will render just fine, some mobile-responsive widgets contain user inputted images. In these cases, it’s important to understand best practices for incorporating images into designs that can vary in dimensions.


You will notice, for example, that many of the pre-selected banner choices in the admin panel are abstract designs, because the banner image needs to hold up under a number of screen size conditions.

The rule of thumb for selecting elements for responsive views is to test for the “flexibility” of the image. By “flexibility” we mean a measure of how well your image conveys its meaning effectively even if cropped slightly or resized into a different configuration. The opposite of fluidity is brittleness: a brittle image needs to be rendered at precise dimensions to convey its intended message. Abstract designs or patterns work well in responsive web design because they can convey the essence of your theme or brand without being held hostage to an exact pixel width and height. IdeaScale already encourages this sort of design pattern in the admin panel under banner selections: You will notice, for example, that many of the pre-selected banner choices in the admin panel are abstract designs, because the banner image needs to hold up under a number of screen size conditions.

Here’s a head-to-head comparison of a brittle versus a fluid image, both used as a slide background in the responsive carousel page element:

Left: “Brittle” image – man on the beach
 with child. Right: “Flexible” image – stone pattern. We will use the two images above in sample implementations, below:

Both images work on the full-size, desktop layout

In a transitional moment to a smaller screen, however, notice that in the beach scene, the figure moves outside the frame, while the stones still maintain their original semantic integrity.


And on the mobile view, the discrepancy is even more apparent. The responsive view is forced to reduce the size of the image, and ends up cropping the figure altogether. The stone image, while cropping significant portion of the image to accommodate the smaller screen, continues to maintain its semantic integrity.

Limits of Design and Exceptionally Long Text Strings: While we’ve done our best to account for all possible inputs and filter where necessary, in rare cases, on certain browsers and configurations, exceptionally long words or urls in user-submitted content can disrupt the layout of certain landing page widgets. Therefore, we recommend against including urls or exceptionally long words in the titles of campaigns or ideas. Some widgets are designed to handle larger text inputs; for these special cases, consider a larger layout such as the “horizontal campaign widget” which provides more room for text (see below).

Font: In addition to being a security issue, custom fonts are also one of the largest contributors to page load time. Furthermore, many CSS rules for custom fonts are not standardized across all platforms yet, making it difficult to ensure a consistent viewing standard for all users, independent of their screen configuration. For these reasons, at this time, we do not support custom fonts.

You can communicate your landing page and color preferences to your account manager using the Custom Landing Page Feature Request Form. Please ask your IA for more information.

Sample Communities

Here are some sample communities you may view, to get an idea of what is possible for you to create with the options outlined here:

Phoney Phones Inc: https://cv2test.ideascale.com/

Capital City: http://capitalcity.ideascale.com/


Quick Image Size Reference


Images Pixels
Hero / Slider Image  1130 x 500
Community Banner 1130 x 150
Community Logo 96 x 96
Campaign Banner 690 x 500
Email Banner 650 pixels wide

When you set up your community, you’ll have to upload images. Here’s a quick reference about optimal sizes of the various images:

Hero/Slider Image: Recommended Size (pixels) is 1130 x 500

Campaign Banner/Logo: At least 690 x 500, and should contrast well against white text


Community Banner: Recommended Size (pixels) is 1130 x 150


Representing your brand is simple.

You may choose three colors:

  • Highlight color: this color is used to call out specific action items in the community and should also contrast well with white.
  • Accent color 1: Should be more muted than the highlight and contrast well with white.
  • Accent color 2: we recommend a slightly lighter version of the first accent color that contrasts well with white.


You can communicate your color choices to your account manager using the Custom Landing Page Feature Request Form. Please ask your IA for more information.

Landing Page Options

Hero/Carousel: The hero or carousel is the first item on the custom landing page. You may choose up to five slide images and associated header, text and buttons for the hero.
If you don’t want the carousel functionality, you may choose a single image and a frozen slide or simple “hero” image and associated title text and buttons.

Ways to set up Hero/Carousel: For each carousel slide, you may choose any combination of the following:        

  • One title item, up to 25 characters (including spaces)
  • One description paragraph, up to 250 characters (including spaces).
  • Up to two action buttons    In addition to choosing a responsive image, consider a 1130 x 500 pixel image that is not so busy or bright that it will make any text you choose to place on your slide illegible.


Welcome Area: Greet your users with this widget which displays the logged in username.

You can customize the line of text under the username.

Active Campaigns: If you’ve added campaign logos to your campaigns, then you might try this layout, which smartly displays the campaign title over a campaign logo. We recommend a darker, quiet campaign logo. Also, keep in mind that the image has to hold up against different responsive views. The campaign title is limited to 100 characters (including spaces), and the campaign description is limited to 360 characters of html-sanitized text, (including spaces).

You can set the logo for each campaign in the campaign setup. Recommended size: 690 x 500px.

General Text Area: White text on your first accent color.


You can select the text you’d like to appear here.

Pinned Ideas: A fun layout for pinned ideas that you wish to showcase.

Callout Ideas: Another fun way to display ideas and increase engagement and highlight active users. Title limited to 35 characters (including spaces), and description to 120 characters (including spaces).


Discussion Tags: The tags widget uses a algorithm to create a word cloud of the most popular tags in your community. The boldest/largest/darkest words are the highest frequency tags, and the smallest/lightest words appear with least frequency. Clicking on a tag loads search results for for that tag on ideas in your community.

Video: A video on your first accent color

Please upload your video to YouTube for easy embedding

Footer: The footer provides four columns for you to provide categorized links

All of the links are customizable




Contact Us

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found