The Branding tab of your ideas portal settings gives you several options for customizing the look and feel of your ideas portal, including a custom theme color, and the ability to upload a custom logo and favicon. Likewise, the Emails tab of your ideas portal settings gives you several options for customizing the look and feel of the emails your ideas portal sends to your users.
In addition to the aesthetics of your portal, Ideas Advanced customers can also enable multiple languages and create their own custom portal domain to better match their brand.
However, you might want to customize your portal and your portal's emails further. For that, you can access advanced settings in your ideas portal settings. You will need to be an administrator with customization permissions to do either.
To do this, open your ideas portal settings by navigating to either Settings ⚙️→ Account → Ideas portals or Ideas → Overview.
From your account settings, click the name of the ideas portal you wish to edit.
From Ideas → Overview, click the pencil icon by the name of the ideas portal you wish to edit.
Once you have your portal settings open, navigate to Branding → Custom to customize your portal, and navigate to Emails → Templates to customize your portal emails.
Click any of the following links to skip ahead:
Customize your portal
From your portal settings, navigate to Branding → Custom. Here, you can add a custom domain for your portal, choose whether your portal should be an Embedded iframe or not, and add Custom code.
-
Add CSS: Insert CSS to customize your portal.
To see the theme color CSS used in your portal, click Show theme color CSS. You can copy this code into the Add CSS field and modify it to your needs.
Add header HTML: Insert HTML to replace the default header. This will appear at the top of every page in your portal.
Add footer HTML: Insert HTML to replace the default footer. This will appear at the bottom of every page in your portal.
Add Javascript: Insert JavaScript to customize your portal.
We have gathered example customizations for you to try in the following sections. Once you click out of one of the Custom code fields, your changes will be saved and your code will be applied to your portal.
The ideas portal may have updates in the future which are not compatible with some custom code. This may require an update to your customizations.
CSS examples
You can use the theme Color selection (Branding → General → Color) in conjunction with Custom CSS. In the classic design, adding custom CSS would override any theme color you had selected.
The Theme color CSS link beneath Custom CSS (Branding → Custom → Code) will suggest a few more accent colors for you, which you can then adjust or remove.
If your portal uses the new (October 2020) ideas portal design, use the Add CSS field for these example customizations.
Customization |
Custom CSS |
Expand the ideas portal footer to the full page width |
@media (min-width: 670px) { body .column-with-sidebar { grid-template-rows: 1fr auto; } body .column-with-sidebar__sidebar { grid-row-start: 1; grid-row-end: 2; -ms-grid-row: 1; -ms-grid-row-span: 1; } body .column-with-sidebar__column { -ms-grid-row: 1; -ms-grid-row-span: 1; } body .column-with-sidebar .main-footer { grid-column-start: 1; grid-column-end: 5; -ms-grid-column: 1; -ms-grid-column-span: 2; -ms-grid-row: 3; } .column-with-sidebar--padded .main-footer { margin-left: 0; -ms-grid-row: 3; } .single-column--footer { width: 100%; } }body .column-with-sidebar.column-with-sidebar--padded .main-footer { margin-left: 0; margin-right: 0; } |
Change your portal background to plain white |
body.ideas-portal { background-color: white; } section { border: none; box-shadow: none; } |
Change the colors of the Share idea button |
.btn-primary { background-color: red; } .btn-primary:hover { background-color: darkred; } .btn.btn-primary { background-color: red; } .btn.btn-primary:hover { background-color: darkred; } |
Change the idea list filter hover color |
.filters .filter:hover { background: yellow; } |
Remove the vote tally. |
.idea-endorsement {display: none; } |
Remove the My votes filter |
a.filter[href*="my_votes"] { display: none; } |
If your portal uses the classic ideas portal design, use the Add CSS field for these example customizations.
Customization |
Custom CSS |
Change your portal background to plain white |
body { |
Change the colors of the Share idea button |
.btn-primary { |
Change the vote indication color |
.btn-vote.voted .vote-count { |
Change the idea list filter hover cover |
.filters .filter:hover { |
Remove the vote tally. |
.idea-endorsement { |
Remove the My votes filter |
a.filter[href*="my_votes"] { display: none; } |
Change the text color |
.portal-sidebar .filter.active { |
JavaScript with CSS example
This example applies to both the Classic and the new (October 2020) ideas portal design. If you have a favorite customization for the new design, share it with us!
Use the Add CSS and Add JavaScript fields for these examples. Do not use opening and closing <script> tags.
Customization |
Custom Javascript and CSS |
Add an image to the left of the page |
JavaScript: $("body").prepend('<img class="fred-image" src="https://secure.aha.io/assets/fred_reading.png" />'); CSS: .fred-image { |
JavaScript example
This example applies to both the Classic and the new (October 2020) ideas portal design. If you have a favorite customization for the new design, share it with us!
Use the Add JavaScript field for this example. Do not use opening and closing <script> tags.
Customization |
Custom JavaScript |
Change the prompts on the ideas form |
$("label[for=ideas_idea_name]").text("What is your issue?"); |
Add a question mark and tooltip to an ideas portal explaining the pinned ideas section |
$('.pinned-ideas h1').append('<i class="fa-regular fa-circle-question" title="Your message here"></i>'); |
Customize your portal's email notifications
Navigate to Settings ⚙️→ Account → Configure ideas portals. Hover over the portal you wish to customize, click Edit, then click on the Emails branding tab.
To style the emails sent from your portal, you can select an Accent color and scroll to the bottom of the page to customize the email contents.
A few notes on custom styling:
You can style email template text using tags or inline CSS. Customizations should be wrapped in <p> paragraphs for proper spacing.
Email bodies allow for standard HTML block elements like lists (<ul>) and headings (<h1> to <h6>).
Inline HTML tags are allowed, like <b>Bold</b>, <i>Italic</i>, and Hard line break <br>.
Examples
Customization |
Template |
Custom CSS |
Reformat the email body |
All |
<h3 style="color: teal; font-family: Arial; text-align: left"> <div class='user-content' style="color: dimgray; font-family: Arial; font-size:12px; text-align: left"> |
Change the Invitation email button and button text color. |
Invitation |
<btn style="background-color:teal; color:white; font-family: Arial">Join Now</btn> |
Change the Invitation email Greeting color and font |
Invitation |
<span style="color: teal; font-family: Arial">You have been invited</span> |
Switch a classic portal to the new design
In October 2020, we updated the default ideas portal design. If you created an ideas portal with advanced customizations and have not switched to the new design yet, you may want to make sure that your customizations will appear correctly in the new design.
To do this, create a new ideas portal and apply your customizations there. This way, you can experiment without affecting your current ideas portals users. You will likely need to adjust any custom CSS, HTML, and JavaScript you applied to the old design.
Once your test portal looks perfect, apply those same customizations to your real portal. Then enable the new portal design by navigating to Branding → Custom → Design and unchecking the box beside Classic.
If you already have a portal that uses the classic design, you may want new portals you create to match. Any new portals you create will default to the new design. However, you will have the option to switch the portal to the classic design by navigating to Branding → Custom → Design and checking the box beside Classic.