# Customizing the Rancher UI **URL:** \ **Category:** Rancher 1.x\ **Created:** [February 10, 2016, 1:53am UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678 "2016-02-10T01:53:47Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![bobby](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@bobby](https://forums.suse.com/u/bobby)\ **Post date:** [February 10, 2016, 1:53am UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/1 "2016-02-10T01:53:47Z")
Hi, I’m having some trouble customizing the Rancher UI. I’ve been following the steps explained here by vincent: [How can I customize UI?](http://forums.suse.com/t/how-can-i-customize-ui/1435) I can see any changes I’ve made using “npm start” to test the app successfully (all I did was change the hexadecimal color values in the header to green to test that the changes are working). When I run “./scripts/build-static -l”, it says I get a successful build, then I upload the dist/static/latest folder to a vm on digital ocean. I’m using nginx to serve the files. But when i change the [http://your-rancher:8080/v1/settings/api.ui.index](http://your-rancher:8080/v1/settings/api.ui.index) from local to “[http://ipaddress/latest](http://ipaddress/latest)” and reload Rancher, nothing changes in the UI. I don’t think this step is the problem though, I set up a dummy index.html file in the / directory of the vm to display “hello”. changing the api.ui.index to “[http://ipaddress/](http://ipaddress/)” successfully shows “hello” when i open up rancher on localhost:8080. I think the problem is when i run the build script, but I don’t know why it wouldn’t build the changes into the /latest file. Any help would be much appreciated, Bobby ---
**Author:** ![vincent](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/vincent/32/7156_2.png) [@vincent](https://forums.suse.com/u/vincent)\ **Post date:** [February 10, 2016, 5:29pm UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/2 "2016-02-10T17:29:50Z")
Hmm, that all sounds right, and that script is how we actually build everything so it sort of has to work 🙂 . CI also runs it with `-l -u` (upload) on every commit to master to keep a copy that works with `api.ui.index=https://releases.rancher.com/ui/latest` up to date. - it’s a bit hard to read because it’s minimized but you can check `dist/static/latest/assets/ui-light.css` (or `dark`, whichever you changed) and search for `HEADER .top-row`, right after that should be the background-color code, see if it’s yours or the normal one (`#0075a8` light, `rgba(0,117,168,.75)` dark). - Open up the browser dev tools with like right-click -\> Inspect element and check the `` and make sure the JS and CSS files are all being loaded from your URL. Especially the `` for `ui-light.css`, as it’s added by JS after the page loads depending on the theme chosen and not in the original `index.html`. - Download the css file that _is_ being loaded and check the `HEADER .top-row` in it again… maybe you’re accidentally uploading new copies an extra folder deep into `/var/www/html/latest/latest` or something similar. ---
**Author:** ![vincent](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/vincent/32/7156_2.png) [@vincent](https://forums.suse.com/u/vincent)\ **Post date:** [February 10, 2016, 5:58pm UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/3 "2016-02-10T17:58:15Z")
BTW once you get that working, I made an example addon that adds a machine driver screen for someone that may help… [https://github.com/rancher/ui-example-addon-machine](https://github.com/rancher/ui-example-addon-machine) ---
**Author:** ![bobby](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@bobby](https://forums.suse.com/u/bobby)\ **Post date:** [February 11, 2016, 1:04am UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/4 "2016-02-11T01:04:54Z")
Hi vincent, I’m looking in the index.html of /latest folder, and I see four references to “[//releases.rancher.com/ui/latest/\_\_\_](https://releases.rancher.com/ui/latest/___)” I’m assuming that when the page is loaded, rancher is using the ui stored on [releases.rancher.com](http://releases.rancher.com), and not the ui that was built by the script? When you say make sure the js and css files are being loaded from my URL, all I would have to do is change the links /assets/vendor.css, /assets/vendor.js, and ui.js to “//myURL/latest/\_\_\_”? I can’t find where the link to ui-dark.css is, is that something I have to change before I run the build script? Thanks, Bobby ---
**Author:** ![bobby](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@bobby](https://forums.suse.com/u/bobby)\ **Post date:** [February 11, 2016, 1:22am UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/5 "2016-02-11T01:22:29Z")
Oh by the way, I’m looking at [http://myURL/latest/assets/ui-dark.css](http://myURL/latest/assets/ui-dark.css) from my web browser, and I see: HEADER .top-row{background-color:#2ecc71;min-height:45px} So now for sure I know that the changes are being made and uploaded correctly, they’re just not being loaded by rancher. ---
**Author:** ![bobby](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@bobby](https://forums.suse.com/u/bobby)\ **Post date:** [February 11, 2016, 3:37am UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/6 "2016-02-11T03:37:19Z")
I’m looking at my network connections that happen when I reload the page right now, it does look like vendor.css, vendor.js, and ui.js are successfully being loaded from my web host, but “ui-dark.css?0.90.0” is still being loaded from [releases.rancher.com](http://releases.rancher.com). Is there a way to set the default path for the ui to my web host instead of [releases.rancher.com](http://releases.rancher.com)? or am I thinking about this incorrectly? ---
**Author:** ![vincent](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/vincent/32/7156_2.png) [@vincent](https://forums.suse.com/u/vincent)\ **Post date:** [February 11, 2016, 4:54am UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/7 "2016-02-11T04:54:15Z")
D’oh, sorry… You also need `-c "your.server.or.ip"` because the URL gets baked into the build too and the default is our server. ---
**Author:** ![bobby](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@bobby](https://forums.suse.com/u/bobby)\ **Post date:** [February 11, 2016, 5:04am UTC](https://forums.suse.com/t/customizing-the-rancher-ui/1678/8 "2016-02-11T05:04:38Z")
I fixed it about minute ago, been typing my response when I saw your post just now haha, anyway: in the ui.js file in the last few lines it references releases.rancher.ui/latest/ (had to search for it) So I changed that to “//myURL/latest/”, and then everything worked 😃 I’ll definitely use that build argument from now on instead of having to make the changes manually after the build. Thanks for your help vincent, bobby