Support Center

Buy Button customization examples

Last Updated: Jan 10, 2019 12:55PM PST

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 to 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 about how to customize the Buy Buttons, see our post here.

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. */
Don't find what you are looking for? Try our community discussions.

Announcements View Discussions

Have A Question?

Recent Discussions

Go to Discussion Forums ​​

Track Your Package

Track your FedEx package
Track Your UPS package


powered by Desk.com