Center the Fotomoto Button when using FancyBox

For the people using FancyBox, I had a difficult time figuring out why the buttons were extremely hard to customize. I found out that the default CSS has these lines:

.FotomotoToolbarClass {
left: 10%;
width: 80%;
top:0;
padding: 4px 8px;
}

I wanted to center the button, have a specific width, and have it at the bottom of the page. There was no way to get rid of the "left" and this prevented me from entering a specific width while centering.

This is what I came up with:

.FotomotoToolbarClass a,
.FotomotoToolbarClass a:link,
.FotomotoToolbarClass a:visited,
.FotomotoToolbarClass a:active,
.FotomotoToolbarClass a:hover {
font-size: 12px !important;}

.FotomotoSeparator{
margin: 0 4px !important;}

.FotomotoToolbarClass{
left:20% !important; /* you need these two lines to change the width and center it*/
width:60% !important; /*but there is no way to enter a px while centering*/
height:30px !important;
top:auto !important; /* this is to get the button unstuck from the top */
bottom:5px !important; /* this will put the button on the bottom of the window */
background-color:#CCC !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;}

.FotomotoBar {
margin:0 auto !important;} /* this will center the links within the fotomoto button */

.FotomotoBar li {
float:none !important;} /* this will stop all the links from floating left or right */

But if I want to be able to set my own width for the buttons, I would have to set FotomotoToolbarClass to 100%, and instead resize FotomotoBar:

.FotomotoToolbarClass a:link,
.FotomotoToolbarClass a:visited,
.FotomotoToolbarClass a:active{
color:#FF7575 !important;
font-size: 12px !important;
}

.FotomotoToolbarClass a:hover {
color:#FDD !important;
font-size: 12px !important;
}

.FotomotoSeparator{
margin: 0 4px !important;}

.FotomotoToolbarClass{
left:0px !important;
width:100% !important;
height:24px !important;
top:auto !important;
bottom:12px !important;
padding:0 !important;
background:none !important;}

.FotomotoBar {
margin:0 auto !important;
text-align:center !important;
width:380px !important;
padding:6px !important;
background-color:#555 !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;}

.FotomotoBar li {
float:none !important;}
1 person has
this problem
+1
Reply
  • I know nothing about css so where do I put this? I am using Weebly and it was mentioned somewhere that they use fancybox. thanks.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • Derek (Official Rep) October 03, 2012 18:39
    Hi thomash2,

    First off, thank you for sharing the solution you came up with - we do appreciate your participation in the Community! I quickly tested your solution and it does seem to work, but please note the anchor hover text needs to be addressed so the font styling doesn't change on mouse rollover.

    Next let me throw in a bit of explanation here: per our engineering team, due to the way fancyBox is structured, we are currently not be able to properly detect the position of the image within a fancyBox as needed to put the Buy Button toolbar in the expected position (over or under the image based on your Buy Button Appearance > Position settings). We want Fotomoto to work with fancyBox, so we made the decision to position the toolbar in a "fixed" location at the top of the page.

    We are in contact with the developers of fancyBox, hoping to rectify the situation. If you would like to see this happen, please consider contacting the developer to let them know you'd like to see fancyBox work better with Fotomoto. Just a quick note to them including the URL for this thread might be helpful to let them know how many people are asking for improvements to the situation.

    For now, you're welcomed to customize the Buy Buttons to your liking, following the directions in Customizing the Buy Buttons.

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

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

  • Derek (Official Rep) January 18, 2019 00:56
    Hi all,

    Just an update regarding fancybox here - we now support up to version 3.5.2 and there is a custom Buy link in the fancybox toolbar. For more info, have a look at https://getsatisfaction.com/fotomoto/topics/fancybox-3-now-supported

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

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