Advanced custom portal design

You can change the look of your ideas portal — and the look of the email notifications associated with it — using custom CSS and JavaScript in your portal settings. You will need to be an administrator with customization permissions to do either. 

To customize your portal design, navigate to Settings > Account > Configure portals. Hover over the portal you wish to customize, then click Edit.

  • If you want to customize the look of your portal, click on the Portal branding tab.
  • If you want to customize the look of your portal's email notifications, click on the Email branding tab. 

Click any of the following links to skip ahead: 

Customize your portal

Navigate to Settings > Account > Configure portals. Hover over the portal you wish to customize, click Edit, then click on the Portal branding tab.

Add your logo, custom header, and custom footer to ensure that the look and feel of your ideas portal is consistent with the rest of your web properties. Then use the Custom styling fields to tailor the look of your portal. You can add CSS, JavaScript, or a combination of the two. 

CSS examples

Use the Custom 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;
}
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 Custom CSS and Custom 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 Custom 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");
$("#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");

Top

Customize your portal's email notifications

Navigate to Settings > Account > Configure 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

 


Was this article helpful?
7 out of 14 found this helpful