If you want to add a little custom design to your micro sites, such as moving the FaceMatch icon or changing the color of the GIF and Photo buttons, you can do so by following the below steps.

Changing the color of GIF and Photo buttons
- You can replace "green" with your colour of choice

#gif
{
color: green !important;
}

#photo
{
color: green !important;
}

Changing the color of the social sharing buttons

div#main_sharing_container a, div#secondary_sharing_container a, #photo-twitter-share, #photo-download
{
color: lightgrey !important;
border-color: lightgrey !important;
background: white !important;
}

a#photo-gallery
{
color: grey !important;
border-color: grey !important;
}

#gif
{
color: grey !important;
}

#photo
{
color: grey !important;
}

a#photo-gallery
{
color: white !important;
border-color: white !important;
}

To move the FaceMatch icon
- For example, to the left

#facematch
{
left: 0;
margin-left: 15px;
}

Changing font styles in micro sites 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.

Step 1

Go to https://fonts.google.com/ select or search for the font you want and then click on the element box icon as seen below.

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.


Now you will have an options to 'Use on 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 3

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 4


Once you have entered the info then click "Done" and then click the "Microsite Template Library" button.  Now 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 the "Element Style" section for that particular text.

Done!

Did this answer your question?