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 My Schedule ----------*/
.cc-schedule-all,
ion-button.session-livestream-video__action:nth-child(3),
.agenda-card__header-ticket {
display:none!important;
}
@media (max-width: 1280px) {
cc-agenda-module-header div.view-selection {
display:none!important;
}
}
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-module-XXXXX cc-activity-feed-submit-post .feed-submit-post__item > ion-label {
font-size:0px;
}
.cc-module-XXXXX cc-activity-feed-submit-post .feed-submit-post__item > ion-label:before {
content:"Selfie Challenge!";
font-size:16px!important;
}
/*Change Placeholder Text on Activity Feed Popup*/
/*WARNING - this changes for the entire app, not just one module*/
.post-input .ql-editor.ql-blank:before {
content:"Selfie Challenge!"!important;
}Before
After
Change wording for 'Speak to an expert'
/*---------- Change the Speak to an Expert Text ----------*/
cc-company-detail-section[header="COMPANIES_COMPANY_SPEAK_EXPERT"] h1 {
font-size:0px;
}
cc-company-detail-section[header="COMPANIES_COMPANY_SPEAK_EXPERT"] h1:before {
font-size:24px;
content:'xxxx';
}Simply replace the 'xxxx' on line 9 with your replacement text
Hide Online Indicator
/*---------- Hide online indicator ----------*/
cc-online-status {
display:none!important;
}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):not([class*="material-icons"]) {
font-family: 'Montserrat', sans-serif!important;
--ion-font-family: 'Montserrat', sans-serif!important;
}
/*---------- Bold Headings ----------*/
h1, h2, h3, ion-card-title, ion-card-title span, span.session-title {
font-weight:700!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:
- ttf
- woff
- woff2
/*--------- Custom Font Import ----------*/
@font-face {
font-family: "FONTFAMILY";
font-weight:FONTWEIGHT;
src: url("https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/FONTFILE.ttf") format("truetype"), /* Safari, Android, iOS */
url("https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/FONTFILE.woff") format("woff"), /* Modern Browsers */
url("https://media.crowdcomms.com/media/apps/SHORTCODE/fonts/FONTFILE.woff2") format("woff2"); /* Modern Browsers */
}
html, body, p, textarea, input, span:not(.vjs-icon-placeholder) {
font-family: "FONTFAMILY", sans-serif !important;
--ion-font-family: 'FONTFAMILY', sans-!important;
}Replace "FONTFAMILY", "FONTWEIGHT", "FONTNAME", "SHORTCODE" and "FONTFILE" in the above snippet before pressing save.
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-XXXXX cc-info-page-list ion-list:before {
content:"Search by Name, Job Title or Company:";
display:block;
text-align:center;
margin-bottom:16px;
font-weight:700;
color:white;
}Remove background image on people cards
/*-------- Remove people BG blur -------*/
div.people-card__header-background,
.people-card__header-background-container {
background:var(--cc-primary-color)!important;
}Company module in three columns on desktop
/*----- Companies in columns of 3 -----*/
@media (min-width: 890px) {
cc-companies-list ion-col {
width:33%!important;
max-width:500px!important;
flex:initial!important;
}
}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;
}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);
}Text Editor Image Sizing
By default, the app ensures that any image added into the WYSIWYG text 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. This 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;
}Hide Version Footer
/*---------- Hide Version Footer ----------*/
.version-footer {
display:none;
}Before and After
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;
}Allow Previously Sized Company Logos
Used the platform for a while and found the new company logo size change annoying? There's a video on our Video Guides area, plus a handy CSS Snippet below which you can copy / paste to adjust the styling on the Company Profile page.
/*Adjust size of new company logo if old sized company logos are used*/
.company-branding img.company-branding__logo {
border-radius:0px!important;
background:none!important;
border:none!important;
width:240px!important;
}Improve Alert Popup Styling
The "popup" platform alerts appear styled quite differently to the email alert popups. The below CSS helps ensure the styling is more consistent between the two.
/*Fix Alert Styling*/
cc-alert-list-item div.wysiwyg-content {font-size:14px;}
cc-alert-list-item div.wysiwyg-content ul {margin-block: 0px;}
cc-alert-list-item > ion-item > div > ion-label > span p,
cc-alert-list-item .wysiwyg-content p,
cc-alert-list-item .wysiwyg-content ul {margin-bottom:16px!important;}Change Chat Label on people profiles
With this snippet you can edit the text used for the 'Chat' button on people profiles
/*-------- Chnage Chat Label ---------------*/
cc-chat-footer ion-label {
font-size:0em;
}
.cc-person-button.chat-button ion-label {
color:transparent;
}
cc-chat-footer ion-label:before {
font-size:0.62em;
content:'Message';
}
.cc-person-button.chat-button ion-label:before{
color:white;
content:'Message';
}Video Library Edits
This block contains several snippets
/*---------- Video Library Background ----------*/
.vod-shell__content-container {
--background:#000!important;
}
/*---------- Video Library Text Color ----------*/
.vod-shell__content .featured-video__title,
.vod-shell__content .featured-video__description,
.vod-shell__content .featured-video-banner__metrics__text,
.vod-shell__content .video-card__header__title,
.vod-shell__content .video-card-group__controls__title,
.vod-shell__content .video-card__metrics__text,
.vod-shell__content .vod-section-banner__text__title,
.vod-shell__content .vod-section-banner__text__description,
.vod-shell__content .section-group__title{
color:#fff!important;
}
/*---------- Video Library Icon Color ----------*/
.vod-shell__content .featured-video-banner__metrics__icon,
.vod-shell__content .video-card__header__duration,
.vod-shell__content .video-card__metrics__icon {
color:#0000ff!important;
}
/*---------- Video Library Hide Search Bar ----------*/
.vod-shell__content cc-search-bar {
display:none!important;
}
/*---------- Video Library Hide Views/Likes ----------*/
.vod-shell__content .video-card__metrics,
.vod-shell__content .featured-video-banner__metrics {
display:none!important;
}
Iframe In Poll
Paste this into the Custom CSS, replacing the xxx's with the session number
/*---------- Embed into Live Poll Intermission ----------*/
.cc-session-page-xxxxxxx cc-poll-intermission, cc-poll-intermission ion-card > div {
width:100%!important;
}
.cc-session-page-xxxxxxx cc-poll-intermission ion-card iframe {
border:none!important;min-height:550px!important;
}
.cc-session-page-xxxxxxx cc-poll-intermission > div > ion-card {
margin:0px!important;
padding:0px!important;
box-shadow:none!important;
}
.cc-session-page-xxxxxxx cc-agenda-session-poll-tab > div {
justify-content:flex-start!important;
}
.cc-session-page-xxxxxxx .ql-video {
border:none;
}Paste this snippet into https://wordtohtml.net/ replacing the xxx's with the page which you would like to embed
/*---------- Iframe for Live Poll ----------*/
<p>
<iframe class="ql-video" frame-border="0" allowfullscreen="allowfullscreen" src="xxxxxxxx" min-width="100%" width="100%" height="100%">
</iframe>
</p>
Convert Agenda Module to Posters
Just paste over the 'xxx's with the module number of the agenda you wish to convert
/*---------- Posters module ----------*/
.cc-module-xxxxxx .date-picker .swiper-buttons,
.cc-module-xxxxxx ion-footer ion-button:nth-child(1),
.cc-module-xxxxxx ion-footer .divider,
.cc-module-xxxxxx .cc-schedule-all,
.cc-module-xxxxxx .on-now-container,
.cc-module-xxxxxx cc-agenda-module-header .view-tab-bar,
.cc-module-xxxxxx .agenda-card__my-schedule {
display:none!important;
}
.cc-module-xxxxxx span.cc-agenda-date,
.cc-session-page-in-agenda-xxxxxx cc-session-speakers ion-card-title,
.cc-session-page-in-agenda-xxxxxx cc-session-documents ion-card-title {
font-size:0px;
}
.cc-module-xxxxxx span.cc-agenda-date:before {
content:'Posters';
font-size:18px;
}
.cc-session-page-in-agenda-xxxxxx cc-session-speakers ion-card-title:before {
content:'Poster author';
font-size:20px;
}
.cc-session-page-in-agenda-xxxxxx cc-session-documents ion-card-title:before {
content:'Poster download';
font-size:20px;
}
@media (max-width: 1280px) {
.cc-module-xxxxxx cc-agenda-module-header div.view-selection {
display:none!important;
}
}
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!