Custom CSS
Our platform was born with high customizability and branding in mind. Custom CSS can make your event website or app truly unique and allow your brand to shine through. "What is CSS?" I hear you ask... From Wikipedia:
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web.
Leaning on our Design Team, or having some knowledge of CSS and jumping in yourself, you’ll be able to offer a truly unique and visually appealing event app design that will elevate the value of your event to your guests.
Handy Snippets to Get Started
Questions or Want Something Added?
Tap here to send a request for a new snippet!
Every CrowdComms app includes some Custom CSS added by our design team - and for common requests, we have a selection of CSS Snippets that can be added to your project to achieve your goals.
Things we can use CSS snippets for:
Removing My Schedule
Hiding extra features to keep your app simple is one of the best uses of CSS. Here's a snippet that removes the ability for users to add sessions to their own individual "schedule". This is useful when you're using our "Managed Schedules" feature to show a unique
Note: this snippet removes "My Schedule" from every agenda within your app. If you need it removed from just a single specific agenda, ask the team for help!
/*---------- Hide Add to Schedule / Personal Schedule ----------*/
cc-sidebar-right div:nth-child(3) ion-item,
cc-agenda-module-header ion-tab-bar ion-tab-button:nth-child(2),
cc-session-header ion-tab-button:nth-child(2),
.add-to-schedule,
cc-schedule-list ion-button.ticket-button,
cc-session-header ion-tab-button:nth-child(2) {
display:none;
}Before
After
Changing Stock Wording
Example: Changing the stock wording on an activity feed. Instead of saying "What's on your mind?", this changes the text to say "Selfie Challenge!".
/*Change Placeholder Text on Activity Feed*/
cc-activity-feed-submit-post > ion-card > button > div.top-area > div {
visibility:hidden;
font-size:0.01px;
}
cc-activity-feed-submit-post > ion-card > button > div.top-area > div:before {
visibility:visible!important;
font-size:14px;
content:"Selfie Challenge!";
}Before
After
Setting Custom Fonts
There are different ways to set custom fonts within the CrowdComms platform. Using Google fonts, you can select a font and use the @import CSS snippet to import it. Then you can use the "Set Font" snippet to set the font that way. Below is an exmple:
/*---------- Font Import ----------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
/*---------- Set Font ----------*/
html, body, p, textarea, input, span:not(.vjs-icon-placeholder) {
font-family: 'Montserrat', sans-serif!important;
--ion-font-family: 'Montserrat', sans-serif!important;
}Alternatively if you have the font files yourself, you can upload font files to the CC Dashboard and use Custom CSS to set the fonts as the below example shows. To upload fonts, head to the Settings > Branding > Fonts area, and ensure the filenames of your fonts are consistent. We suggest using the following formats of fonts for maximum compatibility:
- eot
- ttf
- svg
- woff
- woff2
/*--------- IMPORT FONT_NAME ----------*/
@font-face {
font-family: 'FONT_NAME';
src: url('https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/XXXX.eot'); /* IE9 Compat Modes */
src: url('https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/XXXX.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/XXXX.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/XXXX.svg') format('svg'),
url("https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/XXXX.woff") format("woff"), /* Modern Browsers */
url("https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/XXXX.woff2") format("woff2"); /* Modern Browsers */
}
/*---------- Set Font ----------*/
html, body, p, textarea, input, span:not(.vjs-icon-placeholder) {
font-family: 'FONT_NAME', sans-serif!important;
--ion-font-family: 'FONT_NAME', sans-serif!important;
}Replace "FONT_NAME", "SHORTCODE" and "XXXX" in the above snippet before pressing save.
Setting Specific Company Background Images
/*---------- Company Image Background ----------*/
cc-company-detail-page ion-content {
background-position:50% 50%!important;
background-size:cover!important;
background-repeat:no-repeat!important;
}
ion-content.cc-company-page-COMPANY_ID_HERE {
background-image:url(xxxx);
}Before
After
Adding a Note at the top of Pages
An example here is for an Info Pages module - used as a menu.
/*---------- Add Note to Top of Info Page ----------*/
cc-module[data-module-id="MODULE_ID_HERE"] cc-info-page-list:before {
content:'Please select an option from the following menu:';
text-align:center;
width:100%;
display:block;
color:white;
font-size:18px;
font-weight:700;
margin-top:12px;
margin-bottom:12px;
}Before
After
Setting up Heading 6 to be a Button
/*---------- H6 Button ----------*/
h6 a {
padding:10px;
text-align:center;
margin-block-start:0px;
margin-block-end:0px;
border-radius:4px;
font-size:1.1em;
text-decoration:none!important;
text-transform:uppercase;
background-color: var(--ion-color-accent)!important;
color: var(--ion-color-accent-contrast)!important;
cursor:pointer;
transition:0.4s;
}
h6 a:hover{
background-color: var(--ion-color-accent-contrast)!important;
color: var(--ion-color-accent)!important;
}Before
After
Setting up Scrollbar Design
/*--------- Scrollbar ----------*/
/* width */
::-webkit-scrollbar {
width: 6px;
transition:0.4s;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(255,255,255,0.2);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.4);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.6);
}Before
After
Text Editor Image Sizing
By default, the app ensures that any image added into the WYSIWYG text editor editor are full width. Sometimes it's nice to have the images at their real size, especially if you're adding small images.
The problem here is that we can only have one default.
TheThis two snippet changes the default so images are their regular size, rather than being forced to be full width!
/*--------- Info Page Image Auto Sizing ----------*/
.wysiwyg-content img {
width:auto!important;
}Before
After
Hide Version Footer
/*---------- Hide Version Footer ----------*/
.version-footer {
display:none;
}Before and After
Make Embedded Videos Full Width
When embedding videos on the platform in text editors, they are too small by default. This code makes them a good size.
/*---------- Fix Size of iFrames ----------*/
ion-card iframe {
border:none;
width:100%;
height:400px;
}Make Live Stream Module a Video Library
The Live Stream module is not super useful in its normal form. This code fixes it by turning it into a Video Library which can host on-demand videos - just without an engagement panel etc.
/*---------- Make Live Stream Module a Video Library ----------*/
cc-live-stream-list-page h3,
cc-live-stream-list ion-card ion-card-content,
cc-live-stream-list ion-card ion-card-subtitle,
cc-live-stream-page ion-card-subtitle,
cc-live-stream-page p.stream-idle-message,
cc-live-stream-page cc-pip-button {
display:none;
}Hide the Picture in Picture Button
/* Hide PIP Buttons */
cc-page.cc-session-page-XXXXXX cc-agenda-session-livestream-video button.vjs-picture-in-picture-control,
cc-page.cc-session-page-XXXXXX cc-pip-button
{display:none;}Make Something Not Clickable
In the below example, a session with is XXXX is made no longer clickable.
/* Make Something Not Clickable */
ion-item.cc-schedule-list-item-XXXX {
pointer-events: none;
}Hide Banner Ads from Left Sidebar
The below snippet hides the CC Banner Ads from just the left sidebar, so the ads are only visible in the main app page area.
/* Hide Banner Ads from Left Sidebar */
cc-sidebar-left-list cc-banner-ad {
display:none!important;
}Edit Message on Login Screen After Failed Login Attempt
Usually when an email address isn't allowed access to a platform, there is a generic message displayed to the user informing them that they are not authorised. If you'd like to change that message to a custom one, use the below snippet:
/* Customise Login Page Failed Attempt Text */
cc-login-form > ion-card > ion-card-content > form > div.login-form__access-denied-text {
color:var(--ion-color-danger)!important;
font-size:0.1px!important;
}
cc-login-form > ion-card > ion-card-content > form > div.login-form__access-denied-text:before {
font-size:16px!important;
line-height:2em!important;
width:100%!important;
color:white!important;
background:var(--ion-color-danger);
word-wrap:break-word;
padding-top:12px;
padding-bottom:12px;
content:"Custom Message Here";
}Add a Message to Login Screen
Want to add a little note to the login screen that's always visible? This is the snippet for you.
/* Add a Message to Login Screen */
cc-login-form form:before {
content:"Add your custom message here!";
white-space:pre-wrap;
margin-bottom:16px;
text-align:center;
width:100%;
display:block;
}Got a Bespoke Project? Talk to Us!
Our design team will work with you to ensure that the overall design of your app supports your event goals - and gives your attendees the unique experience they're after. We've been building a custom event platforms, apps and websites for a long time and our design team loves getting their hands dirty!