{"id":418,"date":"2017-11-16T12:16:28","date_gmt":"2017-11-16T11:16:28","guid":{"rendered":"https:\/\/laikalaikacoding.wordpress.com\/?p=418"},"modified":"2017-11-16T12:16:28","modified_gmt":"2017-11-16T11:16:28","slug":"styling-the-collapse-o-matic-plugin-for-wordpress","status":"publish","type":"post","link":"https:\/\/voneff.de\/en\/styling-the-collapse-o-matic-plugin-for-wordpress\/","title":{"rendered":"Styling the Collapse-O-Matic plugin for WordPress"},"content":{"rendered":"<p>I used the <a href=\"https:\/\/wordpress.org\/plugins\/jquery-collapse-o-matic\/\">Collapse-O-Matic plugin<\/a> for a recent project in order to display content with a so-called accordion effect: a visitor has to click on a headline or different element to reveal more content beneath.<\/p>\n<p>The Collapse-O-Matic plugin stood out through its number of active installations (70,000) and by having a pretty large community around it that actively is supporting the plugin.<\/p>\n<p>Just a few customizations were necessary.<\/p>\n<p>I wanted to customize the arrows which let\u2019s you open and close the &#8220;accordion&#8221;. As they are included as image files I made new ones in the format of 12\u00d716px. In order to not having them overwritten when updating the plugin I uploaded them to an &#8220;\/images&#8221; folder in my child theme and added the following to the style.css of my child theme (in order with the instructions by the plugin author <a href=\"https:\/\/plugins.twinpictures.de\/plugins\/collapse-o-matic\/documentation\/#arrows\">here<\/a>):<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.collapseomatic {\n    background-image: url(images\/arrow-down.png) !important;\n}\n.colomat-close {\n    background-image: url(images\/arrow-up.png) !important;\n}<\/pre>\n<p>I also wanted to move the arrows down a notch. As these are included as background images I used the CSS background-position property as detailed <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_background-position.asp\">here on w3schools.com<\/a>:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.collapseomatic {\n    background-position: 0 6px!important; \n}\n.colomat-close {\n    background-position: 0 6px!important; \n}<\/pre>\n<p>Further customizations included indenting the content a little bit from the left and making some room to the bottom of the expanded content:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.collapseomatic {\n    padding: 0 0 10px 22px!important;\n}\n\n.collapseomatic_excerpt, .collapseomatic_content {\n    margin-left: 22px!important;\n    padding: 0 0 16px 0!important;\n}\n\n<\/pre>\n<p>Overall, a pretty good experience with <a href=\"https:\/\/wordpress.org\/plugins\/jquery-collapse-o-matic\/\">this plugin<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I used the Collapse-O-Matic plugin for a recent project in order to display content with a so-called accordion effect: a visitor has to&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_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":"","_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":0,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_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,6],"tags":[12,37,128],"class_list":["post-418","post","type-post","status-publish","format-standard","hentry","category-code-is-poetry","category-plugin-reviews","tag-accordion","tag-css","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/posts\/418","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=418"}],"version-history":[{"count":0,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/posts\/418\/revisions"}],"wp:attachment":[{"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/categories?post=418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/voneff.de\/en\/wp-json\/wp\/v2\/tags?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}