After a policy is successfully generated, you can style your policy to fit your website aesthetics. 


Within the 'view embed code', there is an 'advanced' option, offering several different ways to customize the policies.


If you prefer to have more design control, you can utilize CSS to further style your policies:


The policy has a unique <div> with an ID of policy for styling, so you are able to adjust how your privacy policy looks by targeting this element in your stylesheet. Since this selector targets the privacy policy content, it will not change any of the other styles on your website. Below is an example of how to customize your policy’s appearance:


/* Change style of the policy paragraphs */


#policy p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}


/* Change the H2 (header 2) styles of the policy  */


#policy h2 {
  background-color: black;
  color: white;
  font-weight: bold;
}


/* Change the H3 (header 3) styles of the policy  */

/* remove "font-family" row if you do not want to change the font */


#policy h3 {
  font-family: monospace; 
  font-size: 20px;
}


/* Style the accordions */

/* remove "font-family" row if you do not want to change the font */


#policy .accordion-heading {
    font-family: monospace;
    font-size: 20px;
}



/* Change the style of the policy table(s) */


#policy table {
  border: 1px solid black;
  vertical-align: bottom;
}



/* Change the style of the policy list(s) */

/* remove "font-family" row if you do not want to change the font */


#policy ul {
font-family: monospace;
font-size: 18px;
}



Are you using CSS Compatibility mode?

If you are using our (new) css compatibility mode (under 'view embed code' -> 'advanced' button), you need to use the #policy_embed_div ID Selector instead of the #policy selector. 



If you have any questions or issues, please contact us! Happy to help.