Customizing the UI beyond main.less


#1

We are starting to work with the ManageIQ Botvinnik appliance and I’ve hit a bit of a limitation with what we can customize from the UI perspective. The changeover to patternfly has made things much less hacky than previous releases, but I’m not quite able to do everything that Marketing has deemed necessary in the branding of our interface. As background, we’re a service provider providing a portal to our customers.

I have some code available at https://github.com/hyclak/cbts_cloudforms_skin (the master branch is where I’m currently working). This gets me most of the way there by modifying /var/www/miq/vmdb/productization/assets/stylesheets/main.less.

There are two things that I am unable to do that I was with previous releases (by replacing CSS, essentially).

  1. Remove the small branding logo above the login box on the login screen. The image is used for the upper left corner on subsequent pages after login, so replacing with a blank image won’t work. I tried to comment out the #brand{} section of /var/www/miq/vmdb/app/assets/stylesheets/patternfly/login.less, but that didn’t seem to work.
  2. Add a background image to the Navbar. I tried coercing it by setting @navbar-pf-bg-color: ‘#000000 url("/uploads/internal-banner.jpg") right top no-repeat;’; Unfortunately, there is some code later that works on @navbar-pf-bg-color by calling a function (.lighten?) that expects to only have a color value there, so that doesn’t work. I’m guessing I would have to modify /var/www/miq/vmdb/app/assets/stylesheets/patternfly/navbar.less and adjust the .navbar-pf class accordingly.

Does anyone have any suggestions for making these changes without getting into crazy-unsupportable-upgrade-land? Are there improvements we can make by adding some variables to main.less and using them throughout the code?

I’m open to any and all suggestions.

Thanks!
Matt


#2

Hi Matt,

To remove the branding logo above the login box, add this to main.less or your own css file:

.login-pf #brand {
display: none
}

Eric


#3

Eric,

Thanks, that works.

Any thoughts on the navbar background image? In previous versions, we had this in header.css.erb:

.header {
height: 26px;
background-color: #0b0809 !important;
background: url(’/images/layout/VDCInternalBanner.jpg’) right top no-repeat;
}

I haven’t managed to shoehorn anything resembling that into /var/www/miq/vmdb/app/assets/stylesheets/patternfly/navbar.less such that it works.

Thanks!
Matt


#4

Hi Matt,

I don’t have a simple override for this. I think for maintainability, adding an image to the header background and/or changing the banner height needs to go through the Patternfly project; I’ll bring it up with them.

Eric


#5

Hi Matt,

We have forwarded your request for a navbar background image and height adjustment to the Patternfly.org team. These enhancements should be available in the next few weeks.

Eric


#6

Thanks Eric!