I’m frustrated

Sales bar not showing correctly or working with DeepFocus theme

The following post was also posted on the DeepFocus forum. If you can help me in any way - like now to change the FotoMoto Sales Bar z-index so that it comes out on top - please do. I will keep you up to date - but out of the box the DeepFocus theme by Elegant Themes does not play well with Fotomoto. It will work - but it could be GREAT instead of limiting the display possibilities and Fotomoto Functionality.

"I have tried just about every different image insertion/thumbnail/featured image combo and I am still running into the same issue. The Fotomoto sales bar will not display properly with the default thumbnail/image z-index settings.

Please see my page: http://chriskellyphotography.com/char... As you will notice, the Fotomoto bar shows only the dropshadow - the actual text is missing. The same issue can be seen here: http://chriskellyphotography.com/2011... however with a worse side effect. On the top image the Fotomoto bar is behind (lower z-index?) the "clickable" part of the image. If you attempt to click on "Buy Print, Buy Card, or eCard" you get the Fancybox animation instead. Further, instead of a white bar (still talking about the first image) with black text, you see a the underlying theme background.

On the second image, the image title is there - but again it is a white drop shadow against a white background. VERY difficult to see. So whether we are talking about Fotomoto, or just titles, this is an issue.

This is fixable - an example is here:http://www.pureshadeofcolor.com/2011/... Unfortunately, I have not been able to get the full details of how it was fixed, except that it was a z-index in the CSS/Template issue.

