Advanced custom portal design

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 Email 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.

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 whose settings you wish to edit.

  • From Ideas → Overview, click the Pencil icon by the name of the ideas portal whose settings you wish to edit.

Once you have your portal settings open, navigate to Branding → Advanced 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 → Advanced. 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.

    Note: Using any custom CSS will disable your theme color if you have one selected. 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 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.

CSS examples

Use the Add CSS field for these example customizations.

Customization

Custom CSS

Change your portal background to plain white

body {
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;
}

Change the vote indication color

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

Change the idea list filter hover cover

.filters .filter:hover {
background: yellow;
}

Remove the vote tally
Note: The second half of this code hides the "X votes" tab on individual records.

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

Remove the My votes filter

a.filter[data-url-param-toggle-name="my_votes"] {
display: none;
}

Change the text color

.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;
}

Top

JavaScript with CSS Example

Use the Add CSS and Add JavaScript fields for these examples.

Note: Do not use opening and closing <script→ tags.

Customization

Custom Javascript and CSS

Add an image to the left of the page

JavaScript:

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

CSS:

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

Top

JavaScript Example

Use the Add JavaScript field for this example.

Note: 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?");
$("#ideas_idea_name").attr("placeholder", "One sentence summary of the issue");
$("input[type=submit]").val("Send Issue");

Top

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 Email 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"→
Idea "$IDEA_NAME" has changed status to: $STATUS
</h3→

<div class='user-content' style="color: dimgray; font-family: Arial; font-size:12px; text-align: left"→
$IDEA_DESCRIPTION
</div→

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→

Top

Strategic roadmaps
    Integrations
    Announcements

    The worldʼs #1 roadmap software

    Not ready? Join a demo
    © 2020 Aha! Labs Inc.All rights reserved