{"id":1206,"date":"2020-04-06T17:34:08","date_gmt":"2020-04-06T15:34:08","guid":{"rendered":"https:\/\/voneff.de\/?p=1206"},"modified":"2020-04-06T23:38:41","modified_gmt":"2020-04-06T21:38:41","slug":"how-to-customize-the-look-of-the-privacy-policy-by-iubenda","status":"publish","type":"post","link":"https:\/\/voneff.de\/en\/how-to-customize-the-look-of-the-privacy-policy-by-iubenda\/","title":{"rendered":"How to Customize the Look of the Privacy Policy by iubenda"},"content":{"rendered":"\n

I am using services by the Italian provider iubenda<\/em><\/a> to make my websites compliant with GDPR and other privacy regulations. (Use this link <\/a>to get 10% off of your purchase on iubenda<\/em>\u2019s website and earn myself a referral commission).<\/p>\n\n\n\n

iubenda <\/em>let\u2019s you configure a custom privacy policy from a central dashboard on their website which you can then embed into your own website \u2013 such as the privacy policy of this website<\/a>. The main advantage is that your privacy policy will stay up-to-date as it is hosted and (legally) maintained by iubenda<\/em>, and that you can create synchronized translations of every policy with one click \u2013 very handy for multilingual websites. Also, you can easily add or remove any clauses whenever you change something on your website.<\/p>\n\n\n\n

The downside: The privacy policy comes with its own styling which in my eyes is quite opinionated and does not adapt to your WordPress theme styles at all. This might mean quite a break from the styling of your website \u2013 but luckily can be fixed with some CSS.<\/p>\n\n\n\n

Just to be clear: You can actually also enable a plain HTML version with no styles when embedding the text into the body of your website. This version picks up theme styles just fine \u2013 but its content only includes the long and boring legal text of the policy, and omits the first part of iubenda\u2019s policy that features a nice little overview over all the different ways your website is collecting data.<\/p>\n\n\n\n

Where do I put my custom CSS?<\/h2>\n\n\n\n

There are numerous ways you can add custom CSS to your website \u2013 this article on wpbeginner.com<\/a> explains different options.<\/p>\n\n\n\n

I always work with child themes, and for the sake of keeping my assets organized and maintainable I usually register separate stylesheets for cases like this. To register an additional stylesheet in the functions.php<\/code> of my child theme use a function like this:<\/p>\n\n\n\n

function yourprefix_iubenda_stylesheet() {\n    wp_enqueue_style( 'yourprefix-iubenda', get_stylesheet_directory_uri() . '\/assets\/css\/yourprefix-iubenda-style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'yourprefix_iubenda_stylesheet' );<\/code><\/pre>\n\n\n\n
This snippet registers a stylesheet sitting in a sub-folder of the child theme with the path \/asssets\/css\/<\/code>. Spreading your CSS out across multiple files may result in additional server requests and adds to your page load time but you can use a plugin like Autoptimize<\/a> to aggregate and minify all your CSS.<\/p>\n\n\n\n
How do I know which styles to change?<\/h2>\n\n\n\n
When you embed the iubenda <\/em>snippet into your website it loads a stylesheet from iubenda\u2019s server each time the privacy policy is opened. To access this stylesheet you can open up the DevTools in Chrome or Firefox, highlight any part of the text with the inspect tool and look for the file privacy_policy.css<\/code> \u2013 or you can just use this link<\/a> to access the file from iubenda<\/em> directly.<\/p>\n\n\n\n
\"A
Here\u2019s where you can find iubenda\u2019s stylesheet with DevTools<\/figcaption><\/figure>\n\n\n\n
You can then alter the whole or any part of this stylesheet in any way you see fit and save your custom styles in your place of choice, see above.<\/p>\n\n\n\n
Your CSS might look something like this:<\/p>\n\n\n\n
#iubenda_policy {\n\tfont-family: 'Noticia Text',serif!important;\n\tfont-size: 19px!important;\n\tfont-size: 1.1875rem!important;\n\tfont-weight: normal!important;\n\tline-height: 1.6!important; \n\tcolor: #1a1a1a!important;\n  -webkit-font-smoothing: antialiased!important;\n  -moz-osx-font-smoothing: grayscale!important;\n}<\/code><\/pre>\n\n\n\n
You will probably notice the use of the !important<\/code> CSS property after every style change. This is bad practice \u2013 but I could not find a different way to override the styles loaded from iubenda. Does anyone know better?<\/p>\n\n\n\n
The Uku-ization of iubenda<\/h2>\n\n\n\n
I pretty much adapted the style embedded text to the current parent theme of this website, Uku by Elmastudio<\/a>. The full Uku-ization<\/em> of iubenda\u2019s privacy policy can be found in this CSS gist<\/a>.<\/p>\n\n\n\n
Uku has this little speciality<\/em>: the theme authors decided to use a dash as the bullet point for the un-ordered lists by includig it with a ::before<\/code> pseudo element. But \u2013 this decision is somewhat short-sighted in my opinion as this dash now turns up in places where list-style<\/code> was actually decklared none<\/code>. See below:<\/p>\n\n\n\n
\"\"
The red arrows indicate where the dash shows up.<\/figcaption><\/figure>\n\n\n\n
One could call this a bug \u2013 but you could also argue that third parties should not hi-jack lists like this? Anyway: If you\u2019d like to keep Uku\u2019s list styles intact but would want to fix these errors just here, you could include a little snippet like the one following into your custom CSS:<\/p>\n\n\n\n
.page-id-495 #iubenda_policy ul li::before  {\n    content: none;\n}<\/code><\/pre>\n\n\n\n
You’d just have to change the 495<\/code> into the ID of the page on which you are displaying the privacy policy. (Page ID<\/em>? What\u2019s that? Find out here<\/a>.)<\/p>\n\n\n\n
\n\n\n\n
Well, this is it. What would you do different? Have you styled your iubenda privacy policies in any different kind of way? Let me know in the comments!<\/em><\/p>\n\n\n\n
\n\n\n\n
The header image is based on an illustration from Open Doodles<\/a> by the awesome Pablo Stanley<\/a>, with some additional lettering by myself<\/a>. The image is released into the Public Domain<\/a>, just like the original. Attribution is not required but appreciated. <\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
The styles that come with the embedded text from iubenda are pretty ugly. Let\u2019s change that! This tutorial shows you how to adapt them to your WordPress theme.<\/p>\n","protected":false},"author":1,"featured_media":1259,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_titles_title":"","_seopress_titles_desc":"The styles that come with the embedded text from iubenda are pretty ugly. Let\u2019s change that! This tutorial shows you how to adapt them to your WordPress theme.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"https:\/\/voneff.de\/wp-content\/uploads\/2020\/04\/voneff-blog-iubenda-uku-tutorial-header-1640x856-opengraph.png","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[{"url":"","title":"","desc":"","thumbnail":"","duration":"","rating":"","view_count":"","tag":"","cat":""}],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"wpf_show_in_dewp_planet_feed":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"categories":[3,290],"tags":[223,37,42,61,210,128],"class_list":["post-1206","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-is-poetry","category-tutorials","tag-projekt26","tag-css","tag-elmastudio","tag-iubenda","tag-uku","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/posts\/1206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/comments?post=1206"}],"version-history":[{"count":33,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/posts\/1206\/revisions"}],"predecessor-version":[{"id":1265,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/posts\/1206\/revisions\/1265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/media\/1259"}],"wp:attachment":[{"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/media?parent=1206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/categories?post=1206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/tags?post=1206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}