4.8 Custom CSS

IMPORTANT NOTE: #

There is an updated version of the CSS snippets doc at: https://docs.crowdcomms.com/books/css-snippets-24

---

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 ———-/

.my-schedule,
.cc-schedule-all,
.calendar-item__ticket {
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 #

/———- Add Message to the top of a module page ———-/
.cc-module-xxxx .container:before {
content:”xxxxxxxxxx”;
display:block;
text-align:left;
margin-bottom:16px;
white-space:pre-wrap;
color:black;
background-color:white;
padding:20px;
border-radius:5px;
}

/———- 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;
}

Only show the banner ad on the sidebar

/———- Banner Ad only on Sidenav ———-/

    cc-banner-ad {
        display:none;
    }
    
    .menu-left cc-banner-ad {
        display:block;
    }

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;
}
}

Show company banners on mobile

/———- Show Company Banners Mobile ———-/

.company-detail__background-strip::before {
content: unset!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;
display: block;
line-height: 1.4;
}
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 banner ads everywhere apart from the Sidemenu

/———- Hide banner ads everywhere but the sidemenu ———-/

cc-banner-ad {
display:none;
}

cc-sidebar-left-list cc-banner-ad {
display:block;
}

Hide Banner Ads from Left Sidemenu #

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 the sidemenu ———-/
cc-sidebar-left-list cc-banner-ad {
display:none!important;
}

Show mobile banner for company profiles

/———- Show mobile banner for company profiles———-/
.company-detail__background-strip::before {
content: unset!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;
}

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 ———-/

xxxxxxxx

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;
}
}

White on White Fix #

Please note this makes all icons and elements black

/———- White on White Fix ———–/

.app__split-pane.collapsed cc-agenda-card i.material-icons {
color: #000 !important;
}

cc-activity-feed-list-page * {
color: black !important;
}

.agenda-card__expand-button i.material-icons {
color: black !important;
}

cc-activity-feed-list-page i.material-icons {
color: black !important;
}

cc-meeting-booking-page {
–cc-accent-color: black !important;
–cc-primary-color: grey !important;
}

cc-poll cc-rating-poll i.material-icons {
color: black !important;
–cc-accent-color: black !important;
}

.poll__option ion-button.selected {
background: black !important;
–background: black !important;
color: white !important;
}

ion-alert * {
color: black !important;
–cc-accent-color: black !important;
}

.cc-agenda-schedule-list cc-schedule-list cc-agenda-card ion-card i.material-icons {
color: black !important;
–color: black !important;
–cc-accent-color: black !important;
}

cc-chat-panel-footer * {
color: black !important;
}

mux-player::part(captions){
–media-text-color: black !important;
}

.radio-checked {
filter: brightness(0);
}

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! 

Get started with a CSS tutorial – or get in contact with us today to find out how we can help bring your brand to life with a well designed virtual platform. #

#