{"id":24527944,"url":"https://github.com/austincunningham/raincatcher-keycloak-theme","last_synced_at":"2025-04-14T15:52:45.468Z","repository":{"id":50394614,"uuid":"92734289","full_name":"austincunningham/raincatcher-keycloak-theme","owner":"austincunningham","description":":iphone: Create a custom theme for Keycloak Login screen to work with a mobile application","archived":false,"fork":false,"pushed_at":"2020-05-20T14:48:20.000Z","size":349,"stargazers_count":62,"open_issues_count":0,"forks_count":27,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T04:41:42.502Z","etag":null,"topics":["css","keycloak","mobile","stylesheets"],"latest_commit_sha":null,"homepage":"https://austincunningham.ddns.net/2017/themekeycloak","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/austincunningham.png","metadata":{"files":{"readme":"readme.adoc","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-29T11:37:58.000Z","updated_at":"2025-02-28T08:31:46.000Z","dependencies_parsed_at":"2022-09-04T18:22:19.705Z","dependency_job_id":null,"html_url":"https://github.com/austincunningham/raincatcher-keycloak-theme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austincunningham%2Fraincatcher-keycloak-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austincunningham%2Fraincatcher-keycloak-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austincunningham%2Fraincatcher-keycloak-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austincunningham%2Fraincatcher-keycloak-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/austincunningham","download_url":"https://codeload.github.com/austincunningham/raincatcher-keycloak-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248911100,"owners_count":21182036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","keycloak","mobile","stylesheets"],"created_at":"2025-01-22T06:33:25.804Z","updated_at":"2025-04-14T15:52:45.438Z","avatar_url":"https://github.com/austincunningham.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[[theme-for-raincatcher-for-keycloak]]\n= Theme for Raincatcher for Keycloak\n\nimage:https://cdn-images-1.medium.com/max/800/0*lMzC1bK4bQulI6GB.[raincatcher\ntheme]\n\n\n[[usage]]\n== Usage\n\nGit clone this repo in the Themes directory of your keycloak instance to use\nthis theme\n\nTo select the theme you need to login to your keycloak admin console. Go to\nRealms and themes and select from dropdown.\n\nimage:https://cdn-images-1.medium.com/max/1000/0*49oKObDvfQyfw5WH.[keycloak\nthemes 2017-05-30 12-08-02.png]\n\n[[configure-your-own-theme]]\n== Configure your own Theme\n\nIt is recommend that you make a copy of an existing theme and edit it. In order\nto be able to edit the theme and see changes without restarting the keycloak server\nyou need to edit the standalone.xml file on your keycloak server to disable caching.\n\nlocated here\n\n....\n./standalone/configuration/standalone.xml\n....\n\nMake the following changes to standalone.\n\n[source,xml]\n----\n\u003ctheme\u003e\n    \u003cstaticMaxAge\u003e-1\u003c/staticMaxAge\u003e\n    \u003ccacheThemes\u003efalse\u003c/cacheThemes\u003e\n    \u003ccacheTemplates\u003efalse\u003c/cacheTemplates\u003e\n    ...\n\u003c/theme\u003e\n----\n\nTo change the title for your login and register user screen you can edit the CSS\nlocated at\n\n....\n./raincatcher-keycloak-theme/login/resources/css/styles.css\n....\n\nMake changes here to change the title\n\n[source,css]\n----\n/* Change content to change the title of the page*/\ndiv#kc-header::after {\n    content: 'FeedHenry Work Force Management';\n    font-size: 40px;\n    line-height: 50px;\n    margin-bottom: 15px;\n}\n\n/*title banner size and colour*/\ndiv#kc-header {\n    width:100%;\n    background-color: rgb(40,53,147);\n    padding-top: 2.5em;\n    padding-bottom: 2.5em;\n    padding-right: 2em;\n    padding-left: 3em;\n}\n----\n\nTo change your background colour or set a background image\n\n[source,css]\n----\nbody {\n    background-color: rgb(63,81,181);\n    /*background-image: url('../img/bkgrnd.jpg');*/\n    background-position: center center;\n    background-attachment: fixed;\n    background-size: cover;\n    background-repeat: no-repeat;\n\n    color: #fff;\n    font-family: sans-serif;\n    text-shadow: 0px 0px 10px #000;\n    margin: 0px;\n}\n----\n\nTo change the login and fields text\n\n[source,css]\n----\n/* label change Username, Password text*/\ndiv#kc-form label {\n    color: rgba(255, 255, 255, 0.7) !important;\n    display: block;\n    font-size: 30px;\n}\n----\n\nTo change the fields look and feel\n\n[source,css]\n----\n/*fields*/\ninput[type=text], input[type=password] {\n    color: #ddd;\n    font-size: 30px;\n    margin-bottom: 20px;\n    background: none;\n    border-width: 0 0 1px 0;\n    padding: 12px;\n    width: 95%;\n}\n----\n\nTo change the login and register button\n\n[source,css]\n----\n/*button*/\ninput[type=submit] {\n    border: none;\n    border-radius: 3px;\n    background-color: rgb(40,53,147);\n    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);\n    color: rgba(0,0,0,0.6);\n    font-size: 30px;\n    color: white;\n    text-transform: uppercase;\n    padding: 20px;\n    margin-top: 3em;\n    width: 98%;\n}\n----\n\nMore information see Keycloak Themes documentation http://www.keycloak.org/docs/latest/server_development/index.html#_themes[here]\n\n[[docker-demo-image]]\n== Docker Demo Image\n\nPull my image here \n[source,bash]\n----\n# Keycloak image with this theme applied\ndocker pull austincunningham/keycloak-raincatcher-theme\n# Run with\ndocker run -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin austincunningham/keycloak-raincatcher-theme:tryme\n----\n\nSee this https://austincunningham.ddns.net/2020/changekeycloakdockertheme[blog] about how to apply a theme to the Keycloak docker image. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faustincunningham%2Fraincatcher-keycloak-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faustincunningham%2Fraincatcher-keycloak-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faustincunningham%2Fraincatcher-keycloak-theme/lists"}