diff --git a/README.md b/README.md index 03f842c16..95b3a32f7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # :wind_face: Keywind -Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) and [Alpine.js](https://github.com/alpinejs/alpine). +Keywind is a component-based Keycloak Login Theme with build-in customization options. +Built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) and [Alpine.js](https://github.com/alpinejs/alpine). ![Preview](./preview.png) @@ -29,6 +30,11 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http - WebAuthn Error - WebAuthn Register +### Customization Options + +- Background Video / Image +- Company Logo in Background + ### Identity Provider Icons - Apple @@ -84,6 +90,11 @@ module.exports = { Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration). +### Build-In Customizations + +Keywind ships with a few easy to use customization options. Customize these settings by editing the theme properties before deployment: +`theme/mytheme/login/theme.properties` + ### Components You can update Keywind components in your own child theme. For example, create a copy of the `body` component and change the background: diff --git a/theme/keywind/login/components/atoms/background.ftl b/theme/keywind/login/components/atoms/background.ftl new file mode 100644 index 000000000..017835857 --- /dev/null +++ b/theme/keywind/login/components/atoms/background.ftl @@ -0,0 +1,13 @@ +<#macro kw> + <#if properties.topLeftLogoUrl??> + + + <#if properties.backgroundImageUrl??> + + + <#if properties.backgroundVideoUrl??> + + + diff --git a/theme/keywind/login/components/atoms/body.ftl b/theme/keywind/login/components/atoms/body.ftl index dcc94a06e..bb031f8ac 100644 --- a/theme/keywind/login/components/atoms/body.ftl +++ b/theme/keywind/login/components/atoms/body.ftl @@ -1,5 +1,5 @@ <#macro kw> - + <#nested> diff --git a/theme/keywind/login/components/atoms/container.ftl b/theme/keywind/login/components/atoms/container.ftl index 34ead183c..17922e4d5 100644 --- a/theme/keywind/login/components/atoms/container.ftl +++ b/theme/keywind/login/components/atoms/container.ftl @@ -1,5 +1,5 @@ <#macro kw> -
+
<#nested>
diff --git a/theme/keywind/login/theme.properties b/theme/keywind/login/theme.properties index 5e2a4920b..94febc426 100644 --- a/theme/keywind/login/theme.properties +++ b/theme/keywind/login/theme.properties @@ -2,3 +2,9 @@ parent=base styles=dist/index.css scripts=dist/index.js + +# Customization Section +topLeftLogoUrl= +backgroundImageUrl= +backgroundVideoUrl= +backgroundVideoType=video/mp4