{"id":25098,"date":"2026-09-07T03:07:53","date_gmt":"2026-09-07T03:07:53","guid":{"rendered":"https:\/\/couponaffiliates.com\/docs\/design-layout-customisation\/"},"modified":"2026-09-07T03:07:53","modified_gmt":"2026-09-07T03:07:53","password":"","slug":"design-layout-customisation","status":"publish","type":"docs","link":"https:\/\/couponaffiliates.com\/es\/docs\/design-layout-customisation\/","title":{"rendered":"Design &amp; Layout Customisation"},"content":{"rendered":"<p class=\"wp-block-paragraph\">En <strong>Design<\/strong> settings tab controls how the affiliate dashboard and portal look &ndash; colours, fonts, tab styling, dark mode, and your own CSS. Find it at <strong>Coupon Affiliates &rarr; Settings &rarr; Design<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Affiliate dashboard tabs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Four options control the tab strip across the top of the dashboard:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tabs Style<\/strong> &ndash; Style #1 (Basic, legacy) or Style #2 (Full Width, modern). Style #2 is the default.<\/li>\n\n\n\n<li><strong>Tabs Border Radius<\/strong> &ndash; Curved (5px), Rounded (25px) or Square (0px).<\/li>\n\n\n\n<li><strong>Tabs Size \/ Padding<\/strong> &ndash; Small (8px), Medium (10px) or Large (12px).<\/li>\n\n\n\n<li><strong>Tabs Font Size<\/strong> &ndash; a number between 10 and 30. Leave it empty for the default.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En <strong>Iconos<\/strong> you can also turn off <strong>Show icons on the affiliate dashboard tabs<\/strong>, and set the icon colour.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Colours<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each colour has a background and a text setting, with these defaults:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fichas<\/strong> &ndash; background <code>#1b3e47<\/code>, text <code>#ffffff<\/code>. On the portal, these are labelled <strong>Sidebar Background<\/strong>.<\/li>\n\n\n\n<li><strong>Tabs Hover<\/strong> &ndash; background <code>#005d75<\/code>, text <code>#ffffff<\/code>. Labelled <strong>Sidebar Link Hover<\/strong> on the portal.<\/li>\n\n\n\n<li><strong>Table Header &amp; Footer<\/strong> &ndash; background <code>#f4f4f4<\/code>, text <code>#0a0a0a<\/code>.<\/li>\n\n\n\n<li><strong>Botones<\/strong> &ndash; background <code>#005d75<\/code>, text <code>#ffffff<\/code>.<\/li>\n\n\n\n<li><strong>Buttons Hover<\/strong> &ndash; background <code>#1b3e47<\/code>, text <code>#ffffff<\/code>.<\/li>\n\n\n\n<li><strong>Icon Colour<\/strong> &ndash; <code>#bebebe<\/code>.<\/li>\n\n\n\n<li><strong>Line Graph<\/strong> (PRO) &ndash; <code>#008000<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Si <strong>Primas de rendimiento<\/strong> are enabled, extra colours appear for the progress bar and the reward summary box. See <a href=\"https:\/\/couponaffiliates.com\/es\/docs\/bonificaciones-pro\/\">(PRO) Primas de rendimiento<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Fonts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Primary Font<\/strong> sets the typeface for all text in the <a href=\"https:\/\/couponaffiliates.com\/es\/docs\/portal-de-afiliados\/\">Portal de afiliados<\/a>. You can pick from the built-in safe fonts (System Default, Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Source Sans Pro, Work Sans, Helvetica Neue, Arial, Georgia, Merriweather), or from any font you&#8217;ve added to the WordPress Font Library. Leave it on <strong>Default<\/strong> to inherit whatever the browser uses.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Dark mode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Activar <strong>Modo oscuro<\/strong> to make dark styling available on the affiliate dashboard. Two further options then appear:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Display Dark Mode Toggle<\/strong> &ndash; shows a switch so affiliates can choose light or dark themselves. On by default.<\/li>\n\n\n\n<li><strong>Enable Dark Mode as Default<\/strong> &ndash; starts everyone in dark mode. They can still switch back if the toggle is on.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Registration and login form<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Form Style<\/strong> &ndash; Style #1 (Default), Style #2 (Modern Bold) or Style #3 (Modern Compact).<\/li>\n\n\n\n<li><strong>Enable 2 Column Layout<\/strong> &ndash; puts paired fields like first and last name side by side. On by default.<\/li>\n\n\n\n<li><strong>Custom Registration Form Title<\/strong> &ndash; replaces &#8220;Register New Affiliate Account&#8221;.<\/li>\n\n\n\n<li><strong>Custom Submit Button Text<\/strong> &ndash; replaces &#8220;Submit Application&#8221;.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Mobile menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Mobile Menu Style<\/strong> switches the dashboard navigation on small screens between <strong>Dropdown<\/strong> (the default) and <strong>Fichas<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">CSS personalizado<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Custom Dashboard CSS<\/strong> takes your own CSS, applied to the affiliate dashboard. The box is a full code editor with syntax highlighting and line numbers, so mistakes are flagged as you type.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use this for anything the settings above don&#8217;t cover. Keep a copy of anything substantial somewhere outside the plugin settings as a backup.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Also on this tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Custom Terminology<\/strong> lets you replace the word &#8220;Affiliate&#8221; throughout the plugin &ndash; see <a href=\"https:\/\/couponaffiliates.com\/es\/docs\/terminologia-de-afiliacion-personalizada\/\">Custom Terminology: Change the &#8220;Affiliate&#8221; text<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Design settings tab controls how the affiliate dashboard and portal look &ndash; colours, fonts, tab styling, dark mode, and your own CSS. Find it at Coupon Affiliates &rarr; Settings &rarr; Design. Affiliate dashboard tabs Four options control the tab strip across the top of the dashboard: Under Icons you can also turn off Show [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":"","_links_to":"","_links_to_target":""},"doc_category":[57],"doc_tag":[],"class_list":["post-25098","docs","type-docs","status-publish","hentry","doc_category-features-dashboard","wpbf-post"],"year_month":"2026-09","word_count":486,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"display_name":"Elliot Sowersby","author_link":"#"},"doc_category_info":[{"term_name":"Affiliate Dashboard","term_url":"https:\/\/couponaffiliates.com\/es\/docs-category\/features-dashboard\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":57,"label":"Affiliate Dashboard"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/docs\/25098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/comments?post=25098"}],"version-history":[{"count":0,"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/docs\/25098\/revisions"}],"wp:attachment":[{"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/media?parent=25098"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/doc_category?post=25098"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/couponaffiliates.com\/es\/wp-json\/wp\/v2\/doc_tag?post=25098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}