Advanced custom portal design

The look of the idea portal can be customized using custom fields created in Aha!, CSS and Javascript. Depending on the level of customization you want, one or more may be necessary. To custom design and brand your portal, go to Settings -> Account -> Configure idea portals. Then edit the portal you wish to customize and click on the Portal Branding tab. 

Logo, Custom Header and Custom Footer

Add your Logo and custom header and footer ensure your ideas portal's look and feel is consistent with the rest of your web properties.  

CSS Examples

Additional changes can be made with CSS alone. Here are some examples:

1. Use a plain white background. Use the Custom CSS:

body {
  background-color: white;
}
section {
  border: none;
  box-shadow: none;
}

 

2. Change the color of the Share Idea button. Use the Custom CSS:

.btn-primary {
  background-color: red;
}
.btn-primary:hover {
  background-color: darkred;
}

3. Change the vote indication color on portal. Use the Custom CSS:

.btn-vote.voted .vote-count { 
color: yellow;
}
.btn-vote.voted .vote-status {
background-color: yellow;
}

4. Change the idea list filter hover color on portal. Use the Custom CSS:

.btn-vote.voted .vote-count { 
color: yellow;
}
.btn-vote.voted .vote-status {
background-color: yellow;
}

 

5. Remove vote tally on portal. Use the Custom CSS:

.idea-endorsement {
  display: none;
}
.idea-content .nav-tabs > li:nth-child(2) {
  display: none;
}

6. Change the text to match your company's color scheme (Before/After Example) 

A common use case for this level of customization is to match the Ideas portal body text to a key color in your company's logo or branding. For example, you wish to change the blue coloring of most text on the main page to a common color (for this example, green) in your company logo. Before editing, the page looks like below.

To change the color of the text, add Custom CSS:

.portal-sidebar .filter.active { 
background: green;
}
.filters .filter span {
color: green;
}
.filter {
color: green;
}
.btn-outline.btn-primary:hover, .btn-outline.btn-primary:active {
background-color: rgba(177, 232, 163, 0.33); # A lighter green color
}
.btn-outline.btn-primary {
border-color: green;
color: green;
}
.nav > li > a {
color: green;
}
.nav > li.active > a {
color: green;
}
.breadcrumb li:first-child a {
color: green;
}
.breadcrumb a {
color: green;
}

Once this custom CSS is saved, your Ideas portal will now look like below.

 

JavaScript with CSS Example

Additional changes can be made with JavaScript and CSS. Here is an example:

1. Add an image to the left of the page. Use Custom JavaScript:

$('section').prepend('<img class="fred-image" src="https://secure.aha.io/assets/fred_reading.png" />');

And Custom CSS:

.fred-image {
  position: absolute;
  left: -140px;
}

 

JavaScript Example

Additional changes can be made with JavaScript and CSS. Here is an example:

2. Change the prompts on the form. For example, if you want to collect information about bugs rather than ideas. Use Custom JavaScript:

$("label[for=ideas_idea_name]").text("What is your issue?");
$("#ideas_idea_name").attr("placeholder", "One sentence summary of the issue");
$("#ideas_idea_description_attributes_body").attr("placeholder", "More details of the issue. What are the steps to reproduce the problem?");
$("input[type=submit]").val("Send Issue");

 

Was this article helpful?
2 out of 7 found this helpful
Have more questions? Submit a request

Roadmap software to manage your products.
Finally, connect strategy to execution.

Powered by Zendesk