EventMobi is a flexible platform for virtual, hybrid and in-person events.

At Participat Technologies, I’ve been using EventMobi as a product for customers since 2015.

Their platform provides the tools and technology to build event apps.  One of their additional addons is the ability to customise the look of an individual app to be more bespoke using CSS.

Supplied artwork.

We were only given the Jobs Fund logo, and their core icon for the event, titled “Knowledge Exchange”

Create the widgets.

The EventMobi system works with a home screen where you can add icon widgets for your most important elements of the app. This is where you want to drive users to. Typical widgets would be the Programme, Speakers, Attendees, as well as any networking of gamification that the app offers.

This specific widget was designed for the Gamification module. I didn’t want to add text to the image, as we could edit that with the app later on.

The first look at the app

The stock EventMobi app comes with a couple of colour customisations available. We use this as our design base, though everything can be changed with the CSS.

So, as a general practice, within the Advanced Designer, I typically add the colour pallette that I’m mostly going to work with, to minimise colour variances within element.s

 

CSS

/* |----------------------------------------| PARTICIPATE'S CSS HANDBOOK |---| */
/* |---| THEME COLOURS |---> */
/* |---|    PRIMARY COLOURS |---> */
/* |---|       ORANGE:      #CC7323 RGBA(204,115,035,1);
/* |---|       GREEN:       #41AD48 RGBA(072,175,072,1);
/* |---|    SECONDARY COLOURS ---> */
/* |---|       LIGHT GREEN: #C3D69B;
/* |---|       GREY:        #7F7F7F;
/* |---|       ORANGE 2:    #D5813C;
/* |---|       YELLOW:      #F1C148;
/* |---| THEME COLOURS |---| */

Make the Homescreen actually look decent

The first thing to do was to make the homescreen widgets transparent, instead of their white background.

This included removing the drop-shadow, border and border-radius of each element.

CSS

/* |--------------------------------------------------------| HOMESCREEN |---| */
.widget-overlay-image,
.widget-contents {
border: none; /* NONE REMOVES BORDER */
box-shadow: none; /* NONE REMOVES THE DROP-SHADOW */
border-radius: 0; /* 0 REMOVES THE WIDGET'S BORDER-RADIUS */
}
/* |---| WIDGET BACKGROUND |---> */
.widget-countdown,
.widget-overlay-image,
.widget-inner-contents,
.widget-contents {
background-color: rgba(0,0,0,0);
}

We were given a nice abstract graphic to use within the app, so I incorporated it into the background, whilst having a gradient background that eventually just ended up being a 50% opacity black, to enhance the icons against the background.

CSS

/* |-------------------------------------------------| BACKGROUND DESIGN |---| */
/* |---| GENERAL BACKGROUND |---> */
.content-body {
background: rgba(0,0,0,0);
}
/* |---| NEW PATTERNED BACKGROUND |---> */
.outer-container .layout-scroll {
background-image: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("https://bit.ly/JF19BG02");
background-position: left bottom;
background-size: auto 100%;
background-repeat: no-repeat;
color: #fff;
}

Next – Changing the text on each widget

The widget text definitely could do with a change.

Warping the text around each widget as to match that of the ‘KNOWLEDGE EXCHANGE’ was both too complex, and would look kitsch.

Rather, take the essence of that, and create a likeness that is still functional.

Orange background, rounded border radius, and ideally, fixed font size for all widgets.

 

CSS

/* |---| WIDGET TEXT |---> */
h3.widget-countdown-title,
.widget-two-column .widget-overlay-title,
.widget-one-column .widget-overlay-title {
background-color: #CC7323;
background-color: RGBA(204,115,035,1);
text-align: center;
border-radius: 2em;
font-size: 0.75rem;
font-weight: 900;
color: #fff;
text-transform: uppercase;
font-family: 'roboto', arial;
line-height: 0.4em;
padding: 10px 5px 5px 2px;
height: 2em;
}

Menu tweaks

Although the menu was 100% functional, adding a touch of African flair was what I was looking for.

First off, changing the generic black background to be a fancy CSS gradient one. 

Credit to the actual CSS pattern goes to Wally on CodePen – https://codepen.io/CWEI/pen/NAZmRx. I took his pattern and changed the colour and spacing slightly to suit my needs.

 

CSS

/* |--------------------------------------------------------------| MENU |---| */
.menu-header,
.menu-nav-header,
.menu-nav-item,
.outer-container .menu {
background-image: linear-gradient(90deg, rgba(0,0,0,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,175,75,.03) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(0,0,0,.07) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,175,75,.09) 50%);
background-size: 13px, 29px, 37px, 53px;
}

