All Collections
Building your first project in PublicInput
Getting started
Custom colors, CSS styling, headers, and footers
Custom colors, CSS styling, headers, and footers

A quick overview of how to customize the look and feel of your pages by adding your logo, changing your accent color, and CSS customization.

McKenzie avatar
Written by McKenzie
Updated over a week ago

Want to add your logo as the default Favicon for web browsers?
Want your logo or colors to appear in your default email notifications?
Have custom fonts or CSS you'd like to apply? Read on!

Configuring styling from the customer settings page

To view your styling options, go to Settings page on the left menu panel:

Customizing your logo

To customize your default logo, Click the Edit Logo button to upload your logo or choose it from your image library. This logo will appear in email communications & landing pages.

Customizing the default accent Color
Set the default Accent Color that will appear throughout the interface, such as hover or background colors on some question responses, at the top of a project page if there is no banner image, and on some buttons in emails.

Configuring custom Sitewide CSS Rules

If you’re CSS savvy, you can navigate to Custom Styling on the left-hand navigation of the settings page. If you have custom headers and footers included in your license plan, you can also customize the html header and footers shown for your public facing pages here.

Note: if you're creating a style specific to a department, board, commission, or project, we recommend configuring this as a custom style set that can be used at page and project level.

(Reference custom styles for projects if you want more specific rules.)

Custom sitewide header and footer

If custom headers and footers are enabled for your account, you can add your own custom HTML to be displayed in place of the default header and footer on your project pages, boards, and commissions in the Custom Styles tab on the settings page:

The custom header html edits will replace the default sitewide header and footer. Since the footer and header include dynamic content, special content variables can be used to place dynamic content:



Example output


Places a url to a page's admin dashboard.


Places a bootstrap dropdown menu for the user sign in / sign out menu seen on project pages

See header user menu at

Dynamically show or hide custom content

If you're comfortable using CSS classes, you can use two handy classes to hide or show content based on whether or not a user is signed in.

If a user is signed in, the following rule will be added to the page:

.hide-if-signed-in {

display: none;


If a user is signed out, the following rule will be added to the page:

.hide-if-signed-out {

display: none;


Practically speaking, this is primarily used to create custom calls to action in a header or footer menu, such as only showing "Sign in" messaging not signed out visitors.

Learn more about custom styling

Did this answer your question?