Subscription Preference Formatting

[SDrayton]

How can I edit the sizing and/or font of the buttons and checkboxes, and other automatically generated components of the modules on my Subscription Preferences and Unsubscribe pages? I'm trying to make it look nicer as the default is a bit plain looking.

Cheers!

[SDrayton]

Cracking cheers for that both! Really helpful

[Anton · Accepted solution]

Hi @SDrayton, 

you can style everything - as you might think - with CSS. 🙃

The preference center form got it's own CSS ID so everything what's inside the form(header, checkboxes, button...) can be styled individualy only on this certain page. 

For because of user experience reasons you should stick to the general form styling of your page. 

Here some classes that I often use when applying some custom styling to the preference page

#email-prefs-form .page-header h2{ place your styling for the pref. center headline here }

#email-prefs-form label{ styling for the checkbox label }

#email-prefs-form input[type="submit"], 
#email-prefs-form input[type="submit"].hs-button, 
#email-prefs-form a.cta_button{ every "button related" styling }

--- If you use the boilerplate it has the "preferenceCenter" class applied to the preference center template. You can use it or add your own class or default "#email-prefs-form" ---

.preferenceCenter input[type="checkbox"]{ styling for checkboxes }

.preferenceCenter input[type="radio"]{ styling for checkboxes }

In general the best way to find out the applied classes is to inspect the element with the "inspect" function of your browser and apply your styling in the CSS which will load as the last CSS. 

If you plan something "extra-nice" for checkboxes/radio buttons like I've did for all pop-up forms here: Thought Leader Systems GmbH(click on "Jetzt kostenlose Beratung anfordern!" in the content) you can start with something like this codepen - BUT you'll need to change a lot class wise since HubSpot got it's own form classes. 

hope this helps. 

best,

Anton

[dennisedson]

Hey @SDrayton 

Throwing @Anton at this one for you 😀