docs/development/web-ui.md

9 # Webui-vue
11 The [webui-vue](https://github.com/openbmc/webui-vue) repository will replace
12 phosphor-webui once it is deprecated. Webui-vue uses the
16 Visit [README.md](https://github.com/openbmc/webui-vue/blob/master/README.md) to
21 [CONTRIBUTING.md](https://github.com/openbmc/webui-vue/blob/master/CONTRIBUTING.md)
22 to find information on project set-up, design information, and contributing
25 Visit the [OpenBMC Web UI Style Guide](https://openbmc.github.io/webui-vue/) to
28 - Coding Standards
29 - Guidelines
30 - Unit Testing
31 - Components Usage
32 - Quick Start References
35 [OpenBMC Web UI Themes Guide - How to customize](https://openbmc.github.io/webui-vue/themes/customi…
39 - Routing
40 - Navigation
41 - State Store
42 - Theming
50    [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md).
59 connect. OpenBMC is running with a self-signed SSL certificate.
61 # Phosphor-webui
63 The [phosphor-webui](https://github.com/openbmc/phosphor-webui) repository
64 provides a web-based interface for an OpenBMC. It uses the
70 [how to customize phosphor-webui](#customize-phosphor-webui).
72 Phosphor-webui was built on AngularJS and AngularJS goes End of Life June
75 ## Customize Phosphor-webui
80    git clone https://github.com/openbmc/phosphor-webui.git
85    Follow the directions in the phosphor-webui
86    [README](https://github.com/openbmc/phosphor-webui/blob/master/README.md) to
89    [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md)
95    Kill your npm run from the previous step using Ctrl^C. Grab a png that you
97    any .png you wish for this step.
100    wget http://www.pngmart.com/files/3/Free-PNG-Transparent-Image.png
106    cp Free-PNG-Transparent-Image.png app/assets/images/
112    vi app/login/controllers/login-controller.html
113    # Replace the logo.svg near the top with Free-PNG-Transparent-Image.png
114 …<img src="../../assets/images/Free-PNG-Transparent-Image.png" class="login__logo" alt="OpenBMC log…
117    Start up the server with your change
120    npm run-script server
130    changing with this step.
132    Similar to the previous step, modify the appropriate HTML for the header:
135    vi app/common/directives/app-header.html
136    # Replace logo.svg with Free-PNG-Transparent-Image.png again
137 …<div class="logo__wrapper"><img src="../../assets/images/Free-PNG-Transparent-Image.png" class="he…
140    Start up the server with your change
143    npm run-script server
158    phosphor-webui code!