Creating a UI theme for the Wired portal

To create your own UI theme for the Wired portal, you download and customize a sample theme, package it into an archive file, and create a secret that contains the archive file.

Procedure

Download the archive file that contains the sample theme by running this command:
```
wget https://raw.githubusercontent.com/IBM/cp4na-samples/main/sample.tar
```
Extract the archive file and go to the directory that contains the cascading style sheets (CSS) files by running these commands:
```
tar -xf sample.tar
cd sample
```
In the theme.scss file, customize the Sassy CSS (SCSS) settings for color codes and fonts. You can import custom fonts, add SCSS settings, and redesign the client logo.
After your customizations are complete, convert the contents of theme.scss to CSS by using on online conversion tool, such as this SCSS to CSS compiler.
Reduce the size of the converted CSS by removing unnecessary characters, such as white-space characters. To reduce the CSS, use an online tool, such as this online CSS minifier.
Edit the theme.css file, overwrite its contents with the reduced CSS, and save your changes.
Rename the folder that contains the customized files to a name of your choosing.
Package the folder into an archive file by running this command:
```
tar czf <new_theme>.tar <new_theme>
```
<new_theme> is the new folder name that you chose in the previous step.
In the namespace where the Wired portal is installed, delete and re-create the secret that contains the theme.
1. Delete the secret by running this command:
```
oc delete secret cp4na-o-wired-themes
```
2. In your file system, create a directory and copy the archive file that contains the UI theme. If there are multiple custom theme tar files, copy all the tar files into this directory.
3. Go to the directory that you created by running this command:
```
cd <new_dir>
```
  <new_dir> is the directory that you created.
4. Re-create the secret by running this command:
```
oc create secret generic cp4na-o-wired-themes --from-file=.
```
Optional: To apply the UI theme in the Wired portal, see Updating the UI theme in the Wired portal.

Results

The new theme is available to be used in the Wired portal. For more information about using the new theme in the portal, see Updating the UI theme in the Wired portal.