[Infusion-users] Customizing Display Perference Panel

Cheetham, Anastasia acheetham at ocadu.ca
Thu Jun 6 12:26:52 EDT 2013

On 2013-06-06, at 11:24 AM, Shea, Geoffrey (Academic) wrote:

> I have implemented Infusion on this site:
> http://www.durhamart.on.ca

Excellent! It looks great.

>  There are a few things I would like to tweak, but I can’t find the documentation. Advice would be appreciated:
> -          Line Spacing doesn’t work, even though I have defined line-height using ems or multiples

Ok, this one has me stumped. I do see that some of your styles use 'em' for line-height, which you should avoid. The line-height CSS property should actually be unit-less.

But I tried removing the units from your stylesheet, and that didn't seem to fix the problem. I played around a little bit, but I still can't figure out why it's not working. I'll poke a bit more, and see if I can figure anything out.

> -          Coloured divs at the top of pages (a red and black separator) disappear when I change colour schemes, even though I have not included the .uio prefix to their styles (I thought that would make them exempt from colour changes)

The high-contrast themes set a default background colour for everything, so this is overriding your setting. I would suggest that you create a special style to set the background colour of the divider to be the foreground colour of the theme, so that the divider is still visible when the colour scheme is switched.

For example, if the theme is yellow-on-black, set the divider colour to yellow:

.fl-theme-uio-yb .redheader: {
  background-color: #FFFF00;

and similarly for the other high-contrast themes.

> -          I would like to omit Layout and Navigation from the preferences (I am not using these)

This is technically possible, but it would involve modifications to the templates Infusion is using, and might also involve modifications to the source, which I don't recommend.

We're currently updating the component to be much more easily configurable in this way. It's still a work in progress, but it might soon be at a state where you could consider trying it out. You can see the new look-and-feel here:


With this new version, it will be possible to essentially pick-and-choose which of the 'panels' you want to include.

> -          Can I omit the three tabs entirely and simply add Emphasize Links to the Text Size, Text Style, Line Spacing, Colour & Contrast panel?

This would be much trickier, and would require much more complicated modifications to the code. Again, you might want to hold out for the next version.

> -          Can the Display Preferences tab text increase in size following the Text Size option?

Ah, interesting. I think you've found something that might be a bug, albeit easy to work around.

The "Display Preferences" button is a <button> element, which by default doesn't automatically inherit font sizes from the body. If you add this style to your stylesheet, it should fix it:

button {
  font-size: inherit;

I think we didn't catch that because all of our demos include one of our base CSS files, "fss-reset-global.css" which includes this style.

> -          Can the Display Preferences tab remain at the top of the page as the user scrolls? (In case they want to adjust the display once they encounter some material further down the page)

It is reasonably easy to do this in CSS by setting "position: fixed;" and "top: 0;" but if you do this, the tab won't slide down when the panel opens; it will remain stuck to the top of the window. It might be possible to work around that with some tricky CSS, but I wouldn't know for sure without some research. JavaScript would help, but that might be more involved than you want to get?

Anastasia Cheetham     Inclusive Design Research Centre
acheetham at ocadu.ca           Inclusive Design Institute
                                        OCAD University

More information about the Infusion-users mailing list