February 02, 2017

Breaking Changes to Custom CSS

We have updated the HTML in our new widget and it will affect anyone using custom CSS.

We have removed the h1, h2, and h3 tags from the new widget and replaced them with a generic class. The new classes are .cloudsponge-h1, .cloudsponge-h2 and .cloudsponge-h3.

Before deploying the change, we patched the widget for any customers using the CSS option. This preserves their style changes so that our deploy didn’t break their customizations.

What you need to do

If you are using the css option, you should update your custom stylesheet as soon as possible to ensure compatibility moving forwards. Here’s how to update your stylesheet.

In general, you need to find all hx classes and replace them with the new .cloudsponge-hx. Specifically, you should s/\b(h[123])\b/.cloudsponge-$1/g.

Here’s a list of the classes that have been renamed. There may be multiple instances of each class as some are overridden for different screen sizes.

Old Class Name New Class Name
#cloudsponge-address-book .cloudsponge-topbar h1 #cloudsponge-address-book .cloudsponge-topbar .cloudsponge-h1
#cloudsponge-address-book .cloudsponge-login-form h2 #cloudsponge-address-book .cloudsponge-login-form .cloudsponge-h2
#cloudsponge-address-book .cloudsponge-login-form h2 em #cloudsponge-address-book .cloudsponge-login-form .cloudsponge-h2 em
#cloudsponge-address-book .cloudsponge-login-form h2 em.cloudsponge-icon #cloudsponge-address-book .cloudsponge-login-form .cloudsponge-h2 em.cloudsponge-icon
#cloudsponge-address-book .cloudsponge-login-form h2 span #cloudsponge-address-book .cloudsponge-login-form .cloudsponge-h2 span
#cloudsponge-address-book ul.cloudsponge-contacts-list>li h3 #cloudsponge-address-book ul.cloudsponge-contacts-list>li .cloudsponge-h3
#cloudsponge-address-book ul.cloudsponge-contacts-list>li.cloudsponge-no-name h3 #cloudsponge-address-book ul.cloudsponge-contacts-list>li.cloudsponge-no-name .cloudsponge-h3

Why The Face?

It’s been pointed out that the h1 tags on the new widget are affecting SEO results, and so we’re eager to fix that.

If you have any concerns, contact us at support@cloudsponge.com and we’ll help.

Graeme Rouse, CTO at CloudSponge

Follow @thunderouse

Try CloudSponge for free in your
testing environment

Get Started

Have a questions or prefer a guided tour?
Schedule a consultation with our Founder.