{"id":33683,"date":"2025-10-05T15:45:23","date_gmt":"2025-10-05T09:45:23","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=33683"},"modified":"2025-10-06T12:33:02","modified_gmt":"2025-10-06T06:33:02","password":"","slug":"style-tab-customization-complete-guide","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/style-tab-customization-complete-guide\/","title":{"rendered":"Style Tab Customization &#8211; Complete Guide"},"content":{"rendered":"\n<style>\n\n.wp-block-heading.betterdocs-content-heading {\n\tmargin-bottom: 15px;\n}\n\n<\/style>\n\n\n\n<p>The&nbsp;<strong>Style Tab<\/strong>&nbsp;gives you complete control over the visual appearance of your feedback widget. Customize colors, spacing, sizes, and more without writing any code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%93%8D-accessing-style-tab\">Accessing Style Tab<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to&nbsp;<strong>WordPress Admin \u2192 Was This Helpful<\/strong><\/li>\n\n\n\n<li>Click the&nbsp;<strong>&#8220;Style&#8221;<\/strong>&nbsp;tab at the top<\/li>\n\n\n\n<li>All visual customization options are here<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"825\" height=\"502\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/10\/was-this-helpful-style-tab.png\" alt=\"\" class=\"wp-image-33766\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/10\/was-this-helpful-style-tab.png 825w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/10\/was-this-helpful-style-tab-300x183.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/10\/was-this-helpful-style-tab-768x467.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/10\/was-this-helpful-style-tab-360x219.png 360w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%93%8F-spacing--layout-settings\">Spacing & Layout Settings<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"container-margin\">Container Margin<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>50px auto 50px auto<\/code>&nbsp;(Top, Right, Bottom, Left)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Controls the space OUTSIDE the feedback widget container.<\/p>\n\n\n\n<p><strong>How to use<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>First value (50px)<\/strong>: Space above the widget<\/li>\n\n\n\n<li><strong>Second value (auto)<\/strong>: Right side (auto centers it)<\/li>\n\n\n\n<li><strong>Third value (50px)<\/strong>: Space below the widget<\/li>\n\n\n\n<li><strong>Fourth value (auto)<\/strong>: Left side (auto centers it)<\/li>\n<\/ul>\n\n\n\n<p><strong>Examples<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>More space above and below:\n80px auto 80px auto\n\nRemove all margin:\n0px auto 0px auto\n\nOnly top margin:\n30px auto 0px auto\n<\/code><\/pre>\n\n\n\n<p><strong>When to adjust<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Widget too close to content \u2192 Increase top\/bottom values<\/li>\n\n\n\n<li>Widget not centered \u2192 Keep &#8220;auto&#8221; for left\/right<\/li>\n\n\n\n<li>Too much white space \u2192 Decrease values<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"container-padding\">Container Padding<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>30px 30px 30px 30px<\/code>&nbsp;(Top, Right, Bottom, Left)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Controls the space INSIDE the feedback widget container (between the border and content).<\/p>\n\n\n\n<p><strong>Examples<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>More spacious feel:\n40px 40px 40px 40px\n\nCompact design:\n15px 15px 15px 15px\n\nAsymmetric padding:\n30px 50px 30px 50px\n<\/code><\/pre>\n\n\n\n<p><strong>Visual difference<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Small padding (15px):\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502Was helpful?  \u2502\n\u2502 &#91;Yes] &#91;No]   \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\nLarge padding (50px):\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                    \u2502\n\u2502  Was helpful?      \u2502\n\u2502  &#91;Yes]    &#91;No]     \u2502\n\u2502                    \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"helpful-title-margin\">Helpful Title Margin<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>15px 0px 20px 0px<\/code>&nbsp;(Top, Right, Bottom, Left)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Controls spacing around the question text (&#8220;Was this helpful?&#8221;).<\/p>\n\n\n\n<p><strong>Common adjustments<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>More space below question:\n15px 0px 30px 0px\n\nTight spacing:\n10px 0px 10px 0px\n\nNo spacing:\n0px 0px 0px 0px\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%8E%A8-button-dimensions\">Button Dimensions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"feedback-button-width\">Feedback Button Width<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>110px<\/code><\/p>\n\n\n\n<p><strong>What it does<\/strong>: Sets the width of Yes\/No feedback buttons.<\/p>\n\n\n\n<p><strong>Recommended ranges<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Narrow<\/strong>: 80px-100px (for short text like &#8220;Yes&#8221;\/&#8221;No&#8221;)<\/li>\n\n\n\n<li><strong>Standard<\/strong>: 110px-130px (default, works for most cases)<\/li>\n\n\n\n<li><strong>Wide<\/strong>: 140px-200px (for longer text like &#8220;Very Helpful&#8221;)<\/li>\n<\/ul>\n\n\n\n<p><strong>Examples<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Short buttons: 90px\n&#91;Yes] &#91;No]\n\nLong buttons: 150px\n&#91;  Helpful  ] &#91;  Not Helpful  ]\n<\/code><\/pre>\n\n\n\n<p><strong>Tips<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Match button width to your text length<\/li>\n\n\n\n<li>Wider buttons = easier to tap on mobile<\/li>\n\n\n\n<li>Keep both buttons the same width<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"feedback-button-height\">Feedback Button Height<\/h3>\n\n\n\n<p><strong>Default<\/strong>: 54px<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Sets the height of Yes\/No feedback buttons.<\/p>\n\n\n\n<p><strong>Recommended ranges<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Compact<\/strong>: 40px-45px<\/li>\n\n\n\n<li><strong>Standard<\/strong>: 50px-60px (default)<\/li>\n\n\n\n<li><strong>Large<\/strong>: 65px-80px (better for mobile)<\/li>\n<\/ul>\n\n\n\n<p><strong>Accessibility tip<\/strong>: Larger buttons (minimum 44px height) are easier to tap on mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"submit-button-width\">Submit Button Width<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>110px<\/code><\/p>\n\n\n\n<p><strong>What it does<\/strong>: Width of the &#8220;Submit&#8221; button that appears after users want to leave comments.<\/p>\n\n\n\n<p><strong>Note<\/strong>: Usually matches Feedback Button Width for consistency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"submit-button-height\">Submit Button Height<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>54px<\/code><\/p>\n\n\n\n<p><strong>What it does<\/strong>: Height of the &#8220;Submit&#8221; button.<\/p>\n\n\n\n<p><strong>Note<\/strong>: Usually matches Feedback Button Height for consistency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"submit-button-font-size\">Submit Button Font Size<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>16px<\/code><\/p>\n\n\n\n<p><strong>What it does<\/strong>: Text size on the Submit button.<\/p>\n\n\n\n<p><strong>Recommended ranges<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Small<\/strong>: 12px-14px<\/li>\n\n\n\n<li><strong>Standard<\/strong>: 15px-16px<\/li>\n\n\n\n<li><strong>Large<\/strong>: 17px-20px<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%8E%A8-color-customization\">Color Customization<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"container-background-color\">Container Background Color<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#FFFFFF<\/code>&nbsp;(White)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Background color of the entire feedback widget container.<\/p>\n\n\n\n<p><strong>Popular choices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#FFFFFF<\/code>&nbsp;&#8211; White (clean, minimal)<\/li>\n\n\n\n<li><code>#F9FAFB<\/code>&nbsp;&#8211; Light gray (subtle)<\/li>\n\n\n\n<li><code>#F0F9FF<\/code>&nbsp;&#8211; Light blue (modern)<\/li>\n\n\n\n<li><code>#FEF3C7<\/code>&nbsp;&#8211; Light yellow (attention-grabbing)<\/li>\n<\/ul>\n\n\n\n<p><strong>Design tips<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Should contrast with your site background<\/li>\n\n\n\n<li>Light colors work best for readability<\/li>\n\n\n\n<li>Match your site's color scheme<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"container-border-color\">Container Border Color<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#E5E7EB<\/code>&nbsp;(Light gray)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Color of the border around the feedback widget.<\/p>\n\n\n\n<p><strong>Popular choices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#E5E7EB<\/code>&nbsp;&#8211; Light gray (subtle)<\/li>\n\n\n\n<li><code>#D1D5DB<\/code>&nbsp;&#8211; Medium gray (visible)<\/li>\n\n\n\n<li><code>#3B82F6<\/code>&nbsp;&#8211; Blue (modern)<\/li>\n\n\n\n<li><code>#10B981<\/code>&nbsp;&#8211; Green (positive)<\/li>\n<\/ul>\n\n\n\n<p><strong>Tips<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use subtle colors for borders<\/li>\n\n\n\n<li>Can match your primary brand color<\/li>\n\n\n\n<li>Darker borders create more definition<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"positive-button-background\">Positive Button Background<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#3DD396<\/code>&nbsp;(Turquoise\/Green)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Background color of the &#8220;Yes&#8221;\/&#8221;Helpful&#8221; button.<\/p>\n\n\n\n<p><strong>Best practices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use&nbsp;<strong>green<\/strong>&nbsp;or&nbsp;<strong>blue<\/strong>&nbsp;(positive colors)<\/li>\n\n\n\n<li>Should clearly differ from negative button<\/li>\n\n\n\n<li>Ensure good contrast with button text<\/li>\n<\/ul>\n\n\n\n<p><strong>Recommended colors<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#10B981<\/code>&nbsp;&#8211; Emerald green<\/li>\n\n\n\n<li><code>#3DD396<\/code>&nbsp;&#8211; Turquoise (default)<\/li>\n\n\n\n<li><code>#3B82F6<\/code>&nbsp;&#8211; Bright blue<\/li>\n\n\n\n<li><code>#8B5CF6<\/code>&nbsp;&#8211; Purple (modern)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"positive-button-border\">Positive Button Border<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#3DD396<\/code>&nbsp;(Same as background)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Border color of the positive button.<\/p>\n\n\n\n<p><strong>Common approaches<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Match background<\/strong>&nbsp;(default):&nbsp;<code>#3DD396<\/code>\n<ul class=\"wp-block-list\">\n<li>Clean, modern look<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Darker shade<\/strong>:&nbsp;<code>#2CA67C<\/code>\n<ul class=\"wp-block-list\">\n<li>Adds subtle definition<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>No border<\/strong>:&nbsp;<code>transparent<\/code>\n<ul class=\"wp-block-list\">\n<li>Flat design style<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"negative-button-background\">Negative Button Background<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#FB7185<\/code>&nbsp;(Coral\/Red)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Background color of the &#8220;No&#8221;\/&#8221;Not Helpful&#8221; button.<\/p>\n\n\n\n<p><strong>Best practices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use&nbsp;<strong>red<\/strong>,&nbsp;<strong>orange<\/strong>, or&nbsp;<strong>coral<\/strong>&nbsp;(negative\/warning colors)<\/li>\n\n\n\n<li>Should clearly differ from positive button<\/li>\n\n\n\n<li>Not too aggressive (avoid bright red)<\/li>\n<\/ul>\n\n\n\n<p><strong>Recommended colors<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#FB7185<\/code>&nbsp;&#8211; Coral (default, softer)<\/li>\n\n\n\n<li><code>#EF4444<\/code>&nbsp;&#8211; Red (clear negative)<\/li>\n\n\n\n<li><code>#F59E0B<\/code>&nbsp;&#8211; Orange (constructive)<\/li>\n\n\n\n<li><code>#64748B<\/code>&nbsp;&#8211; Gray (neutral)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"negative-button-border\">Negative Button Border<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#FB7185<\/code>&nbsp;(Same as background)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Border color of the negative button.<\/p>\n\n\n\n<p><strong>Common approaches<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Match background for clean look<\/li>\n\n\n\n<li>Slightly darker for definition<\/li>\n\n\n\n<li>Transparent for flat design<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"text-button-color\">Text Button Color<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#FFFFFF<\/code>&nbsp;(White)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Color of text on both Yes\/No buttons.<\/p>\n\n\n\n<p><strong>Best practices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>White (#FFFFFF)<\/strong>&nbsp;works with most dark\/vibrant buttons<\/li>\n\n\n\n<li><strong>Dark (#1F2937)<\/strong>&nbsp;works with light colored buttons<\/li>\n\n\n\n<li>Ensure strong contrast for accessibility<\/li>\n<\/ul>\n\n\n\n<p><strong>Contrast check<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>White on green \u2705<\/li>\n\n\n\n<li>White on yellow \u274c (poor contrast)<\/li>\n\n\n\n<li>Dark on yellow \u2705<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"feedback-text-color\">Feedback Text Color<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#6B7280<\/code>&nbsp;(Gray)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Color of text in messages and prompts.<\/p>\n\n\n\n<p><strong>Recommended colors<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#6B7280<\/code>&nbsp;&#8211; Medium gray (default, readable)<\/li>\n\n\n\n<li><code>#4B5563<\/code>&nbsp;&#8211; Darker gray (stronger)<\/li>\n\n\n\n<li><code>#374151<\/code>&nbsp;&#8211; Near black (high contrast)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"feedback-inner-text-color\">Feedback Inner Text Color<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#374151<\/code>&nbsp;(Dark gray)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Color of text inside the feedback form\/comment box area.<\/p>\n\n\n\n<p><strong>Note<\/strong>: Usually slightly darker than regular feedback text for emphasis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"feedback-box-background\">Feedback Box Background<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#F9FAFB<\/code>&nbsp;(Very light gray)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Background color of the comment input box.<\/p>\n\n\n\n<p><strong>Popular choices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#F9FAFB<\/code>&nbsp;&#8211; Very light gray (subtle)<\/li>\n\n\n\n<li><code>#FFFFFF<\/code>&nbsp;&#8211; White (clean)<\/li>\n\n\n\n<li><code>#F0F9FF<\/code>&nbsp;&#8211; Light blue (modern)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"feedback-box-border\">Feedback Box Border<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#E5E7EB<\/code>&nbsp;(Light gray)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Border color around the comment input box.<\/p>\n\n\n\n<p><strong>Tips<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Should be visible but not distracting<\/li>\n\n\n\n<li>Can match container border<\/li>\n\n\n\n<li>Subtle colors work best<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"submit-button-text\">Submit Button Text<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#FFFFFF<\/code>&nbsp;(White)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Text color on the Submit button.<\/p>\n\n\n\n<p><strong>Note<\/strong>: Usually white for visibility on colored buttons.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"submit-button-background\">Submit Button Background<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#3DD396<\/code>&nbsp;(Turquoise\/Green)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Background color of the Submit button.<\/p>\n\n\n\n<p><strong>Best practices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Often matches Positive Button color<\/li>\n\n\n\n<li>Or uses your primary brand color<\/li>\n\n\n\n<li>Should stand out from the form<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"submit-button-border\">Submit Button Border<\/h3>\n\n\n\n<p><strong>Default<\/strong>:&nbsp;<code>#3DD396<\/code>&nbsp;(Same as background)<\/p>\n\n\n\n<p><strong>What it does<\/strong>: Border color of the Submit button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%92%85-custom-css\">Custom CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"helpful-custom-css\">Helpful Custom CSS<\/h3>\n\n\n\n<p><strong>What it does<\/strong>: Allows you to add custom CSS code for advanced styling.<\/p>\n\n\n\n<p><strong>When to use<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Want styling not available in options<\/li>\n\n\n\n<li>Need hover effects<\/li>\n\n\n\n<li>Want to override specific styles<\/li>\n\n\n\n<li>Advanced customization<\/li>\n<\/ul>\n\n\n\n<p><strong>Example custom CSS<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>\/* Add shadow to feedback widget *\/<\/em>\n.feedback-container {\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n<em>\/* Rounded button corners *\/<\/em>\n.feedback-button {\n    border-radius: 25px;\n}\n\n<em>\/* Hover effect on buttons *\/<\/em>\n.feedback-button:hover {\n    transform: scale(1.05);\n    transition: all 0.3s;\n}\n\n<em>\/* Change font family *\/<\/em>\n.feedback-container {\n    font-family: 'Arial', sans-serif;\n}\n\n<em>\/* Center align all text *\/<\/em>\n.feedback-container {\n    text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Common customizations<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Button hover effects<\/strong>:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>.positive-button:hover {\n    background-color: #2CA67C !important;\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Add transitions<\/strong>:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>.feedback-button {\n    transition: all 0.3s ease;\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Custom borders<\/strong>:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>.feedback-container {\n    border: 2px solid #3B82F6;\n    border-radius: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%8E%A8-pre-made-color-schemes\">Pre-Made Color Schemes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scheme-1-modern-blue--green\">Scheme 1: Modern Blue & Green<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Positive Button: #3B82F6 (Blue)\nNegative Button: #EF4444 (Red)\nContainer Background: #F0F9FF (Light Blue)\nText: #1E40AF (Dark Blue)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scheme-2-elegant-gray\">Scheme 2: Elegant Gray<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Positive Button: #10B981 (Green)\nNegative Button: #64748B (Gray)\nContainer Background: #F9FAFB (Light Gray)\nText: #374151 (Dark Gray)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scheme-3-vibrant--friendly\">Scheme 3: Vibrant & Friendly<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Positive Button: #8B5CF6 (Purple)\nNegative Button: #F59E0B (Orange)\nContainer Background: #FFFFFF (White)\nText: #6B7280 (Gray)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scheme-4-minimal-dark\">Scheme 4: Minimal Dark<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Positive Button: #10B981 (Green)\nNegative Button: #6B7280 (Gray)\nContainer Background: #1F2937 (Dark)\nText: #F9FAFB (Light)\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%92%BE-saving-your-changes\">Saving Your Changes<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Make your styling changes<\/li>\n\n\n\n<li>Click&nbsp;<strong>&#8220;Save Changes&#8221;<\/strong>&nbsp;button<\/li>\n\n\n\n<li>Clear your browser cache if needed<\/li>\n\n\n\n<li>View your site to see the changes<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%A7%AA-testing-your-design\">Testing Your Design<\/h2>\n\n\n\n<p>After saving:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Desktop view<\/strong>: Check on regular browser<\/li>\n\n\n\n<li><strong>Mobile view<\/strong>: Use Chrome DevTools or actual mobile device<\/li>\n\n\n\n<li><strong>Different browsers<\/strong>: Test in Chrome, Firefox, Safari<\/li>\n\n\n\n<li><strong>Dark mode<\/strong>: If your site supports it, test in both modes<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%93%B1-mobile-responsiveness-tips\">Mobile Responsiveness Tips<\/h2>\n\n\n\n<p>The plugin is responsive by default, but here are tips:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use button heights of at least 50px for easy tapping<\/li>\n\n\n\n<li>Keep text readable (minimum 14px font size)<\/li>\n\n\n\n<li>Test on actual mobile devices<\/li>\n\n\n\n<li>Ensure buttons don't overlap on small screens<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%E2%99%BF-accessibility-best-practices\">Accessibility Best Practices<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>High contrast<\/strong>: Ensure text is readable (WCAG AA standard)<\/li>\n\n\n\n<li><strong>Large tap targets<\/strong>: Buttons at least 44px tall<\/li>\n\n\n\n<li><strong>Clear labels<\/strong>: Descriptive button text<\/li>\n\n\n\n<li><strong>Focus states<\/strong>: Buttons should have visible focus for keyboard users<\/li>\n<\/ul>\n\n\n\n<p><strong>Check contrast<\/strong>: Use&nbsp;<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAIM Contrast Checker<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%E2%9D%93-common-styling-questions\">Common Styling Questions<\/h2>\n\n\n\n<p><strong>Q: Changes not showing?<\/strong>&nbsp;A: Clear browser cache and reload the page.<\/p>\n\n\n\n<p><strong>Q: Can I have different colors per post?<\/strong>&nbsp;A: Not through settings, but possible with custom CSS and post classes.<\/p>\n\n\n\n<p><strong>Q: How do I make buttons round?<\/strong>&nbsp;A: Add to Custom CSS:&nbsp;<code>.feedback-button { border-radius: 50px; }<\/code><\/p>\n\n\n\n<p><strong>Q: Can I change font?<\/strong>&nbsp;A: Yes, in Custom CSS:&nbsp;<code>.feedback-container { font-family: 'Your Font'; }<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%F0%9F%93%9A-related-guides\">Related Guides<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/hasthemes.com\/doc\/options-tab-settings-complete-guide\/\">Options Tab Settings<\/a><\/strong>\u00a0&#8211; Configure functionality<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/hasthemes.com\/doc\/faq-troubleshooting-guide\/\">Troubleshooting Styling<\/a><\/strong>\u00a0&#8211; Fix common issues<\/li>\n<\/ul>\n\n\n\n<p><strong>Need help?<\/strong>&nbsp;Contact support through our support channel: <a href=\"https:\/\/hasthemes.com\/contact-us\/\">Contact us<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The&nbsp;Style Tab&nbsp;gives you complete control over the visual appearance of your feedback widget. Customize colors, spacing, sizes, and more without writing any code. Accessing Style Tab Spacing &#038; Layout Settings Container Margin Default:&nbsp;50px auto 50px auto&nbsp;(Top, Right, Bottom, Left) What it does: Controls the space OUTSIDE the feedback widget container. How to use: Examples: When [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[261],"doc_tag":[],"class_list":["post-33683","docs","type-docs","status-publish","hentry","doc_category-was-this-helpful"],"acf":[],"year_month":"2025-11","word_count":1571,"total_views":"70","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Saidul","author_nicename":"saidul","author_url":"https:\/\/hasthemes.com\/author\/saidul\/"},"doc_category_info":[{"term_name":"Was This Helpful","term_url":"https:\/\/hasthemes.com\/docs-category\/was-this-helpful\/"}],"doc_tag_info":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Saidul","author_link":"https:\/\/hasthemes.com\/author\/saidul\/"},"uagb_comment_info":0,"uagb_excerpt":"The&nbsp;Style Tab&nbsp;gives you complete control over the visual appearance of your feedback widget. Customize colors, spacing, sizes, and more without writing any code. Accessing Style Tab Spacing & Layout Settings Container Margin Default:&nbsp;50px auto 50px auto&nbsp;(Top, Right, Bottom, Left) What it does: Controls the space OUTSIDE the feedback widget container. How to use: Examples: When&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=33683"}],"version-history":[{"count":4,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33683\/revisions"}],"predecessor-version":[{"id":33768,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33683\/revisions\/33768"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=33683"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=33683"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=33683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}