Make the colors and fonts you saved show on your WordPress website

The color and font fields in TermsFeed AutoTerms style the Cookie Notice, Update Notices, Links to Legal Pages, and Endorsements kits. A saved value that does not show comes from a wrong color format, a stronger theme rule, the wrong kit, a missing capability, or a cache. The plugin prints the saved values in a <style type="text/css" media="all"> element, followed by the code in the "Additional CSS" field of the kit. An empty field leaves your theme style in place.

Inspect the element first. Right-click the bar, the footer legal links, or the disclaimer, select Inspect, and read the Styles panel of the Elements tab: it shows which rule sets each color and font. Look up the selectors of each compliance kit except Cookie Consent in TermsFeed AutoTerms CSS Classes and Containers.

Cause 1: The color is not a hex code

The plugin saves a color only as a hex code, #rgb or #rrggbb, so the plugin saves any other value as an empty field with no message. A color name such as red, an rgb() value, or a hex code with transparency such as #ff000080 all end up empty. The kit then shows your theme color.

Reload the kit screen after saving. The color field is empty where you typed a value.

Enter the color again as a hex code and save it.

  1. Pick the color with the color picker of the field, which writes a hex code, or type a hex code such as #1a54a9 if you know the value.
  2. Click the "Save Changes" button, reload the screen to confirm that the field still holds the value, and clear the page cache.

Cause 2: A theme CSS rule takes precedence over the kit style

A rule in the theme stylesheet that targets the same element with an equal or more specific selector, or with !important, takes precedence over the kit style. The kit styles print before the theme stylesheet, so a theme rule of the same weight prints later and takes precedence. The Endorsements style is the exception: it prints inside the post, after the theme stylesheet, so only a more specific theme rule, or one with !important, takes precedence there. Themes often style every link in the footer, which overrides the "Links color" field in the Links to Legal Pages kit. The saved value is correct, and the browser applies the theme rule instead.

The Styles panel of the Elements tab shows the conflict. The declaration the kit prints appears struck through, with the theme rule above it.

Override the theme rule from the kit itself, with the class the kit prints and !important. This rule overrides the theme color of the footer legal links.

.wpautoterms-footer a {
  color: #1a54a9 !important;
}

Add the rule in the kit, then check it on a fresh copy of the page. Look up the selector of each compliance kit element, for every kit except Cookie Consent, in TermsFeed AutoTerms CSS Classes and Containers.

  1. Paste the rule into the "Additional CSS" field of the kit and click the "Save Changes" button.
  2. Clear the page cache.
  3. Reload the page and confirm in the Styles panel that your rule sets the color.

Cause 3: The field styles a different kit or element

Each compliance kit has its own color and font fields, so a value set on one kit leaves the others unchanged. The Cookie Consent kit has no field for a custom color: its consent banner follows "Color palette" and the Additional CSS on its Customization tab. On the Links to Legal Pages screen, "Text color" sets the separator between the links, and "Links color" sets the links.

Match the element to the kit that prints it. The footer legal links come from Links to Legal Pages, the bars from Cookie Notice or Update Notices, and the disclaimer box from Endorsements. A value saved on another kit, or in a field that styles another part, explains the old look.

Set the value on the kit that prints the element.

  1. Open the settings screen for the kit that prints the element.
  2. Set the field that styles that part, such as "Links color" for the footer legal links.
  3. Click the "Save Changes" button and clear the page cache.

Style the consent banner on the Customization tab of the Cookie Consent kit, which no other kit field reaches. Choose the palette and the consent banner CSS with Customize the WordPress Cookie Banner.

Cause 4: The Additional CSS was not saved for lack of unfiltered_html

The plugin keeps the stored Additional CSS for an account without the WordPress unfiltered_html capability, so your new CSS never reaches the page. The screen shows "Your account is not allowed to add JavaScript or CSS code (the "unfiltered_html" capability is required), so the previous code was kept." after the save.

Look for that message at the top of the kit screen, then reload. The field still holds the old CSS.

Only an account with the capability saves new CSS. Ask a user with unfiltered_html to save it, with the steps for each kind of account in Code or HTML Not Saving in WordPress.

Cause 5: A cache serves the old style

A page cache, or a page speed plugin that moves inline CSS into a file, keeps serving the style from before your change. The kit styles sit in the page itself, so a cached page carries the old values until you clear the cache.

Compare a fresh copy of the page with the cached one while logged out, because most page caches skip logged-in users. Close every private window, open a new one, and load the page with ?nocache=1 added to the address, then the plain address. The new style on the first address and the old style on the plain address point to a cache. A cache or content delivery network (CDN) that ignores query strings shows the old style on both addresses, so clear its cache instead.

Clear every cache that holds the old style, then load the page fresh.

  1. Purge the page cache of the caching plugin, the host, and the CDN.
  2. Clear the CSS cache of the page speed plugin where it combines inline styles.
  3. Close every private window, open a new one, and load the plain address.

How to verify that the colors and fonts apply

A working style shows the saved color and font on your WordPress website, and the Styles panel lists the kit rule with no line through it. Compare the kit screen with the website side by side.

  1. Reload the kit screen and confirm that each color field holds a hex code.
  2. Clear the page cache, close every private window, open a new one, and load a page of your WordPress website that shows the element. The Endorsements box shows on a single blog post, and the Update Notices bar only after a recent legal page edit.
  3. Right-click the element, select Inspect, and confirm in the Styles panel that the browser applies the value you saved in the kit.
  4. Confirm that the color and the font on screen match the saved values.