On request, we can offer you additional Attendee App CSS to add extra stylistic

touches to your attendee app.

You should bookmark this page to check for updates to the CSS.

We offer this ‘as is’, as a courtesy, however if you need further development or design work, we recommend you engage with your own developers.

This Custom CSS can be added in the Attendee App Builder, under the Details > Style tab.

Scroll down to Advanced Settings, and you’ll see where you can upload the CSS file. Select “Add” and browse to the correct file.

There are two different CSS files, which are updated from time to time:

– One for Modern theme attendee apps

– One for other (non-Modern theme) attendee apps

You need to use the correct one for your app. Below are the links to the most recent versions. Please copy and paste the code into Notepad or a similar text editor that won't add any extra code. DO NOT paste into MSWord.

- MOST RECENT MODERN THEME CSS

- MOST RECENT OTHER (NON-MODERN) THEME CSS

To remove the default emojis for different items in the agenda (Functions, travel, etc) from the Modern theme, please add this extra code at the very end of the Modern Theme CSS:

/* Hide agenda card icons */
div[id^=agendaCardContent] li.MuiListItem-root > a.MuiBox-root > .MuiStack-root +.MuiBox-root.css-pulc8v, div[id^=myAgendaCardContent] li.MuiListItem-root > a.MuiBox-root > .MuiStack-root +.MuiBox-root.css-pulc8v {display:none}

@media screen and (min-width:900px){
    div[id^=agendaCardContent] li.MuiListItem-root > a.MuiBox-root > .MuiStack-root +.MuiBox-root +.MuiBox-root +.MuiBox-root.css-pulc8v, div[id^=myAgendaCardContent] li.MuiListItem-root > a.MuiBox-root > .MuiStack-root +.MuiBox-root +.MuiBox-root +.MuiBox-root.css-pulc8v {display:none}
    
}

If we previously edited the colors for you, you’ll also need to do this when you update the CSS. (See separate instructions on choosing colors below.)

Open the file in Notepad++

Use “Find & Replace” to replace the default hex code colors with your chosen colors, i.e.

	REPLACE…	WITH…
PRIMARY	#7037ED	Your PRIMARY color hex code
SECONDARY	#040742	Your SECONDARY color hex code
DARK	#4F1AC3	Your DARK color hex code
LIGHT	#E0D7F3	Your LIGHT color hex code
EXTRA LIGHT	#F1EBFE	Your EXTRA LIGHT color hex code

TO CHOOSE YOUR COLORS:

To get started, select a primary and secondary color, using HEX codes. You may find it helpful to refer to a site such as www.color-hex.com

EXAMPLES:

HEX CODES FOR DARK, LIGHT & EXTRA LIGHT:

You should already know your “Primary” and “Secondary” colors for your app.

To get the values for the Dark, Light and Extra Light colors, follow the instructions below.

Go to site: https://www.photopea.com/

Click “Start Using Photopea”, then “New Project”

Select any image/template (doesn’t matter what).

In the left-hand toolbar, look near the bottom for the black and white overlapping squares (the Color Picker) and click to open the color selection (it will look a bit like the below).