Comments (7)
i indeed custumize alot of things, so just providing the theme is not that necessary from my point of view, therefore i descided to write down some steps, so you can do the same like me:
- Download / Clone / Fork the repo (f.ex. into p2-inc/keycloak-themes)
- customize the components (keywind is created component-based, so you can change some behavior for all sites with one change:
- go to document.ftl and add: (support for favicon & stylesheet)
<link rel="icon" href="${url.resourcesPath?keep_before("/resources")}/realms/${realm.name}/assets/img/favicon" />
<link href="${url.resourcesPath?keep_before("/resources")}/realms/${realm.name}/assets/css/login.css" rel="stylesheet" />
this is possible, because your themese-provider works globaly and therefore here as well. (from my pov)
=> just add all your customization options f.ex. into the header like you already did with your default theme.
- Build the related files (npm run build) => required, because the tailwind-classes are otherwise not present in the latest build
- Adding the theme to META_INF
- Package as jar file with your existing theme as normal (therefore the jar will import the options for keycloak and 2 different themes to choose from)
fyi: what did we customize:
- adding background video as new component in template.ftl https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/
- adding a background logo (also an abstract component)
- adding footer-component, which takes the existing languageSelector component as nested input and displays additional links (data-security & impress with links to the language aware websites, which shows the content [different links for each language])
here are some ideas, which options could enhance the keywind theme defined by keycloak-admin-ui or your default theme even further:
- additional links (f.ex. for data-security & impress link (required in EU)
- background image OR background video
- background logo (maybe with positioning options)
- adding custom css-classes like in your existing theme (+adding them into a Readme.md for better startup for users)
from keycloak-themes.
That's a neat suggestion. I hadn't seen Keywind before.
To what end are you suggesting we include this? As an example theme others can extend? As a theme bundled with this extension? For our hosted service?
from keycloak-themes.
you already had an atribute based theme solution which is quite nice and can be used with this theme to unlock even more.
like an attribute enabled keywind.
i suggest to include this in the hosted service and in the open-source docker image as part of p2-inc/keycloak-themes.
Maybe as an additionaly selectable theme, to support the old one as well.
from keycloak-themes.
@xgp i already support the icon and the custom styles in my instance, so its pretty easy to get started with this.
from keycloak-themes.
Got it. Thanks for the suggestion. If you can share your implementation, I'd be happy to add it.
from keycloak-themes.
I'll link this from the README. TY @paulwer
from keycloak-themes.
i guess if you add it as an additional theme this could be realy usefull for all. ❤️
from keycloak-themes.
Related Issues (12)
- /auth/ should not be hardcoded HOT 2
- Multiprovider theme HOT 1
- Theme configuration lost after image change HOT 1
- [Question] Email localization HOT 2
- Documentation of template and message keys
- Add mustache template support
- Email subject override for Attributes theme
- A vast amount of folders are created in /tmp causing inode starvage HOT 5
- Add the `magic-link-continuation-email.ftl` template HOT 2
- Setting Email theme only works for master realm. HOT 12
- Request: Terms and Conditions HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from keycloak-themes.