Ability to Import Custom Theme

[adillon]

Our team would like to import our own theme to our portal without the requirement to have developers override styling using NAB.

The issues we're seeing are developers on our team have the ability to style apps inconsistently with one another, override styles that are added to the Override.css file set for global theming, and conflicts directly with any Front End development updating and maintaining the overall company branding.

Example of this is if an app developer adds a set margin or padding using the NAB (or relies on the default 16px setting), that directly conflicts with any Overrides.css styling for those set attributes in those components no matter if those attributes have an !important statement attached to them because it's being injected as inline-styles using JS which trumps any stylesheet properties. That includes using IDs over classes, too.

We're requesting the option to upload/import our own master theme on the same level as the Neptune theme available so we're appending as much (preferably all) styles for branding and theming to each app being built. This way, our users recognize this is a company portal as much as possible and allow our app developers to focus on building apps while avoid any inconsistencies along the way.

I've reached out for ideas and suggestions via email on this topic hoping there was additional documentation on this topic and the most guidance I've been given is using the available features in NAB and crickets in regards to this specific feature of importing our own theme that our company develops and maintains based on the desired UX/UI. We can do a lot in NAB, but knowing that it directly conflicts with stylesheets leaves apps at risk of inconsistencies for branding.

[sean.lanktree]

I understand the issue with NAB allowing the user to set the margins and how that would override any custom CSS you have created for it. Do you have other examples where your overrides are not applying?

As far as uploading a theme, how would you plan on creating the theme? Would you be using sencha command to build a theme package? Whatever method is used, the end product would just be a css or series of css files. This can already be imported through the overrides.css via @import:

@import myPath/myFile.css

You should already be able to override most of the look and feel. But we need to know what other specific issues you are running into (aside from the NAB user margins).

Once we understand the specific issues you are having we can then add it to our future development list.

[adillon]

Another example is the placement of the collapsable navigation. Most, if not all, parent containers are being positioned using absolute values like left, top, bottom, and right with their height and width being calculated to the exact PX on the fly as the window gets resized to any dimension. It works in a broad amount of cases, but not all. Circling back to the collapsable navigation on the left, it's not touching the bottom of the main navigation heading, leaving a gap. It's not noticeable when you have a white background, but once you have any color, it's noticeable.

I've included a screenshot of the example described above and attached the vague direction we're trying to style our portal to look like. We're aiming for our apps to be colorful, data driven, and appealing to the masses. It's still the early stages, but we're hoping to add in gradients, eased fading between pages (like when you open an app to close it, it's not abrupt) and much more.

It would take me a long time to clean things up and wrench in these styles by adding !important statements everywhere to fix layout, sizing, spacing and any other style that's being injected and dynamically calculated out like. Plus, using !important statements like that is bad practice and should be used if there isn't an alternative method. That's what usually sparks creating frontend code debt from my experience and would like to avoid that type of practice if possible as we grow over time. That's why I'd like to have a way to import our own theming that isn't layering over what's existing, but instead creating something on the same level as Neptune so we're not stepping on our own toes as we continue to flush this portal out for our end consumer.

[sean.lanktree]

We definitely will get the issue with the nav drawer fixed. I assume you have some custom css applied to the nav drawer or the "control bar"?

I think this whole topic would be best suited to an online meeting. If you could have a list of issues you have found we could review each one. Maybe identifying those will allow us to find others like it (before you do).

The framework we use to create the Portal and NAB apps (Extjs) makes extensive use of Javascript to position items and honor layouts. Thus, in some cases CSS changes will not be helpful. Not exactly sure what could be done here as changing the framework is not an option at this point.

I imagine that some of your requests would be better suited as a setting rather than your custom CSS. For example, eased fading when opening or closing apps. So maybe a setting like "App fade in/out animation (number of milliseconds)".

[adillon]

Sounds great! We have our internal portal meeting today and can relay this info to the rest of the team so we can get something on the books. Thanks again for being quick to respond on this and look forward to what we can find/do together :)

[sean.lanktree]

FYI - the next update will include a new setting to control animation duration for fade apps in/out upon launch/close/switch.