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


Adding a custom background image with CSS

A popular use of custom CSS is adding key artwork as a background image. Here's one way to do it:

  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 this to the Custom CSS field and click Save changes:
body {
  background: url("https://res.cloudinary.com/featureupvote/image/upload/v1739026013/Barbary_Ape_chy5jm.jpg") no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
}

Make sure to change the bit in bold to the right URL for your image.


What size should your background image be? 

The answer, I'm afraid, is it depends on your image.

My example above with the Barbary ape is quite small - 1280x1050 - and the results are good.

I recommend trying with something smallish, and if the results are not good, then try a bigger image.





Related Articles