Notice: Our URL has changed! Please update your bookmarks. Dismiss

Branding the OpenShift Web Console

This document provides the ways to change brand images on web console, login page and template. From time to time, using own brand on OSE is one of usual requirements. It is out of the scope of smart start but you set it up easily and quickly because this document will contains ansible playbooks.[TBD] Hence, this would be suggested to configure it on master servers after Openshift installed.

Prerequisites

The majority of the work involves on CSS, images. To achieve it, you need to prepare right size of images but the size of image should be different for each page. It is recommended to follow the image size which is provided by default. Moreover, the background color should be transparent.

  • Size

    • login page logo : 193px x 44px

    • web console logo : 193px x 44px

    • template icon : 37px x 33px

Tip
ImageMagick program help resize image easily. This playbook also contains it for your convenience.

Manual configuration

The login page of openshift is using base64 unicode for all images, which means it is not allowed to change it by CSS. In order to change the logo, you should create a new login html file by using oadm command but the page contains only ID/PASSWORD fields on white background. Sometimes, the page is developed by client so the white page can be acceptable. However, if client wants to change just the logo, the page does not fit them. Thus, it explains how to change only the logo image on login page.

  • Create a new template login html file

# cd /etc/origin/master/

# oadm create-login-template > login-template.html
  • Download default log page

curl -k https://{MASTER_IP or LB}:8443/login > new-login.html

# curl -k https://master.example.com:8443/login > new-login.html
  • Copy error html tag (2305-2307) into 2305 line of new-login.html

new-login.html
...
2303           </div>
2304
2305
2306           <div class="error"></div>
2307
2308         </div>
2309         <div class="col-sm-7 col-md-6 col-lg-5 login">
...
  • Change hidden value

As-Is
<form class="form-horizontal" role="form" action="/login" method="POST">
<input type="hidden" name="then" value="">
<input type="hidden" name="csrf" value="ed18e4b9-ebd8-11e5-bf88-525400a40b1b">
To-Be
<form class="form-horizontal" role="form" action="" method="POST"> (1)
<input type="hidden" name="" value=""> (2)
<input type="hidden" name="" value=""> (3)
  1. action is changed.

  2. name, action is changed.

  3. name, action is changed.

  • Change ID/PASSWD value

As-Is
<input type="text" class="form-control" id="inputUsername" placeholder="" tabindex="1" autofocus="autofocus" type="text" name="username" value="">

..

<input type="password" class="form-control" id="inputPassword" placeholder="" tabindex="2" type="password" name="password" value="">
To-Be
<input type="text" class="form-control" id="inputUsername" placeholder="" tabindex="1" autofocus="autofocus" type="text" name="" value=""> (1)

..

 <input type="password" class="form-control" id="inputPassword" placeholder="" tabindex="2" type="password"  name=""  value=""> (2)
  1. name, value are changed

  2. name is changed

  • Change copy right

As-Is
<p><strong>Welcome to Red Hat&reg; OpenShift Enterprise.</strong>
To-Be
<p><strong>Welcome to YOUR LOGO&reg; OpenShift Enterprise.</strong>
  • Convert image to base64 unicode and replace default. (execute replace_login_logo.sh)

replace_login_logo.sh
span_badge_line=$(grep -n "span id=\"badge\"" ./new-login.html |cut -d: -f1) (1)
img_line=$(( $span_badge_line + 1 ))

base64_img="<img src=\"$(echo "data:image/png;base64,$(base64 -w 0 login_logo.png)")\" alt=\"new logo\"/>" (2)

sed -e "$img_line,1d" -i new-login.html (3)
sed -e "$img_line i $base64_img" -i new-login.html (4)
  1. Find the line of badge class.

  2. Convert image(login_logo.png) to base64 unicode. alt can be modified.

  3. Delete the default logo

  4. Insert the new logo

  • Configure master-config.yaml for new login page.

master-config.yaml
...
oauthConfig:
  templates:
    login: /etc/origin/master/new-login.html
...
Note
The indent space is remarkably important. Sometimes, master server can not load it because of different space length.
  • Now restart atomic-openshift-master service

# systemctl atomic-openshift-master restart

After login, it is allowed to modify anything on console style using extended css/javascrpt/images. The official document explains it in detail, but it could take a little bit of time to configure due to yaml syntax of the master-config.xml file. Hence, I recommend following this chapter exactly, then you can see brand new logo without trial and error.

Workflow
  1. Create CSS/Image folder

  2. Create css file and copy web console logo under the folders

  3. Configure master-config.yaml

Steps
Create CSS/Image folder
# mkdir -p /etc/origin/master/stylesheet/{css,images}
Create css file and copy web console logo under the folders
extension.css
#header-logo {
   background: url("../extensions/images/webconsole-logo.png");
   width: 193px;
   height: 41px;
   margin-top: -3px;
}

#openshift-logo.navbar-brand{
   width: 193px;
   height: 42px;
   padding-left: 20px;
   padding-top: 1px;
}
Check image files
# ls -al /etc/origin/master/stylesheet/images
webconsole-logo.png
Configure master-config.yaml
master-config.yaml
...
assetConfig:
  extensions:
    - name: images
      sourceDirectory:
          /etc/origin/master/stylesheet/images
      extensionDevelopment: true
      extensionStylesheets:
        - /etc/origin/master/stylesheet/css/extension.css
  logoutURL: ""
...

Creating new template is usual in Openshift for other team. In addition, application architect would try to create a global template in openshift project and want to use special image to distinguish well. Using specific icon is really good idea to recognize each different template.

Workflow
  1. Copy icon image under images folder

  2. Add css class for icon.

  3. Use the css class in a template

Steps
Copy icon image under images
# cp new-icon.png /etc/origin/master/stylesheet/images/.
Add css element for icon
extension.css
.icon-test {
   background-image: url("../extensions/images/new-icon.png");
   width: 36px;
   height: 33px;
}
Use the css class in a template
test-template.yaml
{
    "kind": "Template",
    "apiVersion": "v1",
    "metadata": {
       "annotations": {
         "name": "test-tomcat8-jre8-1.0.0",
         "description": "test 1.0.0.",
         "tags": "test-apps",
         "iconClass": "icon-test"  (1)
       },
       "name": "test-tomcat8-jre8-1.0.0"
       ...
  1. This value must be same as the css style in extension.css

Ansible Playbooks

Using below ansible playbook, it can be easy to change logo of OpenShift Login Page and Web Console.

Playbooks Links