{"id":3679,"date":"2020-07-01T05:58:29","date_gmt":"2020-07-01T05:58:29","guid":{"rendered":"https:\/\/taggbox.com\/taggbox-support-new\/?p=3679"},"modified":"2021-05-15T05:59:44","modified_gmt":"2021-05-15T05:59:44","slug":"how-to-edit-cards-style-in-your-widget","status":"publish","type":"post","link":"https:\/\/taggbox.com\/support\/how-to-edit-cards-style-in-your-widget\/","title":{"rendered":"How to Edit Cards Style of your Widget?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Edit and add extra functionality to your Feed Cards like CTA, Font, Color etc. to make your Feeds more appealing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the steps below: <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"subTitle1\"><strong>Taggbox&nbsp;Dashboard<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First,&nbsp;<a href=\"https:\/\/app.taggbox.com\/widget\/\">Login<\/a>&nbsp;to your Taggbox Widget Account. You\u2019ll see your widget dashboard like this:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1302\" height=\"696\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Dashboard-6.png\" alt=\"Taggbox Dashboard\" class=\"wp-image-6852\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Dashboard-6.png 1302w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Dashboard-6-300x160.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Dashboard-6-1024x547.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Dashboard-6-768x411.png 768w\" sizes=\"(max-width: 1302px) 100vw, 1302px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Now, on the left menu panel click on&nbsp;<strong>My&nbsp;Widget<\/strong>. To open the list of widgets you\u2019ve created.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose your widget and click on <strong>Edit<\/strong> button<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1301\" height=\"696\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/My-Wid-1.png\" alt=\"Wall Name\" class=\"wp-image-6857\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/My-Wid-1.png 1301w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/My-Wid-1-300x160.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/My-Wid-1-1024x548.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/My-Wid-1-768x411.png 768w\" sizes=\"(max-width: 1301px) 100vw, 1301px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Now, Click on the&nbsp;<strong>Design&nbsp;<\/strong>Tab&nbsp;and select&nbsp;<strong>Customization<\/strong>&nbsp;(You will find it on the&nbsp;left-hand side of the page) to&nbsp;customize the&nbsp;<strong>Card<\/strong>&nbsp;<strong>Style<\/strong> in your&nbsp;<strong>widget theme.<\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1302\" height=\"695\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Customization.png\" alt=\"Wall Editor\" class=\"wp-image-6878\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Customization.png 1302w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Customization-300x160.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Customization-1024x547.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Customization-768x410.png 768w\" sizes=\"(max-width: 1302px) 100vw, 1302px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You will see a pop-up&nbsp;<strong>Personalize <\/strong>on your screen, Click on&nbsp;<strong>Card Style:<\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"639\" height=\"655\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Style.png\" alt=\"Card style select\" class=\"wp-image-6924\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Style.png 639w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Style-293x300.png 293w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"subTitle2\"><strong>General Style:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In general style, you can select font&nbsp;family for your font of content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle3\"><strong>Font Family<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In&nbsp;<strong>font family<\/strong>, you can change the style of fonts. The&nbsp;<strong>font family&nbsp;<\/strong>option has many interesting font styles, you can change it as per your need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a suitable&nbsp;<strong>font style&nbsp;<\/strong>from the&nbsp;drop-down menu:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"653\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Fonts.png\" alt=\"Card style Font\" class=\"wp-image-6925\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Fonts.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Fonts-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"subTitle4\"><strong>Card Style:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In card style, you can edit the&nbsp;<strong>Card color<\/strong>,&nbsp;<strong>Font color<\/strong>,&nbsp;<strong>Author color<\/strong>,&nbsp;<strong>Font size<\/strong>,&nbsp;<strong>Social icon color<\/strong>&nbsp;and can manage the status of&nbsp;<strong>time and author detail<\/strong>&nbsp;of the cards as per your need:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle5\"><strong>Card Color<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>card color<\/strong>&nbsp;option allows you to change the background color of the cards:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"653\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Color.png\" alt=\"Card color2\" class=\"wp-image-6926\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Color.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Color-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle6\"><strong>Font Color<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In&nbsp;<strong>font color,&nbsp;<\/strong>you can change the color of text on the card.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See below Example:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"653\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Color-1.png\" alt=\"Font color\" class=\"wp-image-6927\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Color-1.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Color-1-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle7\"><strong>Font Size<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>font size<\/strong>&nbsp;option allows you to change&nbsp;the size of the&nbsp;content on the cards by simply dragging the bar according to your requirement:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"654\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Font-Size.png\" alt=\"Font size\" class=\"wp-image-6928\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Font-Size.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Font-Size-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"subTitle8\"><strong>Author Style:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Author Style, you can change the color of author information, manage the social icon color, timestamp status and author detail status.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle9\"><strong>Author Color<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>author color<\/strong>&nbsp;option allows you to change the color of the author&#8217;s name text. This can be used to highlight the name of the author on a social widget:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"654\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Author-color.png\" alt=\"Author color\" class=\"wp-image-6929\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Author-color.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Author-color-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle10\"><strong>Social Icon Color<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can&nbsp;manage the&nbsp;<strong>social icon color<\/strong>&nbsp;from this section. You will find two options in icon color: default color and choose a color. Set&nbsp;it as&nbsp;the default color&nbsp;to keep your social icon color default or choose another color for social icon by simply selecting&nbsp;&#8220;<strong>choose color<\/strong>&#8220;.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"653\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Social-Icon.png\" alt=\"Social icon color\" class=\"wp-image-6930\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Social-Icon.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Social-Icon-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle11\"><strong>Time Status (On-Off)<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>time<\/strong>&nbsp;option can hide as well as unhide the visible time of posts from the cards:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"654\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Time.png\" alt=\"Time\" class=\"wp-image-6931\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Time.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Time-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"subTitle12\"><strong>Author Details (On-Off)<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can control the <strong>&#8220;author detail&#8221;<\/strong> status from here. If you don\u2019t want to show author details then simply turn it off<strong>.&nbsp;<\/strong>The&nbsp;<strong>author detail<\/strong>&nbsp;option is used to either display or hides the name of the author of all post from the cards:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"654\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Time-1.png\" alt=\"Author details\" class=\"wp-image-6933\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Time-1.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/Card-Time-1-293x300.png 293w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Extra<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Apart from this you can also:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>CTA<\/strong> &#8211; Apply Call-To-Action <\/em>button with <strong>Button Text, link, button color &amp; button text<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>Social Actions<\/strong> &#8211; Woke Up social actions on your feeds<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>Hide<\/strong> <strong>Content<\/strong> &#8211; social text content<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using the toggles.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"638\" height=\"646\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/CTA.png\" alt=\"CTA Button\" class=\"wp-image-6934\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/CTA.png 638w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/12\/CTA-296x300.png 296w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once you are done with all of the options, click on&nbsp;<strong>APPLY STYLE<\/strong> button.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you face any additional issues then please feel free to&nbsp;<a href=\"https:\/\/taggbox.com\/contact-us\/\">Contact us<\/a>&nbsp;or write us at&nbsp;<a href=\"mailto:support@taggbox.com\">support@taggbox.com<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Edit and add extra functionality to your Feed Cards like CTA, Font, Color etc. to make your Feeds more appealing. Follow the steps below: Taggbox&nbsp;Dashboard First,&nbsp;Login&nbsp;to your Taggbox Widget Account. You\u2019ll see your widget dashboard like this: Now, on the left menu panel click on&nbsp;My&nbsp;Widget. To open the list of widgets you\u2019ve created. Choose your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[278],"tags":[],"class_list":["post-3679","post","type-post","status-publish","format-standard","hentry","category-customization-widget"],"_links":{"self":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/3679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/comments?post=3679"}],"version-history":[{"count":0,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/3679\/revisions"}],"wp:attachment":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/media?parent=3679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/categories?post=3679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/tags?post=3679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}