TermsFeed AutoTerms CSS Classes and Containers

Style the Compliance Kits with your own CSS

Every compliance kit in TermsFeed AutoTerms except Cookie Consent prints fixed CSS classes, and the 2 notice bars print inside 4 containers with fixed IDs. Use them in the "Additional CSS" field of a kit, in your WordPress theme stylesheet, or in a front-end test. The plugin prints the "Additional CSS" field after the styles of the color and font fields, so a rule of yours with the same selector overrides them.

Under the "Additional CSS" editor of each compliance kit except Cookie Consent, the "Available CSS selectors:" list names the main selectors of the kit, each after a label. Click a selector to insert it into the editor. The Cookie Consent kit takes its consent banner from TermsFeed Free Cookie Consent 4.2.0. Look up the consent banner ids and classes in Free Cookie Consent DOM and CSS Reference.

The notice bar containers

"Announcement bar position" and "Announcement bar type" in the Cookie Notice and Update Notices kits combine into 4 places, and each place is a <div> with a fixed ID. A container prints only when a kit or a wpautoterms_container callback puts something in it. The Cookie Notice bar and the Update Notices bar share the containers, and the Update Notices bar comes first when both bars sit in the same place.

Match the position and type you chose in a kit to the container ID that holds the bar.

The "Available CSS selectors:" list in both notice kits holds the 4 container IDs. Print your own markup in a container with the wpautoterms_container action in TermsFeed AutoTerms Action Hooks and Filters.

Cookie Notice selectors

The "Available CSS selectors:" list on the Cookie Notice screen labels the bar "Cookie notice bar class:" and its link "Cookie notice bar close button class:". A click on the selector after "Cookie notice bar close button class:" inserts .wpautoterms-notice-close. The "Close" link of both notice bars carries that class, so put .wpautoterms-cookies-notice before it to style the Cookie Notice link alone. Style the Cookie Notice bar and its links with these selectors.

This rule adds space around the message.

.wpautoterms-cookies-notice {
    padding: 12px 16px;
}

Update Notices selectors

The "Available CSS selectors:" list on the Update Notices screen labels the message "Update notice class:" and its link "Close button class:". The selector after "Close button class:" inserts the shared .wpautoterms-notice-close, so put .wpautoterms-update-notice before it to style the Update Notices link alone. The messages sit inside a wrapper, #wpautoterms-update-notice-placeholder. Style the wrapper, each message, and its links with these selectors.

This rule adds space around each message.

.wpautoterms-update-notice {
    padding: 8px 16px;
}

Links to Legal Pages selectors

The row of footer legal links prints where the theme calls the WordPress wp_footer() function, outside the 4 notice bar containers. Most themes call it at the end of the page, so the row sits below the theme footer and above a notice bar set to "bottom" and "static". The Cookie Consent kit prints its "Update cookies preferences" link right after the row while its "Insert link for users to open Preferences Center" option is on.

Style the footer row, its separators, and its links with these selectors.

The row underlines a link on hover by default. A row with 2 legal pages and the default separator prints this HTML.

<div class="wpautoterms-footer"><p>
    <a href="https://example.com/termsfeed/privacy-policy/">Privacy Policy</a><span class="separator"> - </span><a href="https://example.com/termsfeed/terms-and-conditions/">Terms and Conditions</a>
</p></div>

This rule adds space above and below the row.

.wpautoterms-footer {
    padding: 16px 0;
}

Endorsements selectors

The Endorsements box prints inside the content of a single blog post, before or after that content. The box styles print in a <style> element right before the box, and only when a style field or "Additional CSS" holds a value.

Style the box and the links inside it with these selectors.

This rule draws a colored border and adds space around the text.

.wpautoterms-endorsements {
    border-left: 4px solid #1a54a9;
    padding: 12px 16px;
}