Customizing Your Event with CSS

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

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, lets 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 propery 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
Lets re-check that property, then click on the hexadecimal color value (in this case #49565c) and lets 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, lets write our CSS Since the branding file will sit further away (in the codes point of view) we will want to mark that change as important to override the existing style.	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: 

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="672" height="517"/> </p>
So lets take the parent paragraph element and get it ready for our CSS changes by adding "style="" "	<p style=""> <img src="[URL]" alt="Present" width="672" height="517"/> </p>
Lets go for a magenta background, in this case #f05d87	<p style="background-color: #f05d87;"> <img src="[URL]" alt="Present" width="672" height="517"/> </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 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

If you have any questions please feel free to contact us at support@hubb.me