Congratulations! You've successfully added the login portal to your website. But now you've just discovered that:

You can't see the labels because your background's black as well,
Or the default text for your site is white, and you can't see the email address that's being typed in,
Or you just want it to fit in with the rest of your site.

Great news! This article will help you customise the login form so suit your needs! The instructions below are quite technical as it involves editing code on your website, so if you have a web designer/developer please share this article with them and they'll know what to do. :)

Identifying the parts

First of all, here are the different modules, or parts of the login integration form:

Where to add the code

You can make changes to each of these elements using different CSS properties. First, you'll need to add a section within the <head></head> tags. Since you've already integrated the portal with your site, you should be familiar with the section, and your code should already look something like this:

<head>
      <script type="text/javascript" src="https://ptminder.com/website/extform/?guid=<YOUR_GUID_HERE>=&st[]=sign_up&st[]=forgot_password&st[]=keep_logged">
      </script>
</head>

So all you need to do is add a <style> section, in between the <head></head> tags, but OUTSIDE of the <script></script> tags that you added during integration. Like this:

<head>
      <script type="text/javascript" src="https://ptminder.com/website/extform/?guid=<YOUR_GUID_HERE>=&st[]=sign_up&st[]=forgot_password&st[]=keep_logged">
      </script>
      <style>
           /*CUSTOMIZATION CODE GOES HERE*/
      </style>
</head>

Changing the properties

Now the fun begins! We can add the modules of the login form (see table above) in the <style> section, then set different properties for them.
For example:

<head>
      <script type="text/javascript" src="https://ptminder.com/website/extform/?guid=l6SVqaLlytrXyM8=&st[]=sign_up&st[]=forgot_password&st[]=keep_logged">
      </script>
      <style>
         body {background-color: red; color: white;}             
         #ptminder-client-forgot-password-button {color: white !important;}          #ptminder-client-signup-button {color: white !important;} 
      </style>
</head>

Some properties that you may find useful:

background-color - This changes the color of the background for a particular element
color - changes the font color for the element
font - changes the font for the element
font-size - changes the font size for the element
text-align - changes the text alignment for the element

Please check the reference articles for more options and particulars about each setting.

IMPORTANT NOTES

Since the modules already have default values set for them, it is vital to add the code !important to each property so that it overrides the default setting.
The body and the form sections are different from each other.
The "Sign In" button is treated a bit differently, since it is a command element, and the format to make changes to it is (can also be found under 'Settings' > 'Client Area' > 'Website Integration' on your PTminder account):

#ptminder-client-login input[type="submit"]{ background-color: green !important; }

Reference Material

Also, here are some support references you might find useful if you want to get more creative on your own:

CSS Tutorials - If you're feeling adventurous, or want to learn more about CSS.
CSS Reference - An extensive list of CSS reference materials, including a properties index, and lists of values for properties, and many other useful resources.
Tryit Editor - Take it for a spin before making it live on your site!

And as always, if you need any further assistance, you can always refer to our dedicated Support Team who are ready to help, 24 hours a day, 7 days a week.

Happy Editing!