

{"id":77,"date":"2018-04-15T04:55:43","date_gmt":"2018-04-15T04:55:43","guid":{"rendered":"https:\/\/www.holithemes.com\/plugins\/wca\/?p=77"},"modified":"2018-04-15T04:55:43","modified_gmt":"2018-04-15T04:55:43","slug":"customize-style-2","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click\/customize-style-2\/","title":{"rendered":"Customize Style-2"},"content":{"rendered":"<p>Style-2, Custom HTML<\/p>\n\r\n    <div data-htclick=\"style-2-sc\" class=\"wca_shortcode ht-click-analytics\" style=\"  z-index: 9999; cursor: pointer; display: inline; \" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/customize-style-2\/, Hello, How are you', '_blank');  \"  >\r\n    <button>WhatsApp us<\/button>\r\n    <\/div>\r\n    \n<p>\u00a0<\/p>\n<p>default code added to the button looks like how the button is configured on the theme.<\/p>\n<h2>Style-2 Custom HTML<\/h2>\n<figure id=\"attachment_95\" aria-describedby=\"caption-attachment-95\" style=\"width: 931px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/04\/style-2.png\"><img decoding=\"async\" class=\"wp-image-95 size-full\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/04\/style-2.png\" alt=\"style-2\" width=\"931\" height=\"319\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/04\/style-2.png 931w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/04\/style-2-300x103.png 300w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/04\/style-2-768x263.png 768w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/a><figcaption id=\"caption-attachment-95\" class=\"wp-caption-text\">Style-2, plugin setting page &#8211; &#8220;customize styles&#8221;<\/figcaption><\/figure>\n<h2>Custom HTML<\/h2>\n<p>Custom HTML block &#8211; add your own style.<\/p>\n<p>e.g.<\/p>\n<div>\n<pre>&lt;style&gt;\n.whatsapp-chat {\ncolor: orange;\n}\n&lt;\/style&gt;\n\n&lt;button class=\"whatsapp-chat\"&gt;WhatsApp Chat&lt;\/button&gt;<\/pre>\n<div>\u00a0<\/div>\n<\/div>\n<p>We are planning to add many samples to make easy to add.<\/p>\n<p>To add CSS styles can add inline or use the block &#8216;style&#8217; tag.<\/p>\n<pre>&lt;style&gt;\n\/* CSS code here *\/\n&lt;\/style&gt;<\/pre>\n<p>To add JavaScript within the block add within &#8216;script&#8217; tag.<\/p>\n<pre>&lt;script&gt;\n\/* JavaScript code here *\/\n&lt;\/script&gt;<\/pre>\n<p>\u00a0<\/p>\n<p>Can add inline SVG image code in this block.<\/p>\n<h2>Extra style-blocks<\/h2>\n<p>Style-4 is also similar to style-2<\/p>\n<p>Sometimes we may need to show different Custom HTML blocks on different devices ( Mobile, Desktop ). or different style on WooCommerce single product page, or while using shortcodes.<\/p>\n<h2>Custom HTML &#8211; Generators \/ Tools<\/h2>\n<p>In the Web, there are so many tools available to generate HTML, CSS, JavaScript.<\/p>\n<p><a href=\"https:\/\/webcode.tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/webcode.tools\/<\/a><\/p>\n<p><a href=\"https:\/\/html-online.com\/editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/html-online.com\/editor\/<\/a><\/p>\n<p>To Get some Samples<\/p>\n<p><a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">codepen<\/a><\/p>\n<hr \/>\n<p>We are not responsible for anything from the links ( outside of this website ) added above<\/p>\n<p>and please check their license, terms of use.<\/p>\n<hr \/>\n<p><span style=\"font-size: 1rem;\">\r\n    <div data-htclick=\"style-2-sc\" class=\"wca_shortcode ht-click-analytics\" style=\" position:fixed;;right:10px;bottom:10px;; z-index: 9999; cursor: pointer; display: inline; \" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/customize-style-2\/, Hello, How are you', '_blank');  \"  >\r\n    <button>WhatsApp us<\/button>\r\n    <\/div>\r\n    <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Style-2, Custom HTML \u00a0 default code added to the button looks like how the button is configured on the theme. Style-2 Custom HTML Custom HTML Custom HTML block &#8211; add your own style. e.g. &lt;style&gt; .whatsapp-chat { color: orange; } &lt;\/style&gt; &lt;button class=&#8221;whatsapp-chat&#8221;&gt;WhatsApp Chat&lt;\/button&gt; \u00a0 We are planning to add many samples to make easy &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/holithemes.com\/plugins\/click\/customize-style-2\/\"> <span class=\"screen-reader-text\">Customize Style-2<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-77","post","type-post","status-publish","format-standard","hentry","category-docs","category-styles"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}