So you love your Event Cloud event site but you want to tweak a few details? Well, thankfully your event site has an easy way to add a CSS branding file!
Even for experienced developers, applying CSS in the right way is vital to ensuring your code plays nice with Event Cloud's core code!
This article covers best practices when adding to that branding file or editing the look of a custom page using the WYSIWYG editor.
1) Target your CSS to as specific an element as possible
Specifying CSS Targets
CSS is a powerful tool, but like anything powerful, it requires an accurate application to avoid causing any issues elsewhere in your event.
To illustrate how to accurately target CSS in Event Cloud, let's change the Sponsors page (in dark theme) so there will be a white border around the sponsor cards rather than a light grey border as shown below:

Finding the right element to change
|
[event].hubb.me/fe/schedule-builder/sponsors in this case |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
border: white !important; |
Event Cloud Specific Targeting
So if you know a little about CSS you should know about class targeting, but since we only want the change to affect this page, there are some additional targeting steps we can do to make sure we don't accidentally change other areas of the site.
Thankfully Event Cloud was designed with this in mind, and most pages have higher-level elements that usually follows the naming convention of 'app-[pagename]'
For our example (as shown below) we can look higher in the element path and see that indeed this page has the element 'app-sponsors'.
So let's start our CSS there
app-sponsors {
border: white !important;
}
However, that will change all borders in this whole page to be white, rather than just that one.
This element has a friendly class name to use of 'sponsorLogo' and we know it is a link (represented by an 'a' element) that is a distant child of the app-sponsors element. So we can write the CSS as
app-sponsors a.sponsorLogo {
border: white !important;
}
To apply this to your event you will need to save this to your branding file, but before we do...
2) Use Comments to Document Your CSS Changes
Document your changes well so that Event Cloud can help troubleshoot if needed!
Let's add some comments above this CSS so that anyone who comes in after us will know what we changed and why. Be as descriptive as possible, anyone troubleshooting the CSS in the future will thank you!
This can be done in a CSS file by wrapping text in /* */, so the full code we are going to add to the branding file should be:
/* Changed color of border around sponsors in the sponsor listing from grey to white */
app-sponsors a.sponsorLogo {
border: white !important;
}
Now after we have saved that as an updated branding file and selected it in our event branding options pane, we can go back to that page and see our final result:

Perfect!
And just to be sure we can click into one of the sponsors to make sure the border change hasn't affected the other area this image is displayed.

After seeing how to adjust CSS on something built into Event Cloud you might be wondering "But what about custom pages?"
3) Using In-Line or Internal CSS CSS Whenever Possible
Avoid using the Global CSS stylesheet whenever possible. When designing custom pages, it is best to use internal or in-line CSS using the Source Code editor of the WYSIWYG editor on a custom page. This will ensure that any CSS applied only impacts your custom development, rather than the entirety of the Event Cloud application.
When making your custom page you will use the What You See is What You Get (WYSIWYG) editor, but there is actually a way to look directly at the source code of the editor and add CSS that isn't built-in options.
Let's start with the notified logo. We want to showcase this on a custom page. Unfortunately, when we apply this logo we can't read the white text against the background.

Turns out when the designer made it, they made it expecting a background color to be applied!
Let's do that via CSS in the editor:
|
![]() |
|
<p> |
|
<p style=""> |
|
<p style="background-color: #a590ab;"> |
|
![]() |
|
![]() |
Now when we go and view the custom page we get:

Much better!
Making in-line edits like this is not only the safest way to add CSS to a custom page without affecting anything else in your Event but make making/previewing these changes much easier since you won't need to upload a CSS file with each change!
Additional Resources
Here are some helpful links to learn more about CSS
Finding out if a CSS property works on specific browsers | Can I Use |
Exploring different properties you can edit with CSS | W3 Schools |
How to target specific elements/classes with CSS | Mozilla Developer Documentation |
Comments
Please sign in to leave a comment.