= How to add Custom Icons inside openshift

This is a guide to add custom icons into an Openshift cluster.

https://github.com/devonfw/devonfw-shop-floor/tree/master/dsf4openshift/openshift-cluster-setup/initial-setup/customizeOpenshift/stylesheet[Here] we can find an icons.css example to use the devonfw icons.

== Images Styles

The icons for templates must measure the same as below or the images don't show right:

- `Openshift logo`: 230px x 40px.
- `Template logo`: 50px x 50px.
- `Category logo`: 110px x 36px.

== Create a css

=== Custom logo for openshift cluster

For this example, we are going to call the css icons.css but you can call as you wish.
Openshift cluster draw their icon by the id header-logo, then we only need to add to our icons.css the next Style Attribute ID
[source,CSS]
----
#header-logo {
  background-image: url("https://raw.githubusercontent.com/devonfw/devonfw-shop-floor/master/dsf4openshift/openshift-cluster-setup/initial-setup/customizeOpenshift/images/devonfw-openshift.png);
  width: 230px;
  height: 40px;
}
----

=== Custom icons for templates

To use a custom icon to a template openshift use a class name. Then, we need to insert inside our icons.css the next Style Class

[source,CSS]
----
.devonfw-logo {
  background-image: url("https://raw.githubusercontent.com/devonfw/devonfw-shop-floor/master/dsf4openshift/openshift-cluster-setup/initial-setup/customizeOpenshift/images/devonfw.png");
  width: 50px;
  height: 50px;
}
----

To show that custom icon on a template, we only need to write the name of our class in the tag "iconClass" of our template.

[source,JSON]
----
{
    ...
    "items": [
        {
            ...
            "metadata": {
                ...
                "annotations": {
                    ...
                    "iconClass": "devonfw-logo",
                    ...
                }
            },
            ...
        }
    ]
}
----

== Use our own css inside openshift

To do that, we need to enter in openshift as an admin and use the next command:

[source,Shell]
----
$ oc login
$ oc edit configmap/webconsole-config -n openshift-web-console
----

After this, we can see in our shell the webconsole-config.yaml, we only need to navigate until *extensions* and add the url for our own `css` in the *stylesheetURLs* section.

*IMPORTANT: Scripts and stylesheets must be served with the correct content type or they will not be run by the browser. stylesheets must be served with Content-Type: text/css.*

In git repositories, the content type of raw is text/plain. You can use https://rawgit.com/[rawgit] to convert a raw from a git repository to the correct content type.

Example:

[source,YAML]
----
webconsole-config.yaml: |
	[...]
    extensions:
      stylesheetURLs:
		- https://cdn.rawgit.com/devonfw/devonfw-shop-floor/master/dsf4openshift/openshift-cluster-setup/initial-setup/customizeOpenshift/stylesheet/icons.css
    [...]
----