{"id":249,"date":"2010-06-07T12:47:39","date_gmt":"2010-06-07T12:47:39","guid":{"rendered":"http:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/?p=249"},"modified":"2021-02-09T03:47:16","modified_gmt":"2021-02-09T03:47:16","slug":"how-to-customize-the-appearance-of-the-affiliate-view-using-css","status":"publish","type":"post","link":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249","title":{"rendered":"How to Customize the Appearance of the Affiliate View Using CSS"},"content":{"rendered":"\n<p>This document outlines some tips on how to change the look and feel of the WP affiliate platform affiliate view by tweaking some CSS.&nbsp;<\/p>\n\n\n\n<p>When you install the plugin, it should have created one of the on-page affiliate area using a shortcode approach. The different options for it are\u00a0 <a href=\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/setting-up-the-affiliate-viewarea-315\"><strong>explained on this page<\/strong><\/a>. So you can try them to see if one options work better than the other (given the theme you are using).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Inserting CSS Code Tweaks to Your site<\/h3>\n\n\n\n<p>You can add CSS tweaks to your site via the following interface of your admin dashboard:<\/p>\n\n\n\n<pre>Appearance -&gt; Customize -&gt; Additional CSS<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example CSS Tweaks<\/h3>\n\n\n\n<p>The following section has some example CSS code tweaks.<\/p>\n\n\n\n<p>You can also <a href=\"https:\/\/www.tipsandtricks-hq.com\/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>read this tutorial<\/strong><\/a> to learn how you can inspect CSS code and add tweaks.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">a) Changing the Background:<\/h4>\n\n\n\n<p>There are 2 ways you can change the background of the affiliate view:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>By changing the image<\/li><li>By taking the image out and using a background color only<\/li><\/ul>\n\n\n\n<p><strong>Option 1:<\/strong> To change the background image first you will need to find the following bit of code in the &#8220;style.css&#8221; file.<br><code><br>body {<br>background:url(images\/bg4.jpg) top repeat-x;<br>height: 100%;<br>color: #555;<br>font-size: 12px;<br>font-family: Arial, Tahoma, Verdana;<br>}<br><\/code><br>The &#8220;background:url(images\/bg4.jpg) top repeat-x;&#8221; is the line we will need to edit.&nbsp;The CSS gets the image for the background from the images folder &#8220;wp-affiliate-platform\/affiliates\/images&#8221; of the plugin.<\/p>\n\n\n\n<p>You need to upload the new background image to this&nbsp;directory.&nbsp;The easiest way to change this image is to name the new image the same as the existing one (bg4.jpg) and replace it, this way you do not need to change the CSS code.&nbsp;You may want to change the &#8220;repeat&#8221; depending on your image. The above example &#8220;top repeat-x;&#8221; will repeat the image from the top and along the x axis (horizontally).<br>Other repeat options:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>y axis (vertically)<\/li><li>no-repeat<\/li><li>top-right or left<\/li><li>bottom-right or left<\/li><\/ul>\n\n\n\n<p><strong>Option 2:<\/strong> To use just a background color you need to make a small change to the code. See the example below.<br><code><br>body {<br>Background: #000;<br>height: 100%;<br>color: #555;<br>font-size: 12px;<br>font-family: Arial, Tahoma, Verdana;<br>}<br><\/code><br>In the above example I have set the background color to black.<\/p>\n\n\n\n<p><strong>Color Codes:<\/strong> You can use the following color codes to change colors in CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Color name (e.g. red)<\/li><li>Hex value (e.g. #CECECE)<\/li><li>RGB value (e.g. 255.0.0)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">b) Changing the Header<\/h4>\n\n\n\n<p>To change the header you need to edit the following CSS code.<br><code><br>#header h1 {<br>padding: 34px 0px 0px 0px;<br>color: #FFF;<br>font-size: 40px;<br>font-family: Times New Roman, Georgia, Arial;<br>font-weight: normal;<br>}<br><\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>color: changes the color of the text in the header &#8220;the name that appears at the top of the affiliate view&#8221;. Refer to the color codes section for more information on what color codes can be used with CSS.<\/li><li>font-size: allows you to change the size of the font.<\/li><li>Font-family is the type of font. Note: The fonts used in this code are cross browser friendly, some browsers can not render all fonts.<\/li><li>font-weight: changes the style of the font. You can make this normal, thick or thicker.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">c) Changing the Body Font Color<\/h4>\n\n\n\n<p>To change the font color of the body &#8220;main font color&#8221; you will need to change the color in the following bit of code:<br><code><br>body {<br>Background: #000;<br>height: 100%;<br>color: #555;<br>font-size: 12px;<br>font-family: Arial, Tahoma, Verdana;<br>}<br><\/code><br>The property you will need to modify is the &#8220;color: #555&#8221;.&nbsp;Refer to the color codes section for more information on what color codes can be used with CSS.<\/p>\n\n\n\n<p>This guide has covered some basic changes that you can make to the affiliate view to give it a little personal touch. If you would like to learn more about some basic CSS then please see the <a href=\"https:\/\/www.tipsandtricks-hq.com\/basic-guide-to-css-2023\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Basic Guide to CSS<\/strong><\/a> article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This document outlines some tips on how to change the look and feel of the WP affiliate platform affiliate view by tweaking some CSS.&nbsp; When you install the plugin, it should have created one of the on-page affiliate area using a shortcode approach. The different options for it are\u00a0 explained on this page. So you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[21],"tags":[63,61],"class_list":{"0":"post-249","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-design","7":"tag-design","8":"tag-usage","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Customize the Appearance of the Affiliate View Using CSS - WordPress Affiliate Platform<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#\/schema\/person\/b3a690506213824832751de546a340fb\"},\"headline\":\"How to Customize the Appearance of the Affiliate View Using CSS\",\"datePublished\":\"2010-06-07T12:47:39+00:00\",\"dateModified\":\"2021-02-09T03:47:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249\"},\"wordCount\":583,\"commentCount\":13,\"keywords\":[\"Design\",\"Usage\"],\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249\",\"url\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249\",\"name\":\"How to Customize the Appearance of the Affiliate View Using CSS - WordPress Affiliate Platform\",\"isPartOf\":{\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#website\"},\"datePublished\":\"2010-06-07T12:47:39+00:00\",\"dateModified\":\"2021-02-09T03:47:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#\/schema\/person\/b3a690506213824832751de546a340fb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#website\",\"url\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/\",\"name\":\"WordPress Affiliate Platform\",\"description\":\"Take control of your affiliates and drive more sales\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#\/schema\/person\/b3a690506213824832751de546a340fb\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3a21ab4072e533cf470d80fc2f0fd3639872824ade4e23709397e109b24f8857?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3a21ab4072e533cf470d80fc2f0fd3639872824ade4e23709397e109b24f8857?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3a21ab4072e533cf470d80fc2f0fd3639872824ade4e23709397e109b24f8857?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Customize the Appearance of the Affiliate View Using CSS - WordPress Affiliate Platform","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249#article","isPartOf":{"@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249"},"author":{"name":"admin","@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#\/schema\/person\/b3a690506213824832751de546a340fb"},"headline":"How to Customize the Appearance of the Affiliate View Using CSS","datePublished":"2010-06-07T12:47:39+00:00","dateModified":"2021-02-09T03:47:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249"},"wordCount":583,"commentCount":13,"keywords":["Design","Usage"],"articleSection":["Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249","url":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249","name":"How to Customize the Appearance of the Affiliate View Using CSS - WordPress Affiliate Platform","isPartOf":{"@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#website"},"datePublished":"2010-06-07T12:47:39+00:00","dateModified":"2021-02-09T03:47:16+00:00","author":{"@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#\/schema\/person\/b3a690506213824832751de546a340fb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/how-to-customize-the-appearance-of-the-affiliate-view-using-css-249"]}]},{"@type":"WebSite","@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#website","url":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/","name":"WordPress Affiliate Platform","description":"Take control of your affiliates and drive more sales","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/#\/schema\/person\/b3a690506213824832751de546a340fb","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3a21ab4072e533cf470d80fc2f0fd3639872824ade4e23709397e109b24f8857?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3a21ab4072e533cf470d80fc2f0fd3639872824ade4e23709397e109b24f8857?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3a21ab4072e533cf470d80fc2f0fd3639872824ade4e23709397e109b24f8857?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/posts\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":0,"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/media?parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/wordpress-affiliate\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}