Buy Button customization examples

Here are a few examples of how you can customize the appearance of the Fotomoto Buy Buttons. You can use any other valid CSS style - these are just examples. You can simply copy and paste these examples from here in to the Custom CSS section of the Store Appearance page in your Fotomoto Dashboard.

To do so, click on Show CSS and paste the code leaving one space between the existing code above and below it. 

To learn more, please see Customizing the Buy Buttons.

To move your Buy Buttons a few pixels up or down:

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

 

To move your Buy Buttons a few pixels to the left or right:

.FotomotoToolbarClass { 
	margin-left: -5px !important; /* move 5 pixels to the left */ 
	} 
	
	.FotomotoToolbarClass { 
	margin-left: 5px !important; /* move 5 pixels to the right */ 
	}

 

To make less spacing between the "Buy Print" and "Send as E-card" buttons:

.FotomotoToolbarClass { 
	width: 400px !important; /* make it 400 pixels end to end */ 
	}

 

To change the size and color of the font for the "Buy Print" and "Send as E-card" buttons:

.FotomotoToolbarClass a, 
	.FotomotoToolbarClass a:link, 
	.FotomotoToolbarClass a:visited, 
	.FotomotoToolbarClass a:active, 
	.FotomotoToolbarClass a:hover { 
	font-size: 12px; /* change font size to 12 pixels */ 
	color: #333 !important; /* show the links in gray */ 
	} 

 

To center the buy buttons over an image when eCards have been disabled:

.FotomotoToolbarClass { 
width: 300px !important;
/* increase or decrease the width as needed to center the links. If the links break to a new line, increase the width */
}

 

If your photo is not centered and you want the Buy Buttons not to be centered:

.FotomotoToolbarClass { 
	margin-left: 0px !important; /* set left margin to zero */ 
	} 

 

Using an image for the "Buy Print" link:

li.FotomotoPrintButton a { 
	text-indent: -9999px !important; 
	display: block; 
	width: 104px; /* width of the image */ 
	height: 36px; /* height of the image */ 
	background: transparent url(http://www.mycoolbutton.com/img/butto...) no-repeat top left !important; /* replace image url with yours */ 
	} 

 

Making all the Buy Buttons go to left:

.FotomotoSep2 { 
	display:block !important; 
	} 
	.FotomotoECardButton { 
	float:left !important; 
	} 

 

Making all the Buy Buttons go to right:

.FotomotoSep2 { 
	display:block !important; 
	} 
	.FotomotoECardButton { 
	float:left !important; 
	} 
	.FotomotoBar { 
	float:right !important; 
	}

 

Hiding one of the separators between the Buy Buttons:

.FotomotoSep4 { 
	display:none; /* hides the fourth separator - you can hide the other ones using .FotomotoSep1, .FotomotoSep2, etc. */