How to go around the incompatibility issues with OceanWP theme

WP Full Picture lets you style your consent banner using WordPress theme customizer. Unfortunately, OceanWP theme introduces changes to how the customizer works, which makes styling the banner impossible.

In this article, I will tell you what to go around it.

What you need to know

WP Full Picture lets you style many aspects of your consent banner. Some of this information, such as the position of the banner, visible buttons and texts, is saved as an “option” in WordPress.

This is important, because options are remembered by WordPress no matter what theme you use.

Other things, like colours, text sizes or borders, are saved as “theme mods” and they change when you change your theme.

With this in mind…

How to go around problems with OceanWP theme

To style the consent banner, you need to:

1. Temporarily switch to a different theme
2. Change the main settings of the banner (position, texts, visible elements)
3. Switch back to OceanWP theme
4. Go to “General Settings” > “Import / Export” and Import WP FP’s settings file.
5. Open the file in the notepad application (more advanced editors like “MS Word” will not work).
6. At the end of the file you will see a “theme_mods” section (see below). Modify them to your liking (see the description below for more info).
7. Save the file (do not modify its file format. It must be .json) and re-upload the file with your changes.

How to change the styling using theme_mods settings in the “Import/Export” file.

Theme_mods section contain settings for the visual aspects of the notice.

Mostly, they contain the Hex colour values, like “#111222”. Enter in Google “hex color picker” for a generator of these colour codes.

Apart from them, the theme_mods section contains other parameters which can contain these values:

1. fupi_cookie_notice_border can be set to one of these values: 'none', 'small_shadow', 'large_shadow', 'thin_border' or 'wide_border'
2. fupi_cookie_notice_size can have one of these values: 'default', 'small', 'medium' or 'large',
3. fupi_notice_round_corners must have a numeric value representing how round the borders of the notice should be (in pixels)
4. fupi_cookie_notice_heading_tag represents what HTML tags should be used for section headings in the notice. The options are: 'p', 'h3', 'h2', 'div'. ‘p’ is the default.
5. fupi_cookie_notice_h_font_size is for setting the size of headings (in pixels) and takes numerical values, like 18, 19, 20, etc. (without apostrophes)
6. fupi_cookie_notice_p_font_size is for setting the size of paragraph texts and is set in identical manner as above.

Remember, that all values that are not numbers, need to be entered in straight apostrophes (next to the “Enter” button on the keyboard).