Repository navigation
Problems with custom theming #51746
Replies: 3 comments
|
Your findings are right so here is the short mental model Resource paths parent and import take a theme name not a path Per type parents differ because the shipped themes differ Why import broke the favicon Unpack Your example repo is a good base and the docs would benefit from exactly that page |
|
hi, thanks for sharing this. I was stuck in a similar scenario for a couple days. Ultimately I painful trial and error of updating a line in theme.properties, repackaging, relaunching, etc was what for me somewhere. The current official docs only created more confusion, the different forums and sites offered just a bit more info to tie everything together. I really only wanted 3 changes on the login page:
the color palette was relatively easy as the css files are processed as they come. Overriding some of the patternfly variables was enough as the login page has very few locations where the palette is used. But really that's all i wanted, not a big redesign. For favicons. I intentionally try to not re-ship well-hosted resources, so I wanted to use my org official favicon and logos urls. This meant having to redo an FTL file, but it wasn't obvious which one. In many sites/docs is suggested to copy the login.ftl file and make changes there, but in reality it's split between template.ftl and login.ftl . It started to look like a lot of work so I tried to package them as instructed in the docs but no luck. Given the time and effort already invested I went back to the FTL files. For my goals above, the spots in the site would be exclusively inside template.ftl , but as much as I tried, it would not pick it up. I made a guess that the login.ftl is still the one on the parent theme and so it is requisting the parent "include" pointing at the parent's template.ftl and not mine. This seems to have worked. Like @JasonGoemaat and many others. There are incorrect suggestions in the official site, and the work between keycloak and keycloak.v2 has created confusion and awkard and incorrect suggestions accross sites that try to tackle this. There's a full feature react utility to ease the pain: https://docs.keycloakify.dev/ . It seems to work and looks like the only choice out there if a team is looking to fully re-design the different pages. But really, I just wanted a quick remap of a couple items base don keycloak.v2. The amount of reverse engineering and people second guessing themselves is too high. If I could get a choice, I would certainly start by cleaning up the official docs. They seem to tackle completely different scenarios on each section, some not compatible between them. A minimal example that makes small changes on the parent, using the latest version, would be great. |
|
Hey, I think keycloak theme editor would suit your use case. You can also run it locally and add or override pages. If you have any questins lmk. :) |
Uh oh!
There was an error while loading. Please reload this page.
The page on customizing themes is complicated and could use a good re-working. It took me some time to figure out why what I was trying wasn't working.
As a simple example I wanted to change the favicon and the sample shows this:
It doesn't specify that the file must be 'themes/custom/resources/favicon/favicon.ico' though, it could be explained better that all paths are resolved relative to that folder.
As another example I was confused by the names and didn't realize that each of the four different types had different possible parents
to inherit from (i.e. account only has 'keycloak.v3' while login has both 'keycloak' and 'keycloak.v2'
Another example: I tried this and didn't know why adding the 'import' stopped my favicon from loading:
I didn't know exactly how the import is used since there are sparse examples, so it took me a bit to figure out it should be:
This could be explained showing that
import=common/keycloakactually references the files in org.keycloak.ceycloak-themes-26.7.1 in the folder/theme/keycloak/common. Putting the theme type before the theme name is the opposite of the directory structure, I think usingkeycloak.v2/loginwould make more sense but that would be a breaking change.Having a nice example of a full custom theme directory that just changes the login page to be styled differently would be really nice.
I created a repo with a simple example.
All reactions