{"id":19128,"date":"2015-12-27T02:01:22","date_gmt":"2015-12-26T16:01:22","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=19128"},"modified":"2022-11-05T14:52:55","modified_gmt":"2022-11-05T04:52:55","slug":"wordpress-user-body-background-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-body-background-primer-tutorial\/","title":{"rendered":"WordPress User Body Background Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_bb_changes.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress User Body Background Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_bb_changes.jpg\" title=\"WordPress User Body Background Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress User Body Background Primer Tutorial<\/p><\/div>\n<p>Similarly to two days ago (with <a target=_blank title='WordPress User Header Section Border Primer Tutorial' href='#wuhsbpt'>WordPress User Header Section Border Primer Tutorial<\/a> as shown below), but we&#8217;ll be adding new Body Background (Colour) user controllable functionality (within any one web browser session), let&#8217;s recap to &#8230;<\/p>\n<blockquote>\n<p>In the world of client\/server programming it is surprising that PHP (on the server side) and Javascript (on the client side) can so often both be approaches to solving a problem.   But maybe it shouldn&#8217;t be so surprising, since they both share the mutual &#8220;HTML&#8221; friend in the middle.<\/p>\n<p>Our WordPress changes today reflect that client\/server teamwork, with the access both PHP and Javascript have to cookies coming in handy at different stages of our CSS styling modifications to our WordPress blog (here).  The modifications centre around offering the user the ability to choose their own <i>font families<\/i> to use when viewing this blog.  Should the user go down that route of specifying their own <i>font families<\/i> for any\/all of &#8230;<\/p>\n<ul>\n<li>blog title<\/li>\n<li>post title<\/li>\n<li>post contents (or &#8220;innards&#8221;)<\/li>\n<\/ul>\n<p> &#8230; this change is stored in cookies and will remain in place (for 6 months that is) as the default font setting for that web browser accessing this WordPress blog from then on, until the user picks another <i>font family<\/i> or leaves the blog to pick its own default <i>font family<\/i>.<\/p>\n<p>And what is the mechanism for the user to control that?  Web browser URLs will do it, or some <i>All Post<\/i> menu submenus we&#8217;ve written for the purpose.<\/p>\n<p>So what are the two ways for the client\/server Javascript\/PHP cookie access to work?<\/p>\n<ul>\n<li>Javascript can access DOM <a target=_blank title='Javascript cookie usage information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>document.cookie<\/i><\/a><\/li>\n<li>PHP can access $_SERVER variable <a target=_blank title='PHP $_SERVER variables' href='http:\/\/php.net\/manual\/en\/reserved.variables.server.php'><i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i><\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; same basic scenario today, but let&#8217;s try three other ideas, namely &#8230;<\/p>\n<ul>\n<li>let&#8217;s just have the one Blog Page handling all these user controlled CSS concepts &#8230; which brings into play &#8230;<\/li>\n<li>let&#8217;s start allowing the use of an HTML form method=POST, because we are using PHP<\/li>\n<li>let&#8217;s try to not run into caching issues (which I&#8217;m still thinking might be combining with our ob_start blog speed ideas to cause issues sometimes &#8230; please read <a target=_blank title='WordPress Blog PHP mod_deflate Speed Improvement Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-php-mod_deflate-speed-improvement-tutorial\/'>WordPress Blog PHP mod_deflate Speed Improvement Tutorial<\/a>) by adding random $_GET[] components so that URLs involved are unique within sessions (as a way to try to encourage a lack of cacheing by your web browser for our purposes, here, only)<\/li>\n<\/ul>\n<p>And let&#8217;s start the other way around explaining the, now, one submenu off the <i>All Posts<\/i> menu, and let&#8217;s start you with the one HTML form method=POST WordPress webpage contents to oversee the user usage of this functionality &#8230;<\/p>\n<p><code><br \/>\n&lt;form id='fmyform' method='POST' action='.\/'&gt;<br \/>\n&lt;p&gt;Please feel free to enter a ...&lt;\/p&gt;&lt;br&gt;<br \/>\n&lt;p id='rjm_wp_body_background'&gt;Background Colour (CSS Styling (eg. green)) to use for the Blog Body Section (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input name='rjmwp_body-background' id='rjm_wp_body-background' type='text' value='' onblur=' change_ff(this, this.value); ' title='http:\/\/www.rjmprogramming.com.au\/wordpress\/?rjm_wp_body-background=' onfocus=\" this.value=cookieAVal('rjm_wp_body-background');\"&gt;&lt;\/input&gt; &lt;input style='display:none;' type='button' onclick=\" location.href=document.getElementById('rjm_wp_body-background').title; \" value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n&lt;p id='rjm_wp_masthead_border'&gt;Border (CSS Styling (eg. 2px solid green)) to use for the Blog Header Section (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input name='rjmwp_masthead-border' id='rjm_wp_masthead-border' type='text' value='' onblur=' change_ff(this, this.value); ' title='http:\/\/www.rjmprogramming.com.au\/wordpress\/?rjm_wp_masthead-border=' onfocus=\" this.value=cookieAVal('rjm_wp_masthead-border');\"&gt;&lt;\/input&gt; &lt;input style='display:none;' type='button' onclick=\" location.href=document.getElementById('rjm_wp_masthead-border').title; \" value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n&lt;p id='rjm_wp_blogtitle_font_family'&gt;Font Family to use for the Blog Title (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input name='rjmwp_blogtitle_font-family' id='rjm_wp_blogtitle_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='http:\/\/www.rjmprogramming.com.au\/wordpress\/?rjm_wp_blogtitle_font-family=' onfocus=\" this.value=cookieAVal('rjm_wp_blogtitle_font-family');\"&gt;&lt;\/input&gt; &lt;input style='display:none;' type='button' onclick=\" location.href=document.getElementById('rjm_wp_blogtitle_font-family').title; \" value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n&lt;p id='rjm_wp_posttitle_font_family'&gt;Font Family to use for the Post Title (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input name='rjmwp_posttitle_font-family' id='rjm_wp_posttitle_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='http:\/\/www.rjmprogramming.com.au\/wordpress\/?rjm_wp_posttitle_font-family=' onfocus=\" this.value=cookieAVal('rjm_wp_posttitle_font-family');\"&gt;&lt;\/input&gt; &lt;input style='display:none;' type='button' onclick=\" location.href=document.getElementById('rjm_wp_posttitle_font-family').title; \" value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n&lt;p id='rjm_wp_base_font_family'&gt;Font Family to use for the Post Contents (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input name='rjmwp_base_font-family' id='rjm_wp_base_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='http:\/\/www.rjmprogramming.com.au\/wordpress\/?rjm_wp_base_font-family=' onfocus=\" this.value=cookieAVal('rjm_wp_base_font-family');\"&gt;&lt;\/input&gt; &lt;input style='display:none;' type='button' onclick=\" location.href=document.getElementById('rjm_wp_base_font-family').title; \" value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n&lt;input type='submit' value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;<br \/>\n&lt;script&gt; setTimeout(frnx, 2000); &lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>And let&#8217;s do the header.php bits in the order in which they appear &#8230;<\/p>\n<p>Firstly, here&#8217;s new (<strong>bold<\/strong>) PHP placed before the <i>&lt;\/style&gt;<\/i> ending part of the code of header.php we&#8217;ve set aside for local CSS styling code &#8230;<\/p>\n<p><code><br \/>\n<strong><br \/>\n&lt;?php<br \/>\n  $font_family=\"Verdana\";<br \/>\n  $blogtitle_font_family=\"Verdana\";<br \/>\n  $posttitle_font_family='\"Helvetica Neue\",Arial,Helvetica,\"Nimbus Sans L\",sans-serif';<br \/>\n  $masthead_border=\"\";<br \/>\n  $body_background=\"\";<br \/>\n  if (isset($_GET['rjmwp_body-background'])) {<br \/>\n    if ($_GET['rjmwp_body-background'] != \"\") {<br \/>\n      echo \"\\n\\n body { background-color: \" . urldecode($_GET['rjmwp_body-background']) . \" !important; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_POST['rjmwp_body-background'])) {<br \/>\n    if ($_POST['rjmwp_body-background'] != \"\") {<br \/>\n      echo \"\\n\\n body { background-color: \" . urldecode($_POST['rjmwp_body-background']) . \" !important; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_body-background=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_body-background=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n body { background-color: \" . urldecode($subparts[0]) . \" !important; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_masthead-border'])) {<br \/>\n    if ($_GET['rjmwp_masthead-border'] != \"\") {<br \/>\n      echo \"\\n\\n #masthead { border: \" . returldecode($_GET['rjmwp_masthead-border']) . \" !important; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_POST['rjmwp_masthead-border'])) {<br \/>\n    if ($_POST['rjmwp_masthead-border'] != \"\") {<br \/>\n      echo \"\\n\\n #masthead { border: \" . returldecode($_POST['rjmwp_masthead-border']) . \" !important; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_masthead-border=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_masthead-border=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #masthead { border: \" . returldecode($subparts[0]) . \" !important; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_base_font-family'])) {<br \/>\n    if ($_GET['rjmwp_base_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . returldecode($_GET['rjmwp_base_font-family']) . \" !important; } \\n\\n\";<br \/>\n      \/\/$_SESSION['rjmwp_base_font-family']=$_GET['rjmwp_base_font-family'];<br \/>\n    }<br \/>\n  \/\/} else if (isset($_SESSION['rjmwp_base_font-family'])) {<br \/>\n  \/\/  echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . returldecode($_SESSION['rjmwp_base_font-family']) . \" !important; } \\n\\n\";<br \/>\n  } else if (isset($_POST['rjmwp_base_font-family'])) {<br \/>\n    if ($_POST['rjmwp_base_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . returldecode($_POST['rjmwp_base_font-family']) . \" !important; } \\n\\n\";<br \/>\n      \/\/$_SESSION['rjmwp_base_font-family']=$_POST['rjmwp_base_font-family'];<br \/>\n    }<br \/>\n  \/\/} else if (isset($_SESSION['rjmwp_base_font-family'])) {<br \/>\n  \/\/  echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . returldecode($_SESSION['rjmwp_base_font-family']) . \" !important; } \\n\\n\";<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_base_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_base_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . returldecode($subparts[0]) . \" !important; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_blogtitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_blogtitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n #ahomeis { font-family:  \" . returldecode($_GET['rjmwp_blogtitle_font-family']) . \" !important; } \\n\\n\";<br \/>\n      \/\/$_SESSION['rjmwp_blogtitle_font-family']=$_GET['rjmwp_blogtitle_font-family'];<br \/>\n    }<br \/>\n  \/\/} else if (isset($_SESSION['rjmwp_blogtitle_font-family'])) {<br \/>\n  \/\/  echo \"\\n\\n #ahomeis { font-family:  \" . returldecode($_SESSION['rjmwp_blogtitle_font-family']) . \" !important; } \\n\\n\";<br \/>\n  } else if (isset($_POST['rjmwp_blogtitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_blogtitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n #ahomeis { font-family:  \" . returldecode($_POST['rjmwp_blogtitle_font-family']) . \" !important; } \\n\\n\";<br \/>\n      \/\/$_SESSION['rjmwp_blogtitle_font-family']=$_POSR['rjmwp_blogtitle_font-family'];<br \/>\n    }<br \/>\n  \/\/} else if (isset($_SESSION['rjmwp_blogtitle_font-family'])) {<br \/>\n  \/\/  echo \"\\n\\n #ahomeis { font-family:  \" . returldecode($_SESSION['rjmwp_blogtitle_font-family']) . \" !important; } \\n\\n\";<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_blogtitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_blogtitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #ahomeis { font-family:  \" . returldecode($subparts[0]) . \" !important; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_posttitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_posttitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($_GET['rjmwp_posttitle_font-family']) . \" !important; } \\n\\n\";<br \/>\n      \/\/$_SESSION['rjmwp_posttitle_font-family']=$_GET['rjmwp_posttitle_font-family'];<br \/>\n    }<br \/>\n  \/\/} else if (isset($_SESSION['rjmwp_posttitle_font-family'])) {<br \/>\n  \/\/  echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($_SESSION['rjmwp_posttitle_font-family']) . \" !important; } \\n\\n\";<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_posttitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_posttitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($subparts[0]) . \" !important; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/strong><br \/>\n<\/code><\/p>\n<p>Secondly, here&#8217;s new Javascript placed before the <i>&lt;\/script&gt;<\/i> ending part of the code of header.php we&#8217;ve set aside for local (<strong>bold<\/strong>) Javascript code (and could be placed above any &lt;body &#8230; onload= blah blah &gt; that call it) &#8230;<\/p>\n<p><code><br \/>\n<strong><br \/>\n&nbsp;<br \/>\nfunction cookieAVal(cName) {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n  &nbsp;<br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (cName == tCookie[j].split(\"=\")[0]) {<br \/>\n      return decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n&nbsp;<br \/>\nfunction deleteACookie(goodname) {<br \/>\n var expireDate = new Date();<br \/>\n expireDate.setDate(expireDate.getDate()-1);<br \/>\n \/\/if ((\"\" + cookieAVal(goodname)).length != 0) {<br \/>\n    document.cookie = goodname + \"=; expires=\" + expireDate.toGMTString();<br \/>\n \/\/}<br \/>\n}<br \/>\n&nbsp;<br \/>\nfunction lookAtCookies() {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=(document.cookie + \"; \").split(\"; \");<br \/>\n   var tc='';<br \/>\n&nbsp;<br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (\"rjmwp_body-background\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      tc=tCookie[j].split(\"=\")[1];<br \/>\n      if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;  body { background-color: \" + tc + \" !important; } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_body-background\", \"\" + encodeURIComponent(tc));<br \/>\n    }<br \/>\n    if (\"rjmwp_masthead-border\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      tc=tCookie[j].split(\"=\")[1];<br \/>\n      if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;  #masthead { border: \" + tc + \"  !important; } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_masthead-border\", \"\" + encodeURIComponent(tc));<br \/>\n    }<br \/>\n    if (\"rjmwp_base_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      tc=tCookie[j].split(\"=\")[1];<br \/>\n      if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;  body, input, textarea, .page-title span, .pingback a.url { font-family: \" + tc + \"  !important; } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_base_font-family\", \"\" + encodeURIComponent(tc));<br \/>\n    }<br \/>\n    if (\"rjmwp_posttitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      tc=tCookie[j].split(\"=\")[1];<br \/>\n      if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;   h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family: \" + tc + \"  !important; } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_posttitle_font-family\", \"\" + encodeURIComponent(tc));<br \/>\n    }<br \/>\n    if (\"rjmwp_blogtitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      tc=tCookie[j].split(\"=\")[1];<br \/>\n      if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;  #ahomeis { font-family: \" + tc + \"  !important; } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_blogtitle_font-family\", \"\" + encodeURIComponent(tc));<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n&nbsp;<br \/>\nfunction cookie_fonts() {<br \/>\n  var oidea;<br \/>\n  var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : '&lt;?php if (isset($_POST[\"rjmwp_base_font-family\"])) { echo urldecode($_POST[\"rjmwp_base_font-family\"]); } else { echo \" \"; } ?&gt;';<br \/>\n  var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : '&lt;?php if (isset($_POST[\"rjmwp_blogtitle_font-family\"])) { echo urldecode($_POST[\"rjmwp_blogtitle_font-family\"]); } else { echo \" \"; } ?&gt;';<br \/>\n  var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : '&lt;?php if (isset($_POST[\"rjmwp_posttitle_font-family\"])) { echo urldecode($_POST[\"rjmwp_posttitle_font-family\"]); } else { echo \" \"; } ?&gt;';<br \/>\n  var expireDate;<br \/>\n  lookAtCookies();<br \/>\n  var masthead_border=location.search.split('rjmwp_masthead-border=')[1] ? decodeURIComponent(location.search.split('rjmwp_masthead-border=')[1].split('&')[0]) : '&lt;?php if (isset($_POST[\"rjmwp_masthead-border\"])) { echo urldecode($_POST[\"rjmwp_masthead-border\"]); } else { echo \" \"; } ?&gt;';<br \/>\n  var body_background=location.search.split('rjmwp_body-background=')[1] ? decodeURIComponent(location.search.split('rjmwp_body-background=')[1].split('&')[0]) : '&lt;?php if (isset($_POST[\"rjmwp_body-background\"])) { echo urldecode($_POST[\"rjmwp_body-background\"]); } else { echo \" \"; } ?&gt;';<br \/>\n  if (body_background.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_body-background=\" + encodeURIComponent(body_background) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   appendtoa(\"rjmwp_body-background\", \"\" + encodeURIComponent(body_background));<br \/>\n  } else if (body_background == '' && document.URL.indexOf('-background=') != -1) {<br \/>\n   deleteACookie('rjmwp_body-background');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_body-background');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_body-background');<br \/>\n  }<br \/>\n  if (masthead_border.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_masthead-border=\" + encodeURIComponent(masthead_border) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   appendtoa(\"rjmwp_masthead-border\", \"\" + encodeURIComponent(masthead_border));<br \/>\n  } else if (masthead_border == '' && document.URL.indexOf('-border=') != -1) {<br \/>\n   deleteACookie('rjmwp_masthead-border');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_masthead-border');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_masthead-border');<br \/>\n  }<br \/>\n  if (base_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_base_font-family=\" + encodeURIComponent(base_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   appendtoa(\"rjmwp_base_font-family\", \"\" + encodeURIComponent(base_font));<br \/>\n  } else if (base_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n   deleteACookie('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_base_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  if (blogtitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n    \/\/alert(918);<br \/>\n   document.cookie = \"rjmwp_blogtitle_font-family=\" + encodeURIComponent(blogtitle_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   appendtoa(\"rjmwp_blogtitle_font-family\", \"\" + encodeURIComponent(blogtitle_font));<br \/>\n  } else if (blogtitle_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n    \/\/alert(928);<br \/>\n   deleteACookie('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_blogtitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  if (posttitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_posttitle_font-family=\" + encodeURIComponent(posttitle_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   appendtoa(\"rjmwp_posttitle_font-family\", \"\" + encodeURIComponent(posttitle_font));<br \/>\n  } else if (posttitle_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n   deleteACookie('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_posttitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n}<br \/>\n&nbsp;<br \/>\nfunction frnx() {<br \/>\n  var mfis=document.getElementById('fmyform');<br \/>\n  if (mfis != null) mfis.action=rnxize(document.URL.replace(\/-border=\/g,'_border=').replace(\/-family=\/g,'_family='));<br \/>\n}<br \/>\n&nbsp;<br \/>\nfunction rnxize(iuis) {<br \/>\n    var inuis=iuis;<br \/>\n    var rsuff='';<br \/>\n    if (inuis.indexOf('rnx=') == -1) rsuff='rnx=' + Math.floor(Math.random() * 800000) + 5;<br \/>\n    if (inuis.indexOf('#') != -1) {<br \/>\n     if (inuis.indexOf('?') != -1) {<br \/>\n      inuis=inuis.replace('#', '&' + rsuff + '#');<br \/>\n     } else {<br \/>\n      inuis=inuis.replace('#', '?' + rsuff + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (inuis.indexOf('?') != -1) {<br \/>\n      inuis=inuis + '&' + rsuff;<br \/>\n     } else {<br \/>\n      inuis=inuis + '?' + rsuff;<br \/>\n     }<br \/>\n    }<br \/>\n    \/\/alert(inuis);<br \/>\n    return inuis;<br \/>\n}<br \/>\n&nbsp;<br \/>\nfunction appendtoa(thisiid, thisv) {<br \/>\n  var asis=document.getElementsByTagName(\"a\");<br \/>\n  var rsuff='';<br \/>\n  if (thisv.indexOf('%20') != -1) thisv=decodeURIComponent(thisv);<br \/>\n  for (var i=0; i&lt;asis.length; i++) {<br \/>\n    if (asis[i].href.indexOf(thisiid) == -1) {<br \/>\n      if (asis[i].href.indexOf(\"\/wordpress\/\") != -1 || asis[i].href.indexOf(\"\/ITblog\/\") != -1 && asis[i].href.indexOf(\"\/sitemap\") == -1) {<br \/>\n    rsuff='';<br \/>\n    if (asis[i].href.indexOf('rnx=') == -1) rsuff='&rnx=' + Math.floor(Math.random() * 800000) + 5;<br \/>\n    if (asis[i].href.indexOf(thisiid + '=&') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=&', thisiid + '=' + encodeURIComponent(thisv) + rsuff + '&');<br \/>\n    } else {<br \/>\n    if (asis[i].href.indexOf('#') != -1) {<br \/>\n     if (asis[i].href.indexOf('?') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '&' + thisiid + '=' + encodeURIComponent(thisv) + rsuff + '#');<br \/>\n     } else {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '?' + thisiid + '=' + encodeURIComponent(thisv) + rsuff + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (asis[i].href.indexOf('?') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '&' + thisiid + '=' + encodeURIComponent(thisv) + rsuff;<br \/>\n     } else {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '?' + thisiid + '=' + encodeURIComponent(thisv) + rsuff;<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n&nbsp;<br \/>\nfunction change_ff(thisi, thisv) {<br \/>\n  \/\/thisi.title='#';<br \/>\n  if (thisv != '' || 1 == 1) {<br \/>\n    var rsuff='';<br \/>\n    if (document.URL.indexOf('rnx=') == -1) rsuff='&rnx=' + Math.floor(Math.random() * 800000) + 5;<br \/>\n    if (thisv.indexOf('%20') != -1) thisv=decodeURIComponent(thisv);<br \/>\n    if (thisv != '' && thisi.id.indexOf(\"border\") != -1) thisi.style.border = thisv;<br \/>\n    if (thisv != '' && thisi.id.indexOf(\"background\") != -1) thisi.style.backgroundColor = thisv;<br \/>\n    if (thisv != '' && thisi.id.indexOf(\"family\") != -1) thisi.style.fontFamily = thisv;<br \/>\n    if (document.URL.indexOf(thisi.id + '=&') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + rsuff + '&');<br \/>\n    } else {<br \/>\n    if (document.URL.indexOf('#') != -1) {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff + '#');<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff;<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff;<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n    if (thisv != '' && thisi.id.indexOf(\"border\") != -1) document.getElementById(thisi.id.replace('-','_')).style.border = thisv;<br \/>\n    if (thisv != '' && thisi.id.indexOf(\"background\") != -1) document.getElementById(thisi.id.replace('-','_')).style.backgroundColor = thisv;<br \/>\n    if (thisv != '' && thisi.id.indexOf(\"family\") != -1) document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;<br \/>\n  }<br \/>\n}<br \/>\n<\/strong><br \/>\n...<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); <font color=blue><strong>cookie_fonts();<\/strong><\/font> \" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code><\/p>\n<p>Please feel free to try it all off the <i>All Posts<\/i> menu above.<\/p>\n<hr>\n<p id='wuhsbpt'>Previous <a target=_blank title='WordPress User Header Section Border Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-header-section-border-primer-tutorial\/'>WordPress User Header Section Border Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_hsb_changes.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress User Header Section Border Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_hsb_changes.jpg\" title=\"WordPress User Header Section Border Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress User Header Section Border Primer Tutorial<\/p><\/div>\n<p>Recap to <\/p>\n<p id='wuffpt'>Previous <a target=_blank title='WordPress User Font Families Primer Tutorial' href='#wuffpt'>WordPress User Font Families Primer Tutorial<\/a> as shown below, yesterday &#8230;<\/p>\n<blockquote>\n<p>In the world of client\/server programming it is surprising that PHP (on the server side) and Javascript (on the client side) can so often both be approaches to solving a problem.   But maybe it shouldn&#8217;t be so surprising, since they both share the mutual &#8220;HTML&#8221; friend in the middle.<\/p>\n<p>Our WordPress changes today reflect that client\/server teamwork, with the access both PHP and Javascript have to cookies coming in handy at different stages of our CSS styling modifications to our WordPress blog (here).  The modifications centre around offering the user the ability to choose their own <i>font families<\/i> to use when viewing this blog.  Should the user go down that route of specifying their own <i>font families<\/i> for any\/all of &#8230;<\/p>\n<ul>\n<li>blog title<\/li>\n<li>post title<\/li>\n<li>post contents (or &#8220;innards&#8221;)<\/li>\n<\/ul>\n<p> &#8230; this change is stored in cookies and will remain in place (for 6 months that is) as the default font setting for that web browser accessing this WordPress blog from then on, until the user picks another <i>font family<\/i> or leaves the blog to pick its own default <i>font family<\/i>.<\/p>\n<p>And what is the mechanism for the user to control that?  Web browser URLs will do it, or some <i>All Post<\/i> menu submenus we&#8217;ve written for the purpose.<\/p>\n<p>So what are the two ways for the client\/server Javascript\/PHP cookie access to work?<\/p>\n<ul>\n<li>Javascript can access DOM <a target=_blank title='Javascript cookie usage information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>document.cookie<\/i><\/a><\/li>\n<li>PHP can access $_SERVER variable <a target=_blank title='PHP $_SERVER variables' href='http:\/\/php.net\/manual\/en\/reserved.variables.server.php'><i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i><\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; well, this was good in theory, but its &#8220;backdoor&#8221; approach to WordPress development (to see some good information here please read <a target=_blank title='WordPress Cookie information' href='https:\/\/www.google.com\/search?q=wordpress+cookies&#038;ie=utf-8&#038;oe=utf-8'>this<\/a>) didn&#8217;t take into account the way WordPress manipulates client cookies, and controls them in scenarios where users are logged in, which we don&#8217;t want to demand here &#8230; so &#8230; lowering expectations a bit &#8230; what we have is functionality that can allow for user defined CSS styling within a web browser session, but not between sessions.  The way we end up &#8220;not using cookies&#8221; so much anymore, is to fix the HTML <i>a<\/i> links on the page (via <font color=blue><i>function appendtoa(thisiid, thisv)<\/i><\/font> of code below) to have, via PHP $_GET[] parameters, for the functionality to flow through for as long as the user is in a session using the blog, and defining their own CSS &#8220;looks&#8221; via the &#8220;All Posts&#8221; submenu options.<\/p>\n<p>And so, below, we add in new functionality for the user to control the blog&#8217;s <font color=blue>Header Section&#8217;s Border<\/font> look, and you&#8217;ll see these two approaches in action in two separate sections of the WordPress Blog&#8217;s PHP header.php (usual file to make changes to) as below (where we moved the timing of this functionality to being the <font color=blue>last thing done at the <i>document.body<\/i> onload event<\/font> &#8230;<\/p>\n<ul>\n<li>Javascript can access DOM <i>document.cookie<\/i> and also maintain the cookies via the address bar URL &#8220;leads&#8221; (<strong>bold<\/strong> changes below)<br \/>\n<code><br \/>\n<strong><br \/>\nfunction cookieAVal(cName) {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n<\/strong><strong><br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (cName == tCookie[j].split(\"=\")[0]) {<br \/>\n      return decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/strong><strong><br \/>\nfunction deleteACookie(goodname) {<br \/>\n var expireDate = new Date();<br \/>\n expireDate.setDate(expireDate.getDate()-1);<br \/>\n \/\/if ((\"\" + cookieAVal(goodname)).length != 0) {<br \/>\n    document.cookie = goodname + \"=;expires=\" + expireDate.toGMTString();<br \/>\n \/\/}<br \/>\n}<br \/>\n<\/strong><strong style='color:red;'><br \/>\nfunction lookAtCookies() {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n   for (var j=0; j<tCookie.length; j++) {\n    if (\"rjmwp_masthead-border\" == tCookie[j].split(\"=\")[0]) {\n      document.getElementById('bbottom').innerHTML+=(\" \n\n<style>  #masthead { border: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } <\/style>\n<p> \");<br \/>\n      appendtoa(\"rjmwp_masthead-border\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n    if (\"rjmwp_base_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" <\/p>\n<style>  body, input, textarea, .page-title span, .pingback a.url { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } <\/style>\n<p> \");<br \/>\n      appendtoa(\"rjmwp_base_font-family\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n    if (\"rjmwp_posttitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" <\/p>\n<style>   h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } <\/style>\n<p> \");<br \/>\n      appendtoa(\"rjmwp_posttitle_font-family\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n    if (\"rjmwp_blogtitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" <\/p>\n<style>  #ahomeis { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } <\/style>\n<p> \");<br \/>\n      appendtoa(\"rjmwp_blogtitle_font-family\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/strong><strong><br \/>\nfunction cookie_fonts() {<br \/>\n  var oidea;<br \/>\n  var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var expireDate;<br \/>\n <font color=red>lookAtCookies();<\/font><br \/>\n  <font color=blue>var masthead_border=location.search.split('rjmwp_masthead-border=')[1] ? decodeURIComponent(location.search.split('rjmwp_masthead-border=')[1].split('&')[0]) : ' ';<br \/>\n  if (masthead_border.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_masthead-border=\" + encodeURIComponent(masthead_border) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   appendtoa(\"rjmwp_masthead-border\", \"\" + encodeURIComponent(masthead_border));<br \/>\n  } else if (masthead_border == '' && document.URL.indexOf('-border=') != -1) {<br \/>\n   deleteACookie('rjmwp_masthead-border');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_masthead-border');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_masthead-border');<br \/>\n  }<\/font><br \/>\n  if (base_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_base_font-family=\" + encodeURIComponent(base_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   <font color=blue>appendtoa(\"rjmwp_base_font-family\", \"\" + encodeURIComponent(base_font));<\/font><br \/>\n  } else if (base_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n   deleteACookie('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_base_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  if (blogtitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n    \/\/alert(918);<br \/>\n   document.cookie = \"rjmwp_blogtitle_font-family=\" + encodeURIComponent(blogtitle_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   <font color=blue>appendtoa(\"rjmwp_blogtitle_font-family\", \"\" + encodeURIComponent(blogtitle_font));<\/font><br \/>\n  } else if (blogtitle_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n    \/\/alert(928);<br \/>\n   deleteACookie('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_blogtitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  if (posttitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_posttitle_font-family=\" + encodeURIComponent(posttitle_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   <font color=blue>appendtoa(\"rjmwp_posttitle_font-family\", \"\" + encodeURIComponent(posttitle_font));<\/font><br \/>\n  } else if (posttitle_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n   deleteACookie('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_posttitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n}<br \/>\n<\/strong><strong style=\"color:blue;\"><br \/>\nfunction appendtoa(thisiid, thisv) {<br \/>\n  var asis=document.getElementsByTagName(\"a\");<br \/>\n  for (var i=0; i&lt;asis.length; i++) {<br \/>\n    if (asis[i].href.indexOf(thisiid) == -1) {<br \/>\n      if (asis[i].href.indexOf(\"\/wordpress\/\") != -1 || asis[i].href.indexOf(\"\/ITblog\/\") != -1 && asis[i].href.indexOf(\"\/sitemap\") == -1) {<br \/>\n    if (asis[i].href.indexOf(thisiid + '=&') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=&', thisiid + '=' + encodeURIComponent(thisv) + '&');<br \/>\n    } else {<br \/>\n    if (asis[i].href.indexOf('#') != -1) {<br \/>\n     if (asis[i].href.indexOf('?') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '&' + thisiid + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     } else {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '?' + thisiid + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (asis[i].href.indexOf('?') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '&' + thisiid + '=' + encodeURIComponent(thisv);<br \/>\n     } else {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '?' + thisiid + '=' + encodeURIComponent(thisv);<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/strong><strong><br \/>\nfunction change_ff(thisi, thisv) {<br \/>\n  \/\/thisi.title='#';<br \/>\n  if (thisv != '' || 1 == 1) {<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") == -1)<\/font> thisi.style.fontFamily = thisv;<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") != -1) thisi.style.border = thisv;<\/font><br \/>\n    if (document.URL.indexOf(thisi.id + '=&') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + '&');<br \/>\n    } else {<br \/>\n    if (document.URL.indexOf('#') != -1) {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") == -1)<\/font> document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") != -1) document.getElementById(thisi.id.replace('-','_')).style.border = thisv;<\/font><br \/>\n  }<br \/>\n}<br \/>\n<\/strong><br \/>\n...<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); <font color=blue><strong>cookie_fonts();<\/strong><\/font> \" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code>\n<\/li>\n<li>PHP can access $_SERVER variable <i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i> and PHP is really useful here to change the CSS styling in the web page header as the server mechanism getting in ahead of the Javascript client (though this Javascript may have been able to work it manipulating DOM <i>document.head<\/i> &#8230; but this is not our preferred method if PHP is there, and because it is a WordPress blog, PHP is there (so use it) <font color=red> &#8230; alas, the PHP $_SERVER[&#8216;HTTP_COOKIE&#8217;] (as might be expected) is not useful for client cookie detection, so added <i>function lookAtCookies()<\/i> to Javascript above as an alternative client method not using <i>document.header<\/i> but, rather, appending into <i>document.body<\/i> &lt;style&gt; blah blah blah &lt;\/style&gt; information to get the job done<\/font>) (<strong>bold<\/strong> changes below)<br \/>\n<code>\n<link rel='stylesheet' type='text\/css' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_border.css' \/>\n&lt;style&gt;<br \/>\n<i><\/i><br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<br \/>\n<i><\/i><br \/>\n<i><\/i><br \/>\n#s {<br \/>\n   width: 55% !important;<br \/>\n}<br \/>\n<i><\/i><br \/>\n#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<br \/>\n<strong><br \/>\n&lt;?php<br \/>\n  $font_family=\"Verdana\";<br \/>\n  $blogtitle_font_family=\"Verdana\";<br \/>\n  $posttitle_font_family=='\"Helvetica Neue\",Arial,Helvetica,\"Nimbus Sans L\",sans-serif';<br \/>\n  <font color=blue>$masthead_border=\"\";<br \/>\n  if (isset($_GET['rjmwp_masthead-border'])) {<br \/>\n    if ($_GET['rjmwp_masthead-border'] != \"\") {<br \/>\n      echo \"\\n\\n #masthead { border: \" . urldecode($_GET['rjmwp_masthead-border']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_masthead-border=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_masthead-border=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #masthead { border: \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<\/font><br \/>\n  if (isset($_GET['rjmwp_base_font-family'])) {<br \/>\n    if ($_GET['rjmwp_base_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($_GET['rjmwp_base_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_base_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_base_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_blogtitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_blogtitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($_GET['rjmwp_blogtitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_blogtitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_blogtitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_posttitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_posttitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($_GET['rjmwp_posttitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_posttitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_posttitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/strong><br \/>\ncode {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<br \/>\n<i><\/i><br \/>\n...<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Again the mechanism for the user to control this themselves is 4 submenus off the <i>All Posts<\/i> menu.  Blog New Pages like below (for example of 3 &#8220;Pick Your Own Blog Header Section Border&#8221;) will do it (and show the idea) &#8230;<\/p>\n<p><code><br \/>\n&lt;p id='rjmwp_masthead_border'&gt;Please feel free to enter a Border (CSS Styling (eg. 2px solid green)) to use for the Blog Header Section (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input id='rjmwp_masthead-border' type='text' value='' onblur=' change_ff(this, this.value); ' title='https:\/\/www.rjmprogramming.com.au\/ITblog\/?rjmwp_masthead-border=' onfocus=\" this.value=cookieAVal('rjmwp_masthead-border');\"&gt;&lt;\/input&gt; &lt;input type='button' onclick=\" location.href=document.getElementById('rjmwp_masthead-border').title; \" value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n<\/code><\/p>\n<p>You can try it yourself by accessing the <i>All Posts<\/i> menu to see for yourself.  Again, we hope some ideas spring from all this for you, and remember that HTML inspector tools like Firefox&#8217;s <a target=_blank title='Firebug' href='http:\/\/getfirebug.com'>Firebug<\/a> are invaluable for helping with the examination of that &#8220;middle&#8221; HTML to tweak on what might be right and what might be wrong with your programming.<\/p>\n<hr>\n<p id='wuffpt'>Previous <a target=_blank title='WordPress User Font Families Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-font-families-primer-tutorial\/'>WordPress User Font Families Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_ff_changes.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress User Font Families Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_ff_changes.jpg\" title=\"WordPress User Font Families Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress User Font Families Primer Tutorial<\/p><\/div>\n<p>In the world of client\/server programming it is surprising that PHP (on the server side) and Javascript (on the client side) can so often both be approaches to solving a problem.   But maybe it shouldn&#8217;t be so surprising, since they both share the mutual &#8220;HTML&#8221; friend in the middle.<\/p>\n<p>Our WordPress changes today reflect that client\/server teamwork, with the access both PHP and Javascript have to cookies coming in handy at different stages of our CSS styling modifications to our WordPress blog (here).  The modifications centre around offering the user the ability to choose their own <i>font families<\/i> to use when viewing this blog.  Should the user go down that route of specifying their own <i>font families<\/i> for any\/all of &#8230;<\/p>\n<ul>\n<li>blog title<\/li>\n<li>post title<\/li>\n<li>post contents (or &#8220;innards&#8221;)<\/li>\n<\/ul>\n<p> &#8230; this change is stored in cookies and will remain in place (for 6 months that is) as the default font setting for that web browser accessing this WordPress blog from then on, until the user picks another <i>font family<\/i> or leaves the blog to pick its own default <i>font family<\/i>.<\/p>\n<p>And what is the mechanism for the user to control that?  Web browser URLs will do it, or some <i>All Post<\/i> menu submenus we&#8217;ve written for the purpose.<\/p>\n<p>So what are the two ways for the client\/server Javascript\/PHP cookie access to work?<\/p>\n<ul>\n<li>Javascript can access DOM <a target=_blank title='Javascript cookie usage information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>document.cookie<\/i><\/a><\/li>\n<li>PHP can access $_SERVER variable <a target=_blank title='PHP $_SERVER variables' href='http:\/\/php.net\/manual\/en\/reserved.variables.server.php'><i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i><\/a><\/li>\n<\/ul>\n<p>You&#8217;ll see these two approaches in action in two separate sections of the WordPress Blog&#8217;s PHP header.php (usual file to make changes to) as below &#8230;<\/p>\n<ul>\n<li>Javascript can access DOM <i>document.cookie<\/i> and also maintain the cookies via the address bar URL &#8220;leads&#8221; (<strong>bold<\/strong> changes below)<br \/>\n<code><br \/>\n<strong><br \/>\nfunction cookieAVal(cName) {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n<\/strong><strong><br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (cName == tCookie[j].split(\"=\")[0]) {<br \/>\n      return decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/strong><strong><br \/>\nfunction deleteACookie(goodname) {<br \/>\n var expireDate = new Date();<br \/>\n expireDate.setDate(expireDate.getDate()-1);<br \/>\n \/\/if ((\"\" + cookieAVal(goodname)).length != 0) {<br \/>\n    document.cookie = goodname + \"=;expires=\" + expireDate.toGMTString();<br \/>\n \/\/}<br \/>\n}<br \/>\n<\/strong><strong style='color:red;'><br \/>\nfunction lookAtCookies() {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (\"rjmwp_base_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.write(\" &lt;style&gt;  body, input, textarea, .page-title span, .pingback a.url { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \";<br \/>\n    }<br \/>\n    if (\"rjmwp_posttitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.write(\" &lt;style&gt;   h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \";<br \/>\n    }<br \/>\n    if (\"rjmwp_blogtitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.write(\" &lt;style&gt;  #ahomeis { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \";<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/strong><strong><br \/>\nfunction cookie_fonts() {<br \/>\n  var oidea;<br \/>\n  var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var expireDate;<br \/>\n <font color=red>lookAtCookies();<\/font><br \/>\n  if (base_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_base_font-family=\" + encodeURIComponent(base_font) + \";expires=\" + expireDate.toGMTString();<br \/>\n  } else if (base_font == '') {<br \/>\n   deleteACookie('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_base_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  if (blogtitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_blogtitle_font-family=\" + encodeURIComponent(blogtitle_font) + \";expires=\" + expireDate.toGMTString();<br \/>\n  } else if (blogtitle_font == '') {<br \/>\n   deleteACookie('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_blogtitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  if (posttitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_posttitle_font-family=\" + encodeURIComponent(posttitle_font) + \";expires=\" + expireDate.toGMTString();<br \/>\n  } else if (posttitle_font == '') {<br \/>\n   deleteACookie('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_posttitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n}<br \/>\n<\/strong><strong><br \/>\nfunction change_ff(thisi, thisv) {<br \/>\n  \/\/thisi.title='#';<br \/>\n  if (thisv != '' || 1 == 1) {<br \/>\n    if (thisv != '') thisi.style.fontFamily = thisv;<br \/>\n    if (document.URL.indexOf(thisi.id + '=&') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + '&');<br \/>\n    } else {<br \/>\n    if (document.URL.indexOf('#') != -1) {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n    if (thisv != '') document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;<br \/>\n  }<br \/>\n}<br \/>\n<\/strong><br \/>\nfunction courseCookies() {<br \/>\n<strong><br \/>\n  cookie_fonts(); \/\/ User font checks<br \/>\n  <\/strong><br \/>\n  img_alt();  \/\/ Make sure all img have alt (=title)<br \/>\n  ajaxcontexthelp_mode();  \/\/ Check on Context Help mode<br \/>\n  download_mode();  \/\/ Check on Download mode<br \/>\n  metasep(); \/\/ meta-sep class dropdown<br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n  ul_li_noclass();  \/\/ Alternative to bullet ul\/li lists<br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n  checkMarginLeftImages();<br \/>\n<\/code>\n<\/li>\n<li>PHP can access $_SERVER variable <i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i> and PHP is really useful here to change the CSS styling in the web page header as the server mechanism getting in ahead of the Javascript client (though this Javascript may have been able to work it manipulating DOM <i>document.head<\/i> &#8230; but this is not our preferred method if PHP is there, and because it is a WordPress blog, PHP is there (so use it) <font color=red> &#8230; alas, the PHP $_SERVER[&#8216;HTTP_COOKIE&#8217;] (as might be expected) is not useful for client cookie detection, so added <i>function lookAtCookies()<\/i> to Javascript above as an alternative client method not using <i>document.header<\/i> but, rather, appending into <i>document.body<\/i> &lt;style&gt; blah blah blah &lt;\/style&gt; information to get the job done<\/font>) (<strong>bold<\/strong> changes below)<br \/>\n<code>\n<link rel='stylesheet' type='text\/css' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_border.css' \/>\n&lt;style&gt;<br \/>\n<i><\/i><br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<br \/>\n<i><\/i><br \/>\n<i><\/i><br \/>\n#s {<br \/>\n   width: 55% !important;<br \/>\n}<br \/>\n<i><\/i><br \/>\n#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<br \/>\n<strong><br \/>\n&lt;?php<br \/>\n  $font_family=\"Verdana\";<br \/>\n  $blogtitle_font_family=\"Verdana\";<br \/>\n  $posttitle_font_family=='\"Helvetica Neue\",Arial,Helvetica,\"Nimbus Sans L\",sans-serif';<br \/>\n  if (isset($_GET['rjmwp_base_font-family'])) {<br \/>\n    if ($_GET['rjmwp_base_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($_GET['rjmwp_base_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_base_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_base_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_blogtitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_blogtitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($_GET['rjmwp_blogtitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_blogtitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_blogtitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_posttitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_posttitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($_GET['rjmwp_posttitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_posttitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_posttitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/strong><br \/>\ncode {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<br \/>\n<i><\/i><br \/>\n...<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>And so we come to the mechanism for the user to control this themselves, as 3 submenus off the <i>All Posts<\/i> menu.  Blog New Pages like below (for example of 3 &#8220;Pick Your Own Post Contents Font&#8221;) will do it (and show the idea) &#8230;<\/p>\n<p><code><br \/>\n&lt;p id='rjmwp_base_font_family'&gt;Please feel free to enter a Font Family to use for the Post Contents (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input id='rjmwp_base_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='https:\/\/www.rjmprogramming.com.au\/ITblog\/?rjmwp_base_font-family=' onfocus=\" this.value=cookieAVal('rjmwp_base_font-family');\"&gt;&lt;\/input&gt; &lt;input type='button' onclick=\" location.href=document.getElementById('rjmwp_base_font-family').title; \" value='Show Blog This Way with this Web Browser Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n<\/code><\/p>\n<p>You can try it yourself by accessing the <i>All Posts<\/i> menu you see above.  We hope some ideas spring from all this for you, and remember that HTML inspector tools like Firefox&#8217;s <a target=_blank title='Firebug' href='http:\/\/getfirebug.com'>Firebug<\/a> are invaluable for helping with the examination of that &#8220;middle&#8221; HTML to tweak on what might be right and what might be wrong with your programming.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d19034' onclick='var dv=document.getElementById(\"d19034\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19034' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d19088' onclick='var dv=document.getElementById(\"d19088\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19088' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d19128' onclick='var dv=document.getElementById(\"d19128\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19128' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Similarly to two days ago (with WordPress User Header Section Border Primer Tutorial as shown below), but we&#8217;ll be adding new Body Background (Colour) user controllable functionality (within any one web browser session), let&#8217;s recap to &#8230; In the world &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-body-background-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[151,177,213,264,281,438,451,452,576,652,932,970,997,1319,1456],"class_list":["post-19128","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-cache","tag-clientserver","tag-cookies","tag-css","tag-firebug","tag-font","tag-form","tag-html","tag-javascript","tag-php","tag-post","tag-programming","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19128"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=19128"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19128\/revisions"}],"predecessor-version":[{"id":57336,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19128\/revisions\/57336"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=19128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=19128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=19128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}