Whilst we’re on the menu, the default design for the currently selected menu item could do with a bump up from economy class. An alpha white background, with a hint of a border on the top and bottom seemed just right for the client.

CSS

/* |--------------------------------------------------------------| MENU |---| */
.menu-nav-item.is-selected {
   
border-top: #666 1px solid;
border-bottom: #666 1px solid;
background: rgba(255,255,255,.25);
}

Just a touch of animation

Although many other tweaks and changes were made on the app, listing them all would be boring.

What I was quite chuffed about, was the creation of a subtle element that really only popped on displays with a nice screen display. It was to add an additional layer between the background and the widgets, in the form of animated motes.

 

This was achieved by creating a set of widgets, isolating them with the nth-child selector, and then hacking away at their heights within the CSS.

This was achieved by making their margin negative in value. This means that they’d be behind the items below them. With the widgets being transparent PNG files, these orbs then pivot around a point, though by spacing them out, this isn’t easily spotted.

 

Below is the one of the orbs/motes images, static, and next to it, a rotating version. I’ve removed the border and drop shadow to show how the element looks in action.

 

 

CSS

/* |-----------------------------------------------| THE ANIMATION TWEAK |---| */
/* |---| WIDGET ROTATION |---> */
.widget-container [ng-repeat]:nth-child(1) {
animation: rotation 30s infinite linear;
margin-bottom: calc(-500px / 1);
}
.widget-container [ng-repeat]:nth-child(6) {
animation: rotation 25s infinite linear;
margin-bottom: calc(-500px / 1);
}
.widget-container [ng-repeat]:nth-child(14) {
animation: rotation 35s infinite linear;
margin-bottom: calc(-500px / 1);
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

Have a look at the live app:

Here is a final view of the live app.

You can navigate to all of the modules and features, as well as log in and create a profile for yourself.

Below is the full custom deck of CSS that I used for the event app.

CSS

/* |————————————————-| PARTICIPATE’S CSS HANDBOOK |—| */
/* |—| THEME COLOURS |—> */
/* |—| PRIMARY COLOURS |—> */
/* |—| ORANGE: #CC7323 RGBA(204,115,035,1);
/* |—| GREEN: #41AD48 RGBA(072,175,072,1);
/* |—| SECONDARY COLOURS —> */
/* |—| LIGHT GREEN: #C3D69B;
/* |—| GREY: #7F7F7F;
/* |—| ORANGE 2: #D5813C;
/* |—| YELLOW: #F1C148;
/* |—| THEME COLOURS |—| */
/* |——————————————————| LOADING SCREEN TWEAKS |—| */
.loader-container {
background: url(“https://bit.ly/JF19BG02”);
background-position: left bottom;
background-size: auto 100%;
background-repeat: no-repeat;
color: #fff;
}
/* |———————————————————-| BACKGROUND DESIGN |—| */
/* |—| GENERAL BACKGROUND |—> */
.content-body {
background: rgba(0,0,0,0);
}
/* |—| NEW PATTERNED BACKGROUND |—> */
.outer-container .layout-scroll {
background-image: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url(“https://bit.ly/JF19BG02”);
background-position: left bottom;
background-size: auto 100%;
background-repeat: no-repeat;
color: #fff;
}
/* |—————————————————————–| HOMESCREEN |—| */
/* |—| WIDGET BORDER |—> */
.widget-overlay-image,
.widget-contents {
border: none; /* NONE REMOVES BORDER */
box-shadow: none; /* NONE REMOVES THE DROP-SHADOW */
border-radius: 0; /* 0 REMOVES THE WIDGET’S BORDER-RADIUS */
}
/* |—| WIDGET BACKGROUND |—> */
.widget-countdown,
.widget-overlay-image,
.widget-inner-contents,
.widget-contents {
background-color: rgba(0,0,0,0);
}
/* |—| WIDGET TEXT |—> */
h3.widget-countdown-title,
.widget-two-column .widget-overlay-title,
.widget-one-column .widget-overlay-title {
background-color: #CC7323;
background-color: RGBA(204,115,035,1);;
text-align: center;
border-radius: 2em;
font-size: 0.75rem;
font-weight: 900;
color: #fff;
text-transform: uppercase;
font-family: ‘roboto’, arial;
line-height: 0.4em;
padding: 10px 5px 5px 2px;
height: 2em;
}
/*|—| COUNTDOWN WIDGET |—> */
.widget-countdown-number {
background-color: #41AD48;
background-color: rgba(072,175,072,0.75);
}
/* |—————————————————————-| HEADER MENU |—| */
/* |—| NAVBAR DESIGN (IF DIFFERENT FROM MENU COLOUR |—> */
.navbar {
background-image: linear-gradient(90deg, rgba(0,0,0,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,175,75,.03) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(0,0,0,.07) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,175,75,.09) 50%);
background-size: 13px, 29px, 37px, 53px;
border-bottom: 2px solid #7E532A;
}
.outer-container.is-landscape.open-right .menu–right,
.outer-container.open-right .layout-fixed–top .menu {
border-left: 2px solid #7E532A;
}
.outer-container.is-landscape.open-left .menu–left,
.outer-container.open-left .layout-fixed–top .menu {
border-right: 2px solid #7E532A;
}
/* |———————————————–| AGENDA / PROGRAM / PROGRAMME |—| */
/* |—| MAIN AGENDA PAGE |—> */
/* |—| TOP BUTTONS – LIST VIEW |—> */
.button-group,
.track-item,
.tl-button-group-item .button-group-link,
.tl-dropdown-menu .dropdown-selected,
.button-group-item .button-group-link {
background: #000;
background: rgba(0,0,0,0.5);
}
.tl-button-group-item.is-selected .button-group-link,
.button-group-item.is-selected .button-group-link {
background: #41AD48;
background: rgba(072,175,072,0.5);
color: #fff;
}
.button-group-item:active .button-group-link {
background: #CC7323;
}
/* |—| TRACK ITEM |—> */
.track-item:hover {
background: linear-gradient(to left, #fff, transparent);
}
/* |—| AGENDA CARD |—> */
/* |—| DARK BACKGROUND ON CARDS |—> */
.card {
background: #000;
background: rgba(0,0,0,0.5);
}
/* |—| ADD TO YOUR SCHEDULE |—> */
.button-card-footer,
.button-card-footer-block,
.button-card-footer-half-width {
background: #CC7323;
background: rgba(204,115,035,0.5);
color: #fff;
}
/* |—| REMOVE FROM YOUR SCHEDULE |—> */
.card.is-added {
border: 2px solid #41ad48;
}
.button-card-footer.is-selected,
.button-card-footer-block.is-selected,
.button-card-footer-half-width.is-selected {
background: #41ad48;
background: rgba(072,175,072,0.5);
color: #fff;
}
/* |—| AGENDA ITEM |—> */
.item-details,
.details-block-content,
.item-notes {
background: #000; /* BACKGROUND ON DATE, LOCATION AND TRACKS */
background: rgba(0,0,0,0.5);
color: #fff;
}
/* |—| ITEM NOTES |—> */
.item-notes-textarea {
background: #000; /* BACKGROUND ON DATE, LOCATION AND TRACKS */
background: rgba(0,0,0,0.5);
color: #fff;
padding: 0.5em;
font-family: ‘Roboto Mono’, courier, monospace;
font-weight: 300;
font-size: 1.25em;
line-height: 1.25em;
}
/* |—| AGENDA BUTTONS |—> */
.button-card-footer-half-width {
background: #000;
background: rgba(000,000,000,0.5);
border: 1px dotted grey;
}
/* |—| TWEET ABOUT THIS SESSION |—> */
div.details-block.ng-scope[ng-if=”enableTweet”], /* IN CASE THEY FIX SPELLING */
div.details-block.ng-scope[ng-if=”enbaleTweet”] {
display: none; /* REMOVES THE SESSION-TWEET BUTTON */
}
/* |—| POLLING PAGES |—> */
.progress-bar-container,
.poll-details { /* MAKING THE BACKGROUND DARK */
background: #41AD48; /* FALLBACK GREEN */
background: rgba(072,175,072,0.25);
}
.progress-bar-label {
color: #fff;
}
.progress-bar {
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.5);
}
.progress-bar-complete {
background: rgba(255,255,255,0.5);
}
.survey-poll-container textarea,
.question-container textarea {
background: #000; /* BACKGROUND ON DATE, LOCATION AND TRACKS */
background: rgba(0,0,0,0.5);
color: #fff;
padding: 0.5em; /* PADDING THE TEXT FIELD */
font-family: ‘Roboto Mono’, courier, monospace;
font-weight: 300;
font-size: 1.25em;
}
.question-list-item-option {
background: #000;
background: rgba(0,0,0,0.5);
border: 2px solid #fff;
}
.question-list-item-option label {
color: #fff;
}
.question-list-item input:checked + .question-list-item-option {
background: #41AD48; /* GREEN MULTIPLE CHOICE BUTTON */
border: 2px solid #41AD48;
}
/* |—| ASK A QUESTION |—> */
.question-ask-list-item,
.question-header {
background: #000;
}
.ask-a-question-action {
background: #000;
background: rgba(0,0,0,0.5);
border-top: 1px solid #7E532A;
}
.question-ask-vote,
.ask-a-question-modal .button-block,
.ask-a-question-action .button-block {
background: #41AD48;
color: white;
}
.question-ask-vote:active,
.ask-a-question-modal .button-block:active,
.ask-a-question-action .button-block:active {
background: #CC7323;
color: white;
}
.question-ask-vote [class^=”icon-“] {
color: #000;
}
.ask-a-question-modal textarea {
background: #000; /* BACKGROUND ON DATE, LOCATION AND TRACKS */
background: rgba(0,0,0,0.5);
color: #fff;
padding: 0.5em;
font-family: ‘Roboto Mono’, courier, monospace;
font-weight: 300;
font-size: 1.25em;
line-height: 1.25em;
}
/* |——————————————————————-| TIMELINE |—| */
.timeline-container,
.timeline {
background: transparent;
}
.heading-item,
.hour-column > .hour-row,
.session-column,
.timeline-outer-container {
background: #000;
background: rgba(0,0,0,0.5);
color: #fff;
}
.headings,
.session-column,
.hour-column,
.hour-row {
border-color: #7E532A;
}
/* |—| TOP BUTTONS – TABLE VIEW |—> */
.session-popup-button {
background: #000;
background: rgba(0,0,0,0.5);
}
.session-popup-button.is-selected {
background: #41AD48;
background: rgba(072,175,072,0.5);
color: #fff;
}
.filter-selection-button {
background-color: #666;
}
.filter-selection-button.is-selected {
background-color: #41AD48;
}
/* |———————————————————————| PEOPLE |—| */
/* |—| SEARCH |—> */
.outer-container .search-block {
background: #000;
background: rgba(0,0,0,0.5);
color: #fff;
}
.section-search {
background: #000;
background: rgba(255,255,255,0.15);
color: #fff;
border-color: #333;
}
/* |—| LETTER DIVIDERS – LIST TITLES |—> */
.list-title {
background: #41AD48;
background: rgba(072,175,072,0.5);
}
/* |—| SIDE SCROLL – CAOURSEL INDEX |—> */
.outer-container .carousel-index {
background: #CC7323;
background: rgba(204,115,035,0.5);
}
.carousel-index-item.letter-exists {
color: white;
}
.carousel-index-item {
color: #666;
}
/* |—| CARDS |—> */
.person-list-item {
background: #000;
background: rgba(0,0,0,0.5);
border-radius: 1em 5em 5em 1em;
}
/* |—| PERSON PROFILE |—> */
.person-details {
background: #41AD48;
background: rgba(072,175,072,0.5);
}
.person-job-title,
.person-company {
color: #fff;
}
.edit-user-profile {
background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
}
.details-block-content.custom-fields {
display: none;
}
.edit-user-profile input[type=’text’][name=”custom-0″] {
color: #fff;
background: #41AD48;
font-family: roboto-mono, courier, monospace;
font-weight: 900;
font-size: 2em;
text-align: center;
padding-right: 0.5em;
border: 3px dotted white;
}
.content-list {
background: #000;
background: rgba(0,0,0,0.5);
color: #fff;
}
.list-item-content .list-item-title,
.list-item-content .list-item-description,
.list-item {
color: #fff;
}
.list-item.color-link[href*=”http”] {
background: linear-gradient(to left, #CC7323, #000, #41AD48);
}
.list-item.color-link[href*=”twitter.com”] {
background: linear-gradient(to left, #CC7323, #000, #1DA1F2);
}
.list-item.color-link[href*=”facebook.com”] {
background: linear-gradient(to left, #CC7323, #000, #4267B2);
}
.list-item.color-link[href*=”linkedin.com”] {
background: linear-gradient(to left, #CC7323, #000, #0073B2);
}
.edit-user-profile input[type=’text’]:focus { /* That hightlight issue on input forms! */
background: #C26A1C;
}
/* |————————————————————–| ACTIVITY FEED |—| */
.activity-feed-callout-block .details-block-content {
background: #fff;
}
/* |———————————————————————–| MENU |—| */
.menu-header,
.menu-nav-header,
.menu-nav-item,
.outer-container .menu {
background-image: linear-gradient(90deg, rgba(0,0,0,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,175,75,.03) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(0,0,0,.07) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,175,75,.09) 50%);
background-size: 13px, 29px, 37px, 53px;
}
.menu-nav-item.is-selected {
border-top: #666 1px solid;
border-bottom: #666 1px solid;
}
/* |—| PT LOGO – WHITE & BLACK (REMOVE ONE) |—> */
.menu-nav-footer h6:after {
display: block;
content: url(‘https://bit.ly/PT-Logo-White’); /* WHITE LOGO */
/* content: url(‘https://bit.ly/PT-Logo-Black’); *//* BLACK LOGO */
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
/* |—| ADDITIONAL AMPERSAND |—> */
a.ng-scope[ng-if=”!hidePoweredBy && !customPoweredBy”]:before {
content: ‘&’;
display: block;
color: white; /* WHITE LOGO */
/* color: black; */ /* BLACK LOGO */
padding-bottom: 10px;
}
/* |————————————————————–| NOTIFICATIONS |—| */
.event-feed-content-list {
background: #000;
color: #fff;
}
.event-feed-content {
border: 2px solid white;
}
.event-feed-content .list-title {
background: #378336;
}
.event-feed-content .list-title-link {
color: #000;
}
.unread-message a {
color: #fff;
}
/* |———————————————————————–| CHAT |—| */
.chat-conversation {
background: #000;
background: rgba(0,0,0,0.5);
}
.chat-compose-textarea:focus,
.chat-compose-textarea-container:before,
.chat-compose-textarea-container:after,
.chat-compose-textarea,
.chat-compose,
.chat-compose-input:disabled {
background-color: #000;
color: #fff;
}
.chat-compose-textarea {
border: none;
}
.chat-datetime-divider p {
background: #000;
color: #fff;
}
.form-appointment-request textarea:focus,
.form-appointment-request label {
color: #fff;
}
.form-appointment-request textarea,
.form-appointment-request textarea:hover,
.form-appointment-request input[type=’text’],
.form-field input[type=’text’] {
background: #000;
color: #fff;
}
.form-appointment-request .button-half-block:first-of-type {
background: grey;
}
.appointment-request {
background: #000;
background-image: linear-gradient(90deg, rgba(0,0,0,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,175,75,.03) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(0,0,0,.07) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,175,75,.09) 50%);
background-size: 13px, 29px, 37px, 53px;
border: 2px dashed #fff;
color: #fff;
}
.chat-message-content {
background: #C67727;
color: white;
}
/* |—————————————————————| MODAL POPUPS |—| */
.modal-cta .button-card-footer-half-width,
.modal-cta .button-card-footer-full-width,
.modal-content {
background: #000;
background: rgba(0,0,0,0.9);
}
.modal-title {
color: #fff;
}
.modal-content {
border: 2px solid white;
}
/* |—————————————————————| GAMIFICATION |—| */
.widget-gamify {
background: transparent;
color: #fff;
}
.gamify-info-modal .alert-content:before {
height: 0px;
}
.widget-gamify-user .user-image,
.widget-gamify-user .user-rank{
border: 3px solid #C98910;
background: #000;
color: #fff;
}
.widget-gamify-user .user-points {
color: #C98910;
}
.widget-gamify-user:first-child .user-image,
.widget-gamify-user:first-child .user-rank{
border: 3px solid #A8A8A8;
background: #000;
color: #fff;
}
.widget-gamify-user:first-child .user-points {
color: #A8A8A8;
}
.widget-gamify-user:last-child .user-image,
.widget-gamify-user:last-child .user-rank {
border: 3px solid #965A38;
background: #000;
color: #fff;
}
.widget-gamify-user:last-child .user-points {
color: #965A38;
}

.widget-gamify-footer-content .user-image {
border: 2px solid #41AD48;
}
.widget-gamify-footer,
.gamify-challenge-modal .modal-cta {
border-top: 1.5px dotted #41AD48;
}

/* |——————————————————————–| OVERALL |—| */
.button {
background: #41AD48;
color: white;
}
.button:active {
background: #CC7323;
color: #fff;
}
/* |—| WIDGET ROTATION |—> */
.widget-container [ng-repeat]:nth-child(1) {
animation: rotation 30s infinite linear;
margin-bottom: calc(-500px / 1);
}
.widget-container [ng-repeat]:nth-child(6) {
animation: rotation 25s infinite linear;
margin-bottom: calc(-500px / 1);
}
.widget-container [ng-repeat]:nth-child(14) {
animation: rotation 35s infinite linear;
margin-bottom: calc(-500px / 1);
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.multi-select .poll-details-subtitle,
.multi-select .ng-scope {
display: none;
}