|
83 | 83 | <li>
|
84 | 84 | <a class="nav-link" href="#securing-apps">Securing applications</a>
|
85 | 85 | </li>
|
| 86 | + <li> |
| 87 | + <a class="nav-link" href="#ui-customization">UI Customization</a> |
| 88 | + </li> |
86 | 89 | <li>
|
87 | 90 | <a class="nav-link" href="#migration">Migration</a>
|
88 | 91 | </li>
|
@@ -989,6 +992,129 @@ <h5 class="card-title">
|
989 | 992 | </div>
|
990 | 993 | </div>
|
991 | 994 | </div>
|
| 995 | + <div class="row guide-category mb-4" id="ui-customization"> |
| 996 | + <h2>UI Customization</h2> |
| 997 | + <div class="col-sm-4"> |
| 998 | + <div class="card shadow-sm mb-4"> |
| 999 | + <div class="card-body"> |
| 1000 | + <h5 class="card-title"> |
| 1001 | + Introduction |
| 1002 | + |
| 1003 | + |
| 1004 | + </h5> |
| 1005 | + <span class="card-text">Learn how to customize the user interfaces.</span> |
| 1006 | + <div> |
| 1007 | + </div> |
| 1008 | + <a href="https://www.keycloak.org/nightly/ui-customization/introduction" class="stretched-link link-dark"></a> |
| 1009 | + </div> |
| 1010 | + </div> |
| 1011 | + </div> |
| 1012 | + <div class="col-sm-4"> |
| 1013 | + <div class="card shadow-sm mb-4"> |
| 1014 | + <div class="card-body"> |
| 1015 | + <h5 class="card-title"> |
| 1016 | + Working with themes |
| 1017 | + |
| 1018 | + |
| 1019 | + </h5> |
| 1020 | + <span class="card-text">Understand how to create and configure themes.</span> |
| 1021 | + <div> |
| 1022 | + </div> |
| 1023 | + <a href="https://www.keycloak.org/nightly/ui-customization/themes" class="stretched-link link-dark"></a> |
| 1024 | + </div> |
| 1025 | + </div> |
| 1026 | + </div> |
| 1027 | + <div class="col-sm-4"> |
| 1028 | + <div class="card shadow-sm mb-4"> |
| 1029 | + <div class="card-body"> |
| 1030 | + <h5 class="card-title"> |
| 1031 | + Customizing with Quick Theme |
| 1032 | + |
| 1033 | + |
| 1034 | + </h5> |
| 1035 | + <span class="card-text">Learn how to customize the consoles and login screens with the Quick Theme utility.</span> |
| 1036 | + <div> |
| 1037 | + </div> |
| 1038 | + <a href="https://www.keycloak.org/nightly/ui-customization/quick-theme" class="stretched-link link-dark"></a> |
| 1039 | + </div> |
| 1040 | + </div> |
| 1041 | + </div> |
| 1042 | + <div class="col-sm-4"> |
| 1043 | + <div class="card shadow-sm mb-4"> |
| 1044 | + <div class="card-body"> |
| 1045 | + <h5 class="card-title"> |
| 1046 | + Localization |
| 1047 | + |
| 1048 | + |
| 1049 | + </h5> |
| 1050 | + <span class="card-text">Learn how to localize strings in the UIs.</span> |
| 1051 | + <div> |
| 1052 | + </div> |
| 1053 | + <a href="https://www.keycloak.org/nightly/ui-customization/localization" class="stretched-link link-dark"></a> |
| 1054 | + </div> |
| 1055 | + </div> |
| 1056 | + </div> |
| 1057 | + <div class="col-sm-4"> |
| 1058 | + <div class="card shadow-sm mb-4"> |
| 1059 | + <div class="card-body"> |
| 1060 | + <h5 class="card-title"> |
| 1061 | + Using Avatars |
| 1062 | + |
| 1063 | + |
| 1064 | + </h5> |
| 1065 | + <span class="card-text">Use avatars in the Admin console and Account console.</span> |
| 1066 | + <div> |
| 1067 | + </div> |
| 1068 | + <a href="https://www.keycloak.org/nightly/ui-customization/avatars" class="stretched-link link-dark"></a> |
| 1069 | + </div> |
| 1070 | + </div> |
| 1071 | + </div> |
| 1072 | + <div class="col-sm-4"> |
| 1073 | + <div class="card shadow-sm mb-4"> |
| 1074 | + <div class="card-body"> |
| 1075 | + <h5 class="card-title"> |
| 1076 | + Customizing the Welcome Theme |
| 1077 | + |
| 1078 | + |
| 1079 | + </h5> |
| 1080 | + <span class="card-text">Learn how to customize the welcome theme.</span> |
| 1081 | + <div> |
| 1082 | + </div> |
| 1083 | + <a href="https://www.keycloak.org/nightly/ui-customization/welcome-theme" class="stretched-link link-dark"></a> |
| 1084 | + </div> |
| 1085 | + </div> |
| 1086 | + </div> |
| 1087 | + <div class="col-sm-4"> |
| 1088 | + <div class="card shadow-sm mb-4"> |
| 1089 | + <div class="card-body"> |
| 1090 | + <h5 class="card-title"> |
| 1091 | + Creating your own Console |
| 1092 | + |
| 1093 | + |
| 1094 | + </h5> |
| 1095 | + <span class="card-text">Learn to create your own version of Admin Console or Account Console.</span> |
| 1096 | + <div> |
| 1097 | + </div> |
| 1098 | + <a href="https://www.keycloak.org/nightly/ui-customization/creating-your-own-console" class="stretched-link link-dark"></a> |
| 1099 | + </div> |
| 1100 | + </div> |
| 1101 | + </div> |
| 1102 | + <div class="col-sm-4"> |
| 1103 | + <div class="card shadow-sm mb-4"> |
| 1104 | + <div class="card-body"> |
| 1105 | + <h5 class="card-title"> |
| 1106 | + Using the npm UI packages |
| 1107 | + |
| 1108 | + |
| 1109 | + </h5> |
| 1110 | + <span class="card-text">Learn how to use UI modules in your own application.</span> |
| 1111 | + <div> |
| 1112 | + </div> |
| 1113 | + <a href="https://www.keycloak.org/nightly/ui-customization/themes-react" class="stretched-link link-dark"></a> |
| 1114 | + </div> |
| 1115 | + </div> |
| 1116 | + </div> |
| 1117 | + </div> |
992 | 1118 | <div class="row guide-category mb-4" id="migration">
|
993 | 1119 | <h2>Migration</h2>
|
994 | 1120 | <div class="col-sm-4">
|
|
0 commit comments