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
/*---------- Font Import ----------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
html, body, p, textarea, input {
font-family: 'Montserrat', sans-serif!important;
--ion-font-family: 'Montserrat', sans-serif!important;
}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 Background Image Behind App
/*---------- Set Background Image ----------*/
.app-content,
.cc-cms-body-content {
background-color:!important;
background-image:url("") !important;
background-position:50% 50%!important;
background-size:cover!important;
background-repeat:no-repeat!important;
}
@media (max-width: 420px) {
.app-content,
.cc-cms-body-content {
background-image:url("") !important;
}
}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
The problem here is that we can only have one default.
The two
/*--------- 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;}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
Our design team loves getting their hands dirty