Custom CSS

In this article

Introduction

We offer some simple ways to change your feedback board’s appearance. In most cases, this is sufficient to match your product’s branding. However, you may want finer control over your board’s appearance because:

  • Your brand is known for its distinct design
  • You have strong ideas about exactly how your board should look
  • You feel a custom design would integrate the board better with the rest of your website

What you can override

You can use your own CSS styles. This allows you to override any aspect of appearance, including fonts, colours, and sizes.

You’ll need a capable web designer or developer to help with this.

How you can add your own CSS to your feedback board

  1. Go to your Feature Upvote dashboard
  2. Find the board to which you wish to add custom CSS, and click on ‘Settings’
  3. Scroll down to the ‘Custom CSS’ field
  4. Paste your custom CSS
  5. Click Save

screenshot of our request for pricing page

Add your custom css in this field


Custom CSS examples you can copy and paste

Add a big header image, as per this screenshot:

  1. Upload the image somewhere where it will be publicly available on the Internet.
  2. In your Feature Upvote account, go to your board's settings, and select Appearance.
  3. Add the CSS below to the Custom CSS field. Make sure to replace the URL in bold with the URL of your uploaded image.
  4. Click Save changes.
/* --- TOP BANNER LOGO REPLACEMENT --- */
h1#board-title.siteTitle {
  /* Set your new logo as the background */
  background-image: url('https://i.imgur.com/HzH45Kr.png') !important;
  background-size: contain !important; 
  background-position: center center !important;
  background-repeat: no-repeat !important;
  
  /* Hide the default text while keeping the element structurally intact */
  color: transparent !important; 
  font-size: 0 !important;
  
  /* Give the element enough height to display the logo */
  height: 280px !important; 
  margin: 0 auto 20px auto !important;
  display: block;
}

/* --- TOP PANEL ALIGNMENT FIX --- */
.panel.topPanel .productCustomText,
.panel.topPanel ol,
.panel.topPanel ul {
  text-align: left !important;
}

Hide the Top Navigation Bar 

  1. In your Feature Upvote account, go to your board's settings, and select Appearance.
  2. Add this to the Custom CSS field.
  3. Click Save changes:
/* Hide top nav */
.navbar-text.brandName, header.navbar {
  display: none !important;
}




Related Articles