How to create a new template in CLC

Keeping tabs on existing templates

• Mark as fixed the templates here: https://github.com/ColorlibHQ/colorlib-login-customizer/issues/9
• Get from here: https://colorlib.com/wp/cat/login-forms/

Creating a new template in CLC is very easy.

• Open up your favourite code editor
• Locate the following file: colorlib-login-customizer/includes/lib/class-colorlib-login-customizer-customizer.php
• Inside the function settings_fields() is where you can start adding your templates, starting with L71 (https://github.com/puikinsh/colorlib-login-customizer/blob/master/includes/lib/class-colorlib-login-customizer-customizer.php#L71)
• The default array holds all the options that a template supports: https://github.com/puikinsh/colorlib-login-customizer/blob/master/includes/lib/class-colorlib-login-customizer-customizer.php#L72-L141

Pay attention

• Even though some templates don't need certain array values, you should still add them. This is visible especially when switching through templates and seeing that values from one template are being passed to the other. This is happening because one of the templates is overwriting the others values.
• You can use custom CSS to address different things that can't be done within the plugin.

😢 Unfortunately, the login screen in WordPress doesn't have too many filters/hooks and right now, we're fixing what we can with Custom CSS. In the future, we will fix them via JS and inlined CSS.

Notes:

• try looking at template-03 and template-04 as an example: https://github.com/puikinsh/colorlib-login-customizer/blob/master/includes/lib/class-colorlib-login-customizer-customizer.php#L163-L248
• color pickers support RGBA/HEX format
• setting values to none instead of 0 is recommended when you don't need/want that certain value to be present.
• the form is wrapped in a custom CSS class entitled ml-container, the form is wrapped in a CSS container named ml-form-container. Use these to enforce your CSS selectors.
• template previews (in the sidebar), need a screenshot of: 550px x 385px
• for background images, try using images of at least 1080p
• all height/width and otherwise fields that allow you to enter values should be in px