# Full node appearance

**URL:** https://discourse.nodered.org/t/full-node-appearance/5041
**Category:** General
**Created:** [19 November 2018 14:07 UTC](https://discourse.nodered.org/t/full-node-appearance/5041 "2018-11-19T14:07:24Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![jdiegosierra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jdiegosierra/32/6990_2.png) [@jdiegosierra](https://discourse.nodered.org/u/jdiegosierra)
#### Post date: [19 November 2018 14:07 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/1 "2018-11-19T14:07:24Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/46783159395e6b21fe786a6cdf4dc2a5f25ff531.png)

Hi,

Is there any way to edit more deeply the nodes instead of background color. For example, I would like to change ports position even port style, like the image above...

Is this possible with Node-RED?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [19 November 2018 14:13 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/2 "2018-11-19T14:13:39Z")

</div>

All things are possible - it's "just" software and the source is freely available. But no we don't support that within the core project per se - so you would need to fork it and do the rework yourself.

---

<div class="post-metadata">

### Author: ![jdiegosierra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jdiegosierra/32/6990_2.png) [@jdiegosierra](https://discourse.nodered.org/u/jdiegosierra)
#### Post date: [20 November 2018 10:00 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/3 "2018-11-20T10:00:35Z")

</div>

Okey. I'm gonna try. Let me ask another question about this, I realised that the UI uses the editor/templates/index.mst file so changing it I can edit the UI. Which is the file for edit nodes globally?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [20 November 2018 10:09 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/4 "2018-11-20T10:09:25Z")

</div>

Well that is the main page template - most of the layout heavy lifting is done in `./packages/node_modules/@node-red/editor-client/src/js/ui/view.js`

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [20 November 2018 10:54 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/5 "2018-11-20T10:54:57Z")

</div>

> [@dceejay](#):
>
> ./packages/node\_modules/@node-red/editor-client/src/js/ui/view.js

That's the path to the file in the dev branch on git which will be the 0.20 release.

If you're looking at the master branch, you'd want:

```auto
editor/js/ui/view.js

```

In the npm installed version of Node-RED, all of the editor source has already been combined and minified into `red.min.js` - you cant easily edit that directly.

---

<div class="post-metadata">

### Author: ![jdiegosierra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jdiegosierra/32/6990_2.png) [@jdiegosierra](https://discourse.nodered.org/u/jdiegosierra)
#### Post date: [20 November 2018 11:12 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/6 "2018-11-20T11:12:31Z")

</div>

Sorry if my question is a little dummy. But I can't find the file that you have mentioned. When I installed Node-RED I got this files:

```
/usr/local/lib/node_modules/node-red
    ├── bin
    ├── editor
    │ └── templates
    ├── node_modules [282 entries exceeds filelimit, not opening dir]
    ├── nodes
    │ └── core
    │ ├── analysis
    │ ├── core
    │ │ └── lib
    │ │ └── debug
    │ ├── hardware
    │ ├── io
    │ │ └── lib
    │ ├── locales
    │ │ ├── en-US
    │ │ ├── ja
    │ │ │ ├── analysis
    │ │ │ ├── core
    │ │ │ ├── hardware
    │ │ │ ├── io
    │ │ │ ├── logic
    │ │ │ ├── parsers
    │ │ │ └── storage
    │ │ └── zh-CN
    │ ├── logic
    │ ├── parsers
    │ └── storage
    ├── public
    │ ├── icons
    │ ├── red
    │ │ └── images
    │ │ └── typedInput
    │ └── vendor
    │ ├── ace
    │ │ └── snippets
    │ ├── bootstrap
    │ │ ├── css
    │ │ └── img
    │ ├── font-awesome
    │ │ ├── css
    │ │ └── fonts
    │ ├── jquery
    │ │ └── css
    │ │ └── smoothness
    │ │ └── images
    │ └── jsonata
    └── red
        ├── api
        │ ├── admin
        │ ├── auth
        │ └── editor
        │ ├── locales
        │ │ ├── en-US
        │ │ ├── ja
        │ │ └── zh-CN
        │ └── projects
        └── runtime
            ├── locales
            │ ├── en-US
            │ └── ja
            ├── nodes
            │ ├── context
            │ ├── flows
            │ └── registry
            └── storage
                └── localfilesystem
                    └── projects
                        ├── git
                        └── ssh
```

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [20 November 2018 11:54 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/7 "2018-11-20T11:54:46Z")

</div>

Please read my reply. The npm installed version of Node-RED doesn't include the unbuilt source of the editor. If you want to edit the code, you'll need to clone from git and use the build process to generate the editor code.

---

<div class="post-metadata">

### Author: ![georgegreener](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/georgegreener/32/13246_2.png) [@georgegreener](https://discourse.nodered.org/u/georgegreener)
#### Post date: [16 October 2019 16:26 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/8 "2019-10-16T16:26:50Z")

</div>

Hello, I have a similar requirement and need to align the input/output ports to the top and bottom of each custom node. If you are able to share how you accomplished this, I would greatly appreciate it.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [20 October 2019 02:57 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/9 "2019-10-20T02:57:00Z")

</div>

There is [this thread](https://discourse.nodered.org/t/vertical-flow-view/5487) that demonstrates vertical flow and has a link to his source code. You should be able to view a diff and try it out on current node red source.

---

<div class="post-metadata">

### Author: ![georgegreener](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/georgegreener/32/13246_2.png) [@georgegreener](https://discourse.nodered.org/u/georgegreener)
#### Post date: [30 October 2019 18:05 UTC](https://discourse.nodered.org/t/full-node-appearance/5041/10 "2019-10-30T18:05:16Z")

</div>

Thanks @Steve-Mcl , I've become well acquainted with that thread 🙂
