Customizing Your Event with CSS

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

Go to the page in question	[event].hubb.me/fe/schedule-builder/sponsors in this case
Right-click on the item you want to change and select "Inspect" in Chrome or Edge (for Safari or Firefox-specific instructions please see this article from DevMountain
Now to make sure we have the right element selected, let's look at the "Styles" panel that opens up with the Elements tab
Since we can see the Border property is set here, to make sure it is the thing we want to change we can uncheck the property in the "styles" area to preview the page without that rule
As we can see, unchecking it removed the border entirely, so we have the right element and the property we want to change
Let's re-check that property, then click on the hexadecimal color value (in this case #49565c) and let's edit that to be white (you can use the hex value '#ffffff' or since its a standard color you can use the word 'white')
With that edit, we can see the white border is now where we want it
So we have the right element and the change that we want to make, let's write our CSS Since the branding file will sit further away (in the code's point of view) we will want to mark that change as important to override the existing style.	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: 

While in edit mode on your custom page, click on "Tools" > "<>Source Code"
When we open it up we see that the present is wrapped inside a "p" element (paragraph), this is standard for the WYSIWYG editor. We are leaving out the image URL to simplify this example.	<p> <img src="[URL]" alt="Present" width="auto" height="auto"/> </p>
So let's take the parent paragraph element and get it ready for our CSS changes by adding "style="" "	<p style=""> <img src="[URL]" alt="Present" width="auto" height="auto"/> </p>
Lets go for a magenta background, in this case #f05d87	<p style="background-color: #a590ab;"> <img src="[URL]" alt="Present" width="auto" height="auto"/> </p>
Click "OK" at the bottom of the source code viewing tool.
Click "Save" at the top-right or bottom-left of the custom page.

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