Enhancing Argo CD: Customizing Banner Background, Text Colors, and Positioning

While setting up a platform for one of our customers, our team noticed that it would be beneficial if we could update the banner background color and the banner text color for ArgoCD. ArgoCD is a tool that enables a Kubernetes cluster to pull changes directly from a Git repository using Helm, also known as Gitops. In addition, we discovered that you could only position the banner at either the top or the bottom, not both. Initially, the configuration map provided four values that allowed basic customization of the banner. To accommodate our needs, we added two new values. We also added the support for specifying “both” for the banner position, as seen below.

apiVersion: v1
kind: ConfigMap
  name: argocd-cm
    ui.bannercontent: "Banner message linked to a URL"
    ui.bannerurl: "www.bannerlink.com"
    ui.bannerpermanent: "true"
    ui.bannerposition: "both"
    ui.bannerbackgroundcolor: "#FF0000" # new
    ui.bannertextcolor: "#00FFFF" # new

The following steps were taken to set up the dev environment:

1. Clone repository

git clone https://github.com/argoproj/argo-cd

2. Create a Kubernetes cluster. This can be done using a tool called kind.

brew install kind && kind create cluster

3. Apply argo-cd Kubernetes resources

kubectl apply -n default -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml

4. Install front-end dependencies

cd ui && yarn install && cd ..

5. Install Goreman

go install github.com/mattn/goreman@latest

6. Make sure go binaries are in PATH

export PATH=$HOME/go/bin:$PATH

7. Launch development environment

goreman start api-server ui

The front end will be accessible at http://localhost:4000. With the development environment up and running, you can now begin updating the UI code to incorporate the changes you desire. Any modifications made to the code will be instantly reflected in the environment, allowing you to preview your enhancements efficiently.

The Pull Request that was submitted with these changes can be found here:

Related Posts