Cloudera Docs

Changing the page logo

You can replace the Hue web UI logo with a custom log that is created with SVG code. Add any type of logo you want, but your custom logo should be designed to fit into a 160 x 40 pixel space.

For example, here is the Hue logo shown below:



You can change this Hue logo by adding the appropriate SVG code to the logo_svg property under [desktop] [[custom]] in the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter in Cloudera Manager as follows:

To replace the Hue logo with a custom logo:

  1. In the Cloudera Manager Admin Console, select Clusters > Hue > Configuration to navigate to the configuration page for Hue.
  2. In the Search text box type hue_safety_valve.ini to locate the configuration parameter:


  3. Add the following parameters with your custom logo SVG code to the Hue Service Advanced Configuration Snippet (Safety Valve) for hue_safety_valve.ini configuration parameter: 
    [desktop]
[[custom]]
logo_svg='<custom_svg_code_for_logo>'

    For example, the following SVG code replaces the Hue logo with a red heart:

    [desktop]
[[custom]]
logo_svg='<g><path stroke="null" id="svg_1" d="m44.41215,11.43463c-4.05017,-10.71473
-17.19753,-5.90773 -18.41353,-0.5567c-1.672,-5.70253 -14.497,-9.95663
-18.411,0.5643c-4.35797,11.71793 16.891,22.23443 18.41163,23.95773c1.5181,-1.36927 22.7696,-12.43803
18.4129,-23.96533z" fill="#ffffff"/> <path stroke="null" id="svg_2"
d="m98.41246,10.43463c-4.05016,-10.71473 -17.19753,-5.90773 -18.41353,-0.5567c-1.672,-5.70253
-14.497,-9.95663 -18.411,0.5643c-4.35796,11.71793 16.891,22.23443 18.41164,23.95773c1.5181,-1.36927
22.76959,-12.43803 18.41289,-23.96533z" fill="#FF5A79"/> <path stroke="null" id="svg_3"
d="m154.41215,11.43463c-4.05016,-10.71473 -17.19753,-5.90773 -18.41353,-0.5567c-1.672,-5.70253
-14.497,-9.95663 -18.411,0.5643c-4.35796,11.71793 16.891,22.23443 18.41164,23.95773c1.5181,-1.36927 22.76959,-12.43803 18.41289,-23.96533z" fill="#ffffff"/> </g>'
  4. Click Save Changes at the bottom of the page to save the configuration change.
  5. Refresh the browser page and click the restart icon at the top of the page so the new configuration changes can be read by the server.
  6. In the Hue configuration page of Cloudera Manager, select Web UI > Hue Load Balanced to load Hue and view your custom logo.

    If you added the sample SVG code that defines a red heart as the logo, your Hue web UI looks like this: