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:
Variable | Purpose | Example output |
{adminUrl} | Places a url to a page's admin dashboard. | |
{userMenu} | Places a bootstrap dropdown menu for the user sign in / sign out menu seen on project pages | See header user menu at https://publicinput.com/Manage |
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
Check out these related articles on CSS customization:
What are image and design standards for graphic assets?
Adding custom embeds and codes to your project page