Help get this topic noticed by sharing it on Twitter, Facebook, or email.
I’m happy

Zenfoto Default Theme - fotomoto CSS setup

Solution to display issue of Fotomoto Sales Bar in Zenphoto

Using the default theme in Zenphoto, the fotomoto toolbar will not display correctly.

Support offered a solution that works in Firerfox (and I suggest to keep this CSS formatting), which consists of adding a margin above the fotomoto toolbar.
(remove outer quotes when applying my suggestions)

" .FotomotoToolbarClass{
margin-top: 8px !important; /* move 8 pixels down */
} "

However, this still leaves the IE9 display messed up - and Opera benefits from increasing the value to 10 pixels.

Starting to customize my own theme, I dug through the CSS and found the offending line of code. Using the default light theme, the CSS file contain the following for the image div

" line-height: 0; "

This line causes all the issues with the fotomoto toolbar.

There are two options now - the one I employed was to change the line to

" line-height: 10pt "

in my theme layout. This also allows me to reduce the margin to 4 pixels - which to my eyes looks better.
As I write this, I also tested another option - you can modify the fotomoto CSS to contain this line:

" line-height: 10pt !important; "

This will override the CSS setting found in the theme, however using too many !important marks can also mess up a CSS layout.

I would personally recommend you check the image div definition of the theme should you use zenphoto and modify it accordingly, rather than using an override in the fotomoto style.

I hope this will help zenphoto users.

Detlev CM
1 person likes
this idea