CSS Lesson #3: Using your own Document CSS

And fixing the Revoke Button when using your own CSS

We have added our own CSS for the legal documents, so out-of-the-box, your documents look great at the front-end. If you want to add to our CSS, you can add custom css under settings. With the right CSS properties, you can change almost anything.

If you rather let your theme’s CSS control the look of the documents, you can disable our CSS alltogether and change custom CSS in your theme if necessary.

The revoke button

Important to note is we added CSS for the revoke cookie consent button below the Cookie Policies. When our CSS is disabled the button’s properties will change, for example:

Document CSS Enabled

Document CSS Disabled

When Document CSS is disabled you will see the following:

Current status: AcceptedCurrent status: Denied

To hide the current status, please add the following to custom CSS:

/* styles for the status in document */
.cmplz-status-denied, .cmplz-status-accepted {
display:none;
}

To change the button use (example):

/* styles for the revoke button in document*/
#cmplz-document button.cc-revoke-custom {
background-color: #ffd600;
border-color: #ffd600;
height: 35px;
font-family: inherit;
font-weight: bold;
}

If you want to change the hover properties. Please add :hover to your property.

#cmplz-document button.cc-revoke-custom:hover {}

Added CSS for revoke button


If you need to change the headings, colors, font-size and more, please visit Complianz > Settings. We have added the most common properties for you to our Custom CSS. Try it out, or leave us a message!

Subscribe to our weekly CSS Lessons

    For EU Subscribers | Privacy Statement
    For USA Subcribers | Privacy Statement

  • This field is for validation purposes and should be left unchanged.
© Copyright - Complianz 2019
×

Complianz Privacy Suite 3.1 is live!

See our new features and available documentation. Read more