If you want to add a little custom design to the Microsite, such as moving the FaceMatch icon or changing the colour of the GIF and Photo buttons, follow the steps below.
The CSS will be added to the Custom CSS tab on the Microsite editor page.
Table of Content
Changing the colour of GIF and Photo buttons
#gif
{
color: red !important;
border: 1px solid red !important;
border-radius: 10px !important;
}
#photo
{
color: red !important;
border: 1px solid red !important;
border-radius: 10px !important;
}
#video
{
color: red !important;
border: 1px solid red !important;
border-radius: 10px !important;
}
#ai
{
color: red !important;
border: 1px solid red !important;
border-radius: 10px !important;
}
Changing the colour of the social sharing buttons
div#main_sharing_container a, div#secondary_sharing_container a, #photo-twitter-share, #photo-download
{
color: white !important;
border: 1px solid white !important;
background: black !important;
}
Changing the color of the Gallery Button
a#photo-gallery
{
color: white !important;
border-color: white !important;
}
Move the FaceMatch icon
#facematch
{
left: 0 !important;
margin-left: 15px !important;
}
Correct Twitter to X icon
Please find attached CSS code that will be added to a Microsite.
Note that some rules apply, and anything under
/* This will not be part of the code */
It is just information on what to do for a specific Microsite.
Black X
a#photo-twitter-share:hover {
background: #eee !important;
}
.fa-twitter:before {
position: relative;
content: '' !important;
background: url(https://photobooth-files.s3.amazonaws.com/images/twitter_white.svg);
width: 14px;
height: 14px;
display: block;
/* For NYC, Barcelona and Brooklyn template, please change Top to 6px. For Rio template set to 0 */
top: 15px;
left: 0px;
filter: invert(1);
}
/* For Brooklyn and Barcelona template please delete everything under this */
.photo-twitter-share {
background: black !important;
}
White X
a#photo-twitter-share:hover {
background: #eee !important;
}
.fa-twitter:before {
position: relative;
content: '' !important;
background: url(https://photobooth-files.s3.amazonaws.com/images/twitter_white.svg);
width: 14px;
height: 14px;
display: block;
/* For NYC, Barcelona and Brooklyn template, please change Top to 6px. For Rio template set to 0 */
top: 15px;
left: 0px;
}
a#photo-twitter-share:hover .fa-twitter:before{
filter: invert(1);
}
/* For Brooklyn and Barcelona template please delete everything under this */
.photo-twitter-share {
background: black !important;
}
Changing font styles in microsites using Google fonts
*This will not work for emails
This method only supports Google fonts as it is well supported and will work on almost all browsers.
Go to Google Fonts, select or search for the font you want, and then click on the element box icon, as seen below.
Step 1
Step 2
Once you have selected your desired font, you will have a further option of selecting the style within that font, as shown below. You can click on + select this style when ready and proceed to the next options.
Step 3
Now you can 'Use on the web' as shown below on the right-hand side tab. It will now have a 'link' you can copy, which begins with "<link rel=" as shown below.
Step 4
Head over to the microsite tab on your dashboard and click the "Add Header Snippet" and then copy the "<link rel=" as per the above.
Step 5
Once you have entered the info, click "Done" and the "Microsite Template Library" button. Now, you can go into the template you are trying to edit and select the text you want to change.
Copy the "font-family" text (highlighted below).
And paste it into that particular text's "Element Style" section.
Or
Use this CSS to apply across the Microsite.
Replace the Font Family with the one from Google Fonts.
* {
font-family: Arial;
}
Add the above CSS to the Custom CSS button to apply this font to all text on the Microsite.
