title: Keycloak custom theme reject login.ftl
body: <p>I create custom keycloak login screen. </p>
  
  <p>I download from keycloak web page  </p>
  
  <blockquote>
    <p>Server    Standalone server distribution</p>
  </blockquote>
  
  <p>And copy from <code>keycloak-8.0.2\themes\keycloak</code> to <code>C:\xx\configuration\keycloak\theme\my-theme</code>
  And there I open <code>login</code> folder and there I have </p>
  
  <pre><code>- theme.properties
  - resources
  </code></pre>
  
  <p>In resources, I change <code>login.css</code> and everything is working, I can change colors, img etc... </p>
  
  <p>Until now, in folder <code>login</code> I didn't have <code>login.ftl</code> and I take and copy one from <code>keycloak</code> downloaded files. 
  But now, when I try to load my page I get </p>
  
  <pre><code>This page isn’t working 
  localhost.test.net is currently unable to handle this request.
  HTTP ERROR 500
  </code></pre>
  
  <p>If I remove this file, everything is working.</p>
  
  <p>I need this file to change some things in html</p>
  
  <p>here is <code>theme.properties</code> file</p>
  
  <pre><code>parent=base
  import=common/keycloak
  
  styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/zocial/zocial.css css/login.css
  meta=viewport==width=device-width,initial-scale=1
  
  kcHtmlClass=login-pf
  kcLoginClass=login-pf-page
  
  kcLogoLink=http://www.keycloak.org
  
  kcLogoClass=login-pf-brand
  
  kcContainerClass=container-fluid
  kcContentClass=col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3
  kcContentWrapperClass=row
  
  kcHeaderClass=login-pf-page-header
  kcFeedbackAreaClass=col-md-12
  kcLocaleClass=col-xs-12 col-sm-1
  kcAlertIconClasserror=pficon pficon-error-circle-o
  
  kcFormAreaClass=col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2
  kcFormCardClass=card-pf
  kcFormCardAccountClass=login-pf-accounts
  kcFormSocialAccountClass=login-pf-social-section
  kcFormSocialAccountContentClass=col-xs-12 col-sm-6
  kcFormSocialAccountListClass=login-pf-social list-unstyled login-pf-social-all
  kcFormSocialAccountDoubleListClass=login-pf-social-double-col
  kcFormSocialAccountListLinkClass=login-pf-social-link
  kcFormHeaderClass=login-pf-header
  
  kcFeedbackErrorIcon=pficon pficon-error-circle-o
  kcFeedbackWarningIcon=pficon pficon-warning-triangle-o
  kcFeedbackSuccessIcon=pficon pficon-ok
  kcFeedbackInfoIcon=pficon pficon-info
  
  
  kcFormClass=form-horizontal
  kcFormGroupClass=form-group
  kcFormGroupErrorClass=has-error
  kcLabelClass=control-label
  kcLabelWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
  kcInputClass=form-control
  kcInputWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
  kcFormOptionsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
  kcFormButtonsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
  kcFormSettingClass=login-pf-settings
  kcTextareaClass=form-control
  kcSignUpClass=login-pf-signup
  
  
  kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-5 details
  
  ##### css classes for form buttons
  # main class used for all buttons
  kcButtonClass=btn
  # classes defining priority of the button - primary or default (there is typically only one priority button for the form)
  kcButtonPrimaryClass=btn-primary
  kcButtonDefaultClass=btn-default
  # classes defining size of the button
  kcButtonLargeClass=btn-lg
  kcButtonBlockClass=btn-block
  
  ##### css classes for input
  kcInputLargeClass=input-lg
  
  ##### css classes for form accessability
  kcSrOnlyClass=sr-only
  </code></pre>
  
  <p>And here is <code>login.ftl</code></p>
  
  <pre><code>&lt;#import "template.ftl" as layout&gt;
  &lt;@layout.registrationLayout displayInfo=social.displayInfo displayWide=(realm.password &amp;&amp; social.providers??); section&gt;
      &lt;#if section = "header"&gt;
          ${msg("doLogIn")}
      &lt;#elseif section = "form"&gt;
      &lt;div id="kc-form" &lt;#if realm.password &amp;&amp; social.providers??&gt;class="${properties.kcContentWrapperClass!}"&lt;/#if&gt;&gt;
        &lt;div id="kc-form-wrapper" &lt;#if realm.password &amp;&amp; social.providers??&gt;class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"&lt;/#if&gt;&gt;
          &lt;#if realm.password&gt;
              &lt;form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post"&gt;
                  &lt;div class="${properties.kcFormGroupClass!}"&gt;
                      &lt;label for="username" class="${properties.kcLabelClass!}"&gt;&lt;#if !realm.loginWithEmailAllowed&gt;${msg("username")}&lt;#elseif !realm.registrationEmailAsUsername&gt;${msg("usernameOrEmail")}&lt;#else&gt;${msg("email")}&lt;/#if&gt;&lt;/label&gt;
  
                      &lt;#if usernameEditDisabled??&gt;
                          &lt;input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" disabled /&gt;
                      &lt;#else&gt;
                          &lt;input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}"  type="text" autofocus autocomplete="off" /&gt;
                      &lt;/#if&gt;
                  &lt;/div&gt;
  
                  &lt;div class="${properties.kcFormGroupClass!}"&gt;
                      &lt;label for="password" class="${properties.kcLabelClass!}"&gt;${msg("password")}&lt;/label&gt;
                      &lt;input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" /&gt;
                  &lt;/div&gt;
  
                  &lt;div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}"&gt;
                      &lt;div id="kc-form-options"&gt;
                          &lt;#if realm.rememberMe &amp;&amp; !usernameEditDisabled??&gt;
                              &lt;div class="checkbox"&gt;
                                  &lt;label&gt;
                                      &lt;#if login.rememberMe??&gt;
                                          &lt;input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" checked&gt; ${msg("rememberMe")}
                                      &lt;#else&gt;
                                          &lt;input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"&gt; ${msg("rememberMe")}
                                      &lt;/#if&gt;
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/#if&gt;
                          &lt;/div&gt;
                          &lt;div class="${properties.kcFormOptionsWrapperClass!}"&gt;
                              &lt;#if realm.resetPasswordAllowed&gt;
                                  &lt;span&gt;&lt;a tabindex="5" href="${url.loginResetCredentialsUrl}"&gt;${msg("doForgotPassword")}&lt;/a&gt;&lt;/span&gt;
                              &lt;/#if&gt;
                          &lt;/div&gt;
  
                    &lt;/div&gt;
  
                    &lt;div id="kc-form-buttons" class="${properties.kcFormGroupClass!}"&gt;
                        &lt;input type="hidden" id="id-hidden-input" name="credentialId" &lt;#if auth.selectedCredential?has_content&gt;value="${auth.selectedCredential}"&lt;/#if&gt;/&gt;
                        &lt;input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/&gt;
                    &lt;/div&gt;
              &lt;/form&gt;
          &lt;/#if&gt;
          &lt;/div&gt;
          &lt;#if realm.password &amp;&amp; social.providers??&gt;
              &lt;div id="kc-social-providers" class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"&gt;
                  &lt;ul class="${properties.kcFormSocialAccountListClass!} &lt;#if social.providers?size gt 4&gt;${properties.kcFormSocialAccountDoubleListClass!}&lt;/#if&gt;"&gt;
                      &lt;#list social.providers as p&gt;
                          &lt;li class="${properties.kcFormSocialAccountListLinkClass!}"&gt;&lt;a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId}"&gt; &lt;span&gt;${p.displayName}&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/#list&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/#if&gt;
        &lt;/div&gt;
      &lt;#elseif section = "info" &gt;
          &lt;#if realm.password &amp;&amp; realm.registrationAllowed &amp;&amp; !usernameEditDisabled??&gt;
              &lt;div id="kc-registration"&gt;
                  &lt;span&gt;${msg("noAccount")} &lt;a tabindex="6" href="${url.registrationUrl}"&gt;${msg("doRegister")}&lt;/a&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/#if&gt;
      &lt;/#if&gt;
  
  &lt;/@layout.registrationLayout&gt;
  </code></pre>