CSS for Microsite

A guide to making small changes on your microsite

Rossella Kruger avatar
Written by Rossella Kruger
Updated over a week ago

If you want to add a little custom design to the Microsite, 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.

The CSS will be added to the Custom CSS tab on the Microsite editor page.

Table of Content


  • Changing the color 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 color 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;
}

  • 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 will have an option to '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.

* {
font-family: Arial;
}

Did this answer your question?