Improved Color Scheme for NiFi UI

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Improved Color Scheme for NiFi UI

Brandon Spratt
Hi all!

We noticed the newer versions of NiFi (1.0.0 and on) was very bright on our screens, so we modified the nf-canvas-all.css file for a better contrast and colors.

Attached are a few example pictures of a modified NiFi UI.

Here's the .war file (for 1.2.0) already compiled and ready to be used as well as a .pdf with step by step instructions to do it yourself: https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00

Hope this serves someone well! We are using it for all of our instances of NiFi.

Brandon
Reply | Threaded
Open this post in threaded view
|

Re: Improved Color Scheme for NiFi UI

Andy LoPresto-2
Thanks for contributing this, Brandon. I think we could open a Jira to provide a user-customizable setting, either through the UI or nifi.properties, to switch between the color schemes (and handle more in the future), as well as the placement of the navigation bar and operate palette. 


Andy LoPresto
PGP Fingerprint: 70EC B3E5 98A6 5A3F D3C4  BACE 3C6E F65B 2F7D EF69

On May 19, 2017, at 11:43 AM, Brandon Spratt <[hidden email]> wrote:

Hi all!

We noticed the newer versions of NiFi (1.0.0 and on) was very bright on our screens, so we modified the nf-canvas-all.css file for a better contrast and colors.

Attached are a few example pictures of a modified NiFi UI.

Here's the .war file (for 1.2.0) already compiled and ready to be used as well as a .pdf with step by step instructions to do it yourself: https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00

Hope this serves someone well! We are using it for all of our instances of NiFi.

Brandon


signature.asc (859 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Improved Color Scheme for NiFi UI

Russell Bateman-2
In reply to this post by Brandon Spratt
Brandon, you failed to attach those winning pictures.


On 05/19/2017 12:43 PM, Brandon Spratt wrote:

> Hi all!
>
> We noticed the newer versions of NiFi (1.0.0 and on) was very bright
> on our screens, so we modified the nf-canvas-all.css file for a better
> contrast and colors.
>
> Attached are a few example pictures of a modified NiFi UI.
>
> Here's the .war file (for 1.2.0) already compiled and ready to be used
> as well as a .pdf with step by step instructions to do it yourself:
> https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00 
> <https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00>
>
> Hope this serves someone well! We are using it for all of our
> instances of NiFi.
>
> Brandon

Reply | Threaded
Open this post in threaded view
|

Re: Improved Color Scheme for NiFi UI

trkurc
Administrator
As the moderator for this list, the pictures were attached at moderation time, but appear to not have made it through. I've attempted to attach them to my message.

 

On Fri, May 19, 2017 at 5:00 PM, Russell Bateman <[hidden email]> wrote:
Brandon, you failed to attach those winning pictures.


On 05/19/2017 12:43 PM, Brandon Spratt wrote:
Hi all!

We noticed the newer versions of NiFi (1.0.0 and on) was very bright on our screens, so we modified the nf-canvas-all.css file for a better contrast and colors.

Attached are a few example pictures of a modified NiFi UI.

Here's the .war file (for 1.2.0) already compiled and ready to be used as well as a .pdf with step by step instructions to do it yourself: https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00 <https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00>

Hope this serves someone well! We are using it for all of our instances of NiFi.

Brandon


Reply | Threaded
Open this post in threaded view
|

RE: [EXT] Re: Improved Color Scheme for NiFi UI

Peter Wicks (pwicks)
In reply to this post by Andy LoPresto-2
Another option that I had been playing around with was using the Chrome plugin Stylish<https://userstyles.org/> to create a NiFi color scheme that you can turn on/off on the fly.
It's very much a work in progress, as I've only been working on it for myself so far and didn't make it available until today.

https://userstyles.org/styles/142978/dark-nifi-1-2-0

Feedback welcome.

From: Andy LoPresto [mailto:[hidden email]]
Sent: Saturday, May 20, 2017 2:53 AM
To: [hidden email]
Subject: [EXT] Re: Improved Color Scheme for NiFi UI


Thanks for contributing this, Brandon. I think we could open a Jira to provide a user-customizable setting, either through the UI or nifi.properties, to switch between the color schemes (and handle more in the future), as well as the placement of the navigation bar and operate palette.


Andy LoPresto
[hidden email]<mailto:[hidden email]>
[hidden email]<mailto:[hidden email]>
PGP Fingerprint: 70EC B3E5 98A6 5A3F D3C4  BACE 3C6E F65B 2F7D EF69

> On May 19, 2017, at 11:43 AM, Brandon Spratt <[hidden email]<mailto:[hidden email]>> wrote:
>
> Hi all!
>
> We noticed the newer versions of NiFi (1.0.0 and on) was very bright on our screens, so we modified the nf-canvas-all.css file for a better contrast and colors.

>
> Attached are a few example pictures of a modified NiFi UI.
>
> Here's the .war file (for 1.2.0) already compiled and ready to be used as well as a .pdf with step by step instructions to do it yourself: https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00 <https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00>

>
> Hope this serves someone well! We are using it for all of our instances of NiFi.
>
> Brandon


<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">Thanks for contributing this, Brandon. I think we could open a Jira to provide a user-customizable setting, either through the UI or nifi.properties, to switch between the color schemes (and handle more in the future), as well as the placement of the navigation bar and operate palette.&nbsp;<div class=""><br class=""></div><div class=""><br class=""><div class="">

<div style="letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><div style="letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><div style="color: rgb(0, 0, 0);" class="">Andy LoPresto</div><div style="color: rgb(0, 0, 0);" class=""><a href="mailto:[hidden email]" class="">[hidden email]</a></div><div<mailto:[hidden email]%3c/a%3e%3c/div%3e%3cdiv> class=""><i class=""><font color="#c0c0c0" class=""><a href="mailto:[hidden email]" class="">[hidden email]</a></font></i></div><div<mailto:[hidden email]%3c/a%3e%3c/font%3e%3c/i%3e%3c/div%3e%3cdiv> style="color: rgb(0, 0, 0);" class="">PGP Fingerprint:&nbsp;70EC B3E5 98A6 5A3F D3C4 &nbsp;BACE 3C6E F65B 2F7D EF69</div></div></div>

</div>
<br class=""><div><blockquote type="cite" class=""><div class="">On May 19, 2017, at 11:43 AM, Brandon Spratt &lt;<a href="mailto:[hidden email]" class="">[hidden email]</a>&gt<mailto:[hidden email]%3c/a%3e&gt>; wrote:</div><br class="Apple-interchange-newline"><div class=""><div dir="ltr" class=""><div class="">Hi all!<div class=""><br class=""></div>We noticed the newer versions of NiFi (1.0.0 and on) was

very bright on our screens, so we modified the nf-canvas-all.css file for a
better contrast and colors.<br class=""><div class=""><br class=""></div><div class="">Attached are a few example pictures of a modified NiFi UI.</div><div class=""><br class=""></div><div class="">Here's the .war file (for 1.2.0) already compiled and ready to be used as well as a .pdf with step by step instructions to do it yourself:&nbsp;<a href="https://drive.google.com/drive/folders/0B-AhUVEKWNP0Q1EtTGRzYXFVN00" target="_blank" class="">https://drive.google.<wbr class="">com/drive/folders/0B-AhUVEKWNP<wbr class="">0Q1EtTGRzYXFVN00</a></div><div class=""><br class=""></div>Hope this serves someone well! We are using it for all of our instances of NiFi.<br class=""><br class=""></div>Brandon<br class=""></div>

</div></blockquote></div><br class=""></div></body></html>