{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-customize-styles-for-recommendation-cards/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"9fdf7841-38ba-5283-9baa-9ad43a70a906","html":"<h3>How to enable:</h3>\n<p>Initially we provide a default looking article recommendation cards.</p>\n<p>You can customize the looking’s of the recommendation articles cards in Emote Widget and in Talk of the Town that is a part of Comment Widget at your choice.</p>\n<br>\n<h3>Example:</h3>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">VUUKLE_CONFIG= {\n\ttheme: {\n\t\tcardStyles: {\n\t\t\tcolor: &#39;#333&#39;, //changes the color of the card text.\n\t\t\tborderRadius: 0, //configure the shape of the corners\n\t\t\tboxShadow: &#39;0 0 2px 0 rgba(0,0,0,.15)&#39;, //customize shadows\n\t\t\t&#39;.v-card__heading&#39;: {\n\t\t\t\tfontFamily: &#39;Playfair Display,serif&#39;, //choose preferable font\n\t\t\t}\n\t\t\t,\n\t\t\t&#39;&amp;:hover&#39;: {\n\t\t\t\ttransform: &#39;none&#39;, //pick an effect on hover\n\t\t\t\tcursor: &#39;pointer&#39;, //define the cursor\n\t\t\t\tboxShadow: &#39;0 0 10px 0 rgba(0,0,0,.05)&#39;, //customize shadows on hover\n\t\t\t\tborder: &#39;none&#39;, //add or delete borders\n\t\t\t\ttransition: &#39;box-shadow .2s ease-in-out&#39;, //add animation 3D effect\n\t\t\t\t&#39;.v-card__heading span&#39;: {\n\t\t\t\t\tborderBottom: &#39;1px solid #27ffbc&#39;, //configure bottom border\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},</code></pre></div>\n<br>\n<br>\n<p><img src=\"/img/talk-of-the-town.png\"></p>","frontmatter":{"title":"How to customize styles for recommendation cards","date":"November 29, 2018","category":"FAQ","tags":["how to","style","recommendation","cards"],"shortDescription":"We want to create the best experience possible for you. Now you can customize the looking's of the recommendation articles cards."}}},"pageContext":{"id":"9fdf7841-38ba-5283-9baa-9ad43a70a906"}}}