Thank you for your help,
Chris Kelly"
1 person has
this problem
+1
Reply
  • Derek (Official Rep) June 13, 2011 20:40
    Hi Chris,

    Regarding the buy button link color, it's probably being inherited from the styles set in your theme. You can use custom CSS to specify colors for the buy button links, for example you could use
    .FotomotoToolbarClass a {color: black !important;}
    Please see this article for an explanation of how to control the presentation of the buy buttons.

    Likewise you can control the z-index to cause the buy buttons to appear on top of other elements. I just added this code to your Dashboard for you and you should see the links working now, but please double-check.
    .FotomotoToolbarClass {position:relative; z-index:100;}

    Hope that helps and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • I’m thankful
    Dude,

    You ROCK. Seriously. That fixed it. I will be reading that article carefully tonight. I will assume it covers where to put that piece of code - I have never done any CSS. I do have a few books I just bought on WordPress themes. They should help.

    Thank you again,
    Chris
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Darn, I just typed a reply and now it's gone.

    Anyway, I'm trying to make the toolbar appear inside my thumbnails instead of under. I tried the solution with the code above .FotomotoToolbarClass {position:relative; z-index:100;} but that didn't work (or perhaps I'm doing it wrong.

    I hope you can help

    kind regards,
    Bart

    http://www.b-artwork.nl
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Hi Derek,

    Thx, it works when I select PrettyPhoto. However, it is a bit buggy at times. Picture one is showing the wrong version (this happens a lot). Picture 2 is showing the correct version. It alternates between these two versions. Especially when using different browsers. Is there a solution to correct this?



  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • I’m confused
    Derek,

    You fixed this perfectly when you added the earlier code. Worked like a charm. I tested this on Firefox, IE and Safari - worked great. Then a few days ago I was showing someone the functionality and it didn't work. I logged in and the code you put in was gone. I had put in some other stuff myself, and it was all completely erased. The only thing there was:
    .FotomotoViewCartClass {

    }

    This morning I re-inserted the code:
    .FotomotoToolbarClass {position:relative; z-index:100;}
    It seems to make no difference so far. I am wondering if it would make a difference if I re-inserted it inside the CSS for wordpress in my wordpress settings CSS?

    Naturally I am wondering how it all got erased and broken too - does this happen often?

    I am going to jack up the z-index number to 500 and see if that makes a difference. I you could take a look at this again, I would really appreciate it.

    A good URL is:
    http://chriskellyphotography.com/2011...

    Thank you,
    Chris
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • I’m happy
    Derek,

    Looked like I solved my own problem. I put the code in my own sheets wordpress CSS instead of the CSS in the Fotomoto Dashboard page.

    This seems to work fine. Also, the settings for Deepfocus is Fancybox. There should be no issues after that.

    Thanks,
    Chris
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Derek (Official Rep) June 29, 2011 17:08
    Chris - glad you got everything working again. As for your custom CSS, it absolutely can go in your own CSS file, but if it's code related to Fotomoto, we suggest you keep it in the Dashboard.

    b.erkamp - I took a close look at one of your galleries, and FancyBox is actually the correct setting so I changed it in your Dashboard and ran through http://www.b-artwork.nl/?page_id=39 - all looks well from my machine, but please verify that everything's working for you.

    Kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Hi Derek,

    Unfortunately I don't see the 'buy print' link anymore when using Fancybox. I do see it when selecting prettyphoto...but as before, it doesn't show correct certain times.

    I'm confused :S
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Derek (Official Rep) June 29, 2011 17:41
    Hi

    It looks like your buy button link color is the same color as your background. Try setting the link colors to something different using custom like this:

    .FotomotoToolbarClass a {color: red !important;}

    This is addressed here:
    http://support.fotomoto.com/customer/...

    and you can read more about buy button CSS at
    http://support.fotomoto.com/customer/...

    Thanks,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • I'm sorry to say that i already did that (see the photo's in this thread).
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Derek (Official Rep) June 29, 2011 20:02
    Hi again b.erkamp,

    About the CSS, you did have the link color set, but just on a different element.

    More importantly, I see now that this issue is intermittent and sometimes the buy buttons are not shown. We need to do some more investigation here to figure out the issue - it might be related to how Fotomoto works with the version of PrettyPhoto that DeepFocus now uses instead of FancyBox.

    I'll update this post as I have more info, but for now I'd suggest either using that lightbox as-is or disabling it and maybe showing the images in a different lightbox or on a WordPress 'attachment' page instead.

    Kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Hi Derek,

    thx for your reply. It works now with PrettyPhoto. Hopefully it's stays this way when I upload new photo's
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • I just got started with the Deep Focus theme and signed up for Fotomoto. The sales bar appears on blog post pages (not on thumbnails).

    Blog Post Page
    The sales bar appears, but when I click any of the links it just redirects back to the image. http://igotalovejones.com/archives/691

    Portfolio Page (thumbnails)
    When you click any of the thumbnails for a larger view of the picture, the sale bar tool does not appear. http://igotalovejones.com/archives/ca...

    I did change the script from Fancybox to PrettyPhoto per the comments above, but neither has effected anything. I feel like I'm missing something pretty basic though...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Derek (Official Rep) July 13, 2011 05:55
    When using the Deep Focus theme, you may need to add this line of code to the CSS in your Store Appearance page of your Fotomoto Dashboard:

    .FotomotoToolbarClass {position:relative; z-index:100;}

    The reason: Deep Focus puts a transparent 'overlay' on top of your image when viewed in the Fancybox lightbox pop-up. This tends to be a little confusing, because a 'hand' cursor will appear when you roll over the Fotomoto buy buttons, (indicating a link) but the link is actually the URL to click to the next or previous image.

    The line of code above will cause the Fotomoto buy buttons to appear over the top of the overlay, making the buy buttons work as expected.

    I hope that helps and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • great! thanks for the reply. The buy links are working as expected.

    The only thing left now related to all of this is - the sales toolbar appears when I click a thumbnail on the portfolio page but not in the expected place - it's at the bottom of the page. Is this because my image is too large? I would like the toolbar to appear inside the zoomed version of the thumbnail.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Derek (Official Rep) July 20, 2011 18:02
    Hi kge.wilson,

    What you're seeing is not because of your image being too large - it's actually the way that Fotomoto works with Fancybox. Long story short, because of the way Fancybox works, our code can't properly determine the position of an image within a Fancybox, so we can't put the buy buttons under the image as usual, so instead we put them at the bottom of the page.

    Hope that explanation helps and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited