Setting Your Brand Colors
You can customize the look and feel of your public-facing events site and registration pages by applying your own brand colors.
Note: the colors you select will only affect the public-facing events pages, not the colors of the Seatrobot platform you are logged into.
How to set your brand colors
To start, go to your Admin section.
In the ‘Manage Organization’ tab, you will see a section titled ‘Set Brand Colors’ containing three color pickers, one each for your organization’s Primary Color, Accent Color and Text Background Color.
Click on one of the color squares to pick suitable colors from the dropdown, or if you know your organization’s brand hex color values, you can insert them directly as six-digit color picker values. (Remember always to insert a '#' before the digits in your hex code)
Then click the appropriate ‘Set Color’ button.
The color pickers are ‘hexadecimal values’ for colors, a kind of code used by web pages to define CMYK colors. If you do not know your organization’s brand colors as hex values, your marketing department or web designer will be able to supply them.
Or, you can go to imagecolorpicker.com on your computer, phone, or tablet. You can use this free tool to identify the hex code of any color in an uploaded image. This method will work in any web browser, including those on your Android, iPhone, or iPad. Upload an image or enter a URL.
How Seatrobot applies your brand colors
Seatrobot applies the brand colors you set to your organization’s registration and events pages. Below, you can see examples of how the colors are applied:
Events Page
Above, you can see how the example brand colors on the right appear on this organization’s event page:
Primary Color
Organization name
Text and color (50% strength) of ‘Upcoming’ and ‘Past Events’ buttons
Titles of all events
‘Info’ links to events description
Page footer
Accent Color
‘Events’ page title
All event dates numerals with borders
All ‘Register’ and ‘View Event’ buttons
Body Text Color
Not used on this page (events teaser text and date months are displayed using dark gray)
Events Info Modal
Clicking the info link on any event on this page opens up the event info modal, as below:
You can see how the brand colors are applied to this modal:
Primary Color
Not used
Accent Color
Register button
Body Text Color
Event description text
Event details list
Individual Event Register Page
Each event has its own registration page, as below:
Above, you can see how the brand colors are applied to this page:
Primary Color
Event title
Event teaser text
Any links on the page (e.g. link to Event Web Page)
‘Share’ and calendar buttons
Linked events titles
Page footer
Accent Color
Event dates numerals with borders
Register buttons
Ticket / register package info button
Body Text Color
Event details (sidebar)
Ticket / register package price
Event description text
‘Share’ Buttons Modal
Clicking the ‘Share’ button on this page opens the event share modal, as below:
As above, the Accent Color is applied to all social media and share icons