How to style policies

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

Within the 'embed codes' screen, there is an advanced option by clicking the "styling options" button, 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_embed_div p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

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

.policy_embed_div 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_embed_div h3 {
  font-family: monospace; 
  font-size: 20px;
}

/* Style the accordions */

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

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

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

.policy_embed_div 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_embed_div ul {
font-family: monospace;
font-size: 18px;
}