So you love your Hubb 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 Hubb'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 accurate application to avoid causing any issues elsewhere in your event.
To illustrate how to accurately target CSS in Hubb, lets 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-color: white !important; |
Hubb 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 Hubb was designed with this in mind, and most pages have a 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 lets start our CSS there
app-sponsors {
border-color: 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-color: 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 Docuemnt Your CSS Changes
Document your changes well so that Hubb can help troubleshoot if needed!
Lets 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-color: 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 Hubb 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 Hubb 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 aren't built in options.
Lets start with this custom page that is meant to be a picture of a present with patterns in the background, but when we put it on the custom page its a little bland.

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

Much better!
Making in-line edits like this are 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 |
If you have any questions please feel free to contact us at support@hubb.me