Changing grid drop down styles for Genie Hybrid skin copy

[Larelyn]

The Genie Hybrid skin interprets subfiles into grids that look like they might be the "crystal" style. Part of the transformation is to change the subfile input field into a drop down with options.

We created a Genie skin as a copy of the hybrid, and we are thoroughly updating it with our latest web styles. I'm at a loss on where I can change some of the styles for these drop downs - the down arrow image in particular appears to be added as an <img> tag from the /profoundui/proddata directory. The font-family doesn't look like it's coming from a userdata css file.

Does anyone have any ideas how we can change the style (font, image, etc) of the drop down from these grids without changing proddata?

[matt.denninghoff]

Unfortunately, the font-family for the <input> element and the source of the <img> tag are hard-coded in the combo-box widget. So Genie has no interface to change those.

The image source is set in JavaScript. I haven't tried it, but you should be able to change the image by adding some custom JavaScript to one of the screen customization functions; e.g. customize or afterLoad. You'd add the code to the custom.js file in your Genie skin. If you use some of our APIs or standard JavaScript, you can find the <img> tag for each combo-box, then set its "src" property to some image.

Using the same approach, you would set the style.fontFamily of the <input> tags for each combo-box. You must use JavaScript to set the fontFamily in order to override the inline style that was set in Genie. No other CSS can override what was set in inline style.

[Larelyn]

Ah, thanks for the pointers. I was afraid it wouldn't be easy. I'll have to give that a go and see if I can make it happen. Thanks again!

[matt.denninghoff]

A few other people had asked about changing the drop-down image, so I'm posting how to do it. You can't override the image "src" by setting something in a CSS document. Instead, you can add code to the Genie skin's custom.js. I'll post two ways. Both require setting code in custom.js, afterLoad.

If there isn't already an "afterLoad" function in custom.js, add it. Inside the function, some code like below would find drop-down arrows and change them:

Code: Select all

function afterLoad() {
  // Find image elements that are used in drop-downs. Those are inside DIVs with class name, "input",
  // and they have "down_arrow" as the image source.
  var dropdowns = document.querySelectorAll(
      'div.input img[src="/profoundui/proddata/images/combo/down_arrow.gif"]');
  for(var i=0; i < dropdowns.length; i++){
    // Method 1: Manually override the image source set for Genie dropdowns.
    // Note: the new image should be about 18 pixels wide by 20 pixels tall.
    dropdowns[i].src = "/profoundui/userdata/images/mydropdown.png";
  }
}

A second approach would be to clear the image source in JavaScript, then set an image background using CSS. To clear the image, use this alternative:

Code: Select all

function afterLoad() {
  var dropdowns = document.querySelectorAll(
      'div.input img[src="/profoundui/proddata/images/combo/down_arrow.gif"]');
  for(var i=0; i < dropdowns.length; i++){
    dropdowns[i].src = "";
    dropdowns[i].alt = ""; //Required to prevent image not found icon from appearing.
    dropdowns[i].className = "mydropdown"; //Set this so CSS knows only to affect dropdown images.
  }
}

Then this CSS would work:

Code: Select all

/*Change the image used in dropdowns. JavaScript in custom.js/afterLoad must clear the src attribute for this to work.*/
div.input img.mydropdown {
  background: url("/profoundui/userdata/images/mydropdown.png");
  background-repeat: no-repeat;
  background-position: center;
}

Unfortunately, there's no way like above to change the font-family of the combo option; those options are created by JavaScript when the user clicks on the drop-down, and the elements are removed when the drop-down disappears. Therefore, the afterLoad code couldn't affect their styles.