{"id":3372,"date":"2013-08-02T05:53:04","date_gmt":"2013-08-01T19:53:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3372"},"modified":"2013-08-02T05:53:04","modified_gmt":"2013-08-01T19:53:04","slug":"wordpress-change-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-change-primer-tutorial\/","title":{"rendered":"WordPress Change Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Firefox\/Followup\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Change Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Firefox\/Followup\/Firebug_Fireftp_Followup-76of.jpg\" title=\"Wordpress Change Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Wordpress Change Primer Tutorial<\/p><\/div>\n<p>Often get asked what <a target=_blank title='CMS information by Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system'>CMS<\/a> is this?    Answer is <a target=_blank title='Wordpress' href='http:\/\/wordpress.org'>WordPress<\/a>.<\/p>\n<p>Then often get asked what <a target=_blank title='Theme (computer) iformation from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Theme_%28computer%29'>theme<\/a> is it using?     Answer is default WordPress theme Twenty Ten.<\/p>\n<p>Finally we have a tutorial where this is relevant!    Yayyyyyyyyyyyyyyyyyyyyyyyyy!!!!!!<\/p>\n<p style=\"color:red; font-size:9px;\">In what follows * = as seen when all posts showing.<\/p>\n<p>We are doing a <a target=_blank title='Wordpress Change Primer Tutorial' href=\"http:\/\/www.rjmprogramming.com.au\/Firefox\/Followup\/\">tutorial<\/a> here where we make a change to our WordPress website&#8217;s CSS style.    Am going to change a heading colour from black to dark blue (of the Google icon) on this blog *.   The smart alecs or should that be silly alecs (how come Alec has such a tortured time?!) who say this is already done can laugh away, and indeed be correct, because you are seeing the website changed &#8230; so if you have been here below &#8230; &#8220;once upon a time there lived a modest little website &#8230; it had black subheadings, but one day dreamed of the day when all its subheadings would become a blue * &#8230; the shade of blue sky, blue water &#8230;. and then it came to pass that there was a travelling computer  I.T. pilgrim passing by that website &#8230; and what did they behold &#8230; yayyyyyyyyyyy &#8230; a black subheadinged website * &#8230; and the wind that day brought a message &#8230; a plea &#8230; &#8216;Whoever shall make my subheadings blue * they shall inherit the secret of the pond near the mote across from the river. Ooooh OoooooOhhhh&#8217; &#8230; and so it came to pass that the Intel Chip was invented &#8230; but I digress &#8230; zzzzz zzzzzz zzzzzzzzzzzzzzzzzzzz &#8230; hang on, what was an I.T. pilgrim doing in I.T. without the Intel Chip?&#8221;<\/p>\n<p>To find the colour of the Google icon am going to use techniques of <a href='#dcmdodah' title='Digital Colour Meter on Mac Laptop Tutorial'>Digital Colour Meter on Mac Laptop Tutorial<\/a> below.<\/p>\n<p>Other parts of the tutorial use the techniques of <a href='#fffmdodah' title='Firefox and Favourite Plugins Tutorial'>Firefox and Favourite Plugins Tutorial<\/a> way below.<\/p>\n<p>This kind of work is carried out by the administrator of a website, or blog, and Firefox and its plugins come in handy for such work, but please know with this, as with many other things in I.T. there are many other ways to do things.<\/p>\n<hr \/>\n<p id=\"dcmdodah\">Below see <a target=_blank title='Digital Colour Meter on Mac Laptop Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=2674'>Digital Colour Meter on Mac Laptop Tutorial<\/a> &#8230;<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/DigitalColourMeter\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Digital Colour Meter on Mac Laptop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/DigitalColourMeter\/DigitalColourMeter.jpg\" title=\"Digital Colour Meter on Mac Laptop Tutorial\" \/><\/a><p class=\"wp-caption-text\">Digital Colour Meter on Mac Laptop Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to Digital Colour Meter application in Mac OS X, which is a tool useful for web development for determining the RGB for a colour of your choosing.<\/p>\n<blockquote><p>DigitalColor Meter is a utility for measuring and displaying the colour values of pixels displayed on the screen of a Macintosh laptop computer.<\/p>\n<p>The utility presents a &#8220;window&#8221; onto the screen which includes a cursor which by default is 1 \u00d7 1 pixel in size. The colour displayed in that pixel is shown as a colour value which may be represented as decimal or hexadecimal RGB triplets, CIE 1931, CIE 1976 or CIELAB triplets or a Tristimulus triplet.<\/p>\n<p>The displayed colour could be copied either as a solid colour or as the colour value which represents it, to be used in other applications (for instance an RGB triplet may be used in a colour specification to be used on a World Wide Web page).<\/p><\/blockquote>\n<p>Let&#8217;s see some simple <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/DigitalColourMeter'>Digital Colour Meter application usage in Mac OS X<\/a>.<\/p>\n<p>Am sure you can imagine how powerful this functionality is, and what a great tool it can be for practical aspects of web design where you are looking to discover the details of that elusive colour you like.<\/p>\n<p>Here is a useful <a target=_blank title='Hexidecimal Javascript' href='http:\/\/www.roselab.jhu.edu\/~raj\/MISC\/dechexjs.html'>link<\/a> for usage purposes.<\/p>\n<p>So, to use the output of Digital Colour Meter on a Mac laptop see some (there are lots of other approaches also) HTML usage (another great <a target=_blank title='HTML colour information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_colors.asp'>link<\/a> is) below ( where tohex3(185,127,206) is &#8216;#897FCE&#8217; ):<\/p>\n<ul>\n<li>\n<p style=\"color:rgb(185,127,206);\">Direct HTML usage via Color RGB method via style=&#8221;color:rgb(185,127,206);&#8221;<\/p>\n<\/li>\n<li>\n<p id=\"mycpx\">Javascript DOM usage via Color HEX method for HTML element with id mycpx via (for example) &lt;script type=&#8217;text\/javascript&#8217;&gt; var omycpx=document.getElementById(&#8216;mycpx&#8217;); omycpx.style.color=tohex3(185,127,206); &lt;\/script&gt;<\/p>\n<p><script type='text\/javascript'> var omycpx=document.getElementById('mycpx'); omycpx.style.color=tohex3(185,127,206); <\/script><\/li>\n<li>\n<p class=\"mypclass\">Direct usage via Color RGB method for HTML element with class mypclass via CSS &lt;style&gt; .mypclass { color:rgb(185,127,206); }&lt;\/style&gt;<\/p>\n<\/li>\n<li>\n<p id=\"mypid\">Direct usage via Color RGB method for HTML element with id mypid via CSS &lt;style&gt; .mypclass { color:rgb(185,127,206); }&lt;\/style&gt;<\/li>\n<li>\n<hr class='ybi'><\/li>\n<li>\n<p style=\"color:black;background-color:rgb(185,127,206);\">Direct HTML usage via Color RGB method via style=&#8221;background-color:rgb(185,127,206);color:black;&#8221;<\/p>\n<\/li>\n<li>\n<p id=\"mycp22\">Javascript DOM usage via Color HEX method for HTML element with id mycp22 via (for example) &lt;script type=&#8217;text\/javascript&#8217;&gt; var omycp22=document.getElementById(&#8216;mycp22&#8242;); omycp22.style.color=&#8217;black&#8217;; omycp22.style.backgroundColor=tohex3(185,127,206); &lt;\/script&gt;<\/p>\n<p><script type='text\/javascript'> var omycp22=document.getElementById('mycp22'); omycp22.style.color='black';  omycp22.style.backgroundColor=tohex3(185,127,206); <\/script><\/li>\n<li>\n<p class=\"mypclass22\">Direct usage via Color RGB method for HTML element with class mypclass22 via CSS &lt;style&gt; .mypclass22 {  background-color:rgb(185,127,206); color:&#8217;black&#8217;; }&lt;\/style&gt;<\/p>\n<\/li>\n<li>\n<p id=\"mypid2\">Direct usage via Color RGB method for HTML element with id mypid2 via CSS &lt;style&gt; #mypid2 {  background-color:rgb(185,127,206); color:&#8217;black&#8217;; }&lt;\/style&gt;<\/p>\n<\/li>\n<\/ul>\n<p>Link to Mac OS X Digital Colour Meter information &#8230; <a target=_blank title='Mac OS X Automator information' href='http:\/\/en.wikipedia.org\/wiki\/DigitalColor_Meter'>from Wikipedia from which quote above comes<\/a>.<br \/>\nLink to Mac OS X Digital Colour Meter information &#8230; <a target=_blank title='Mac OS X Automator tutorials' href='http:\/\/www.apple.com\/osx\/apps\/all.html#colormeter'> from Apple<\/a> (the company of Mac OS X and so the company of Digital Colour Meter).\n<\/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='#d2674' onclick='var dv=document.getElementById(\"d2674\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=60\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d2674' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p id=\"fffmdodah\">Below see   <a target=_blank title='Firefox and Favourite Plugins Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=440'>Firefox and Favourite Plugins Tutorial<\/a> &#8230;<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Firefox\/iFrame.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Firefox and Favourite Plugins Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Firefox\/Firefox.jpg\" title=\"Firefox and Favourite Plugins Tutorial\" \/><\/a><p class=\"wp-caption-text\">Firefox and Favourite Plugins Tutorial<\/p><\/div>\n<p><a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/Firefox\/iFrame.html'>Tutorial<\/a> &#8230;<\/p>\n<p><strong><\/p>\n<p>Transcript:<\/p>\n<p><\/strong><\/p>\n<p>One of the best tools for Web Development is an HTML element analyzer.<\/p>\n<p>There are a few out there by now, but I really like Firebug from <a target=_blank href='http:\/\/getfirebug.com\/'>http:\/\/getfirebug.com\/<\/a><\/p>\n<p>Both these great tools are plugins for my favourite Web browser Firefox from<br \/>\n    <a target=_blank href='http:\/\/www.mozilla.org\/en-US\/firefox\/new\/'>http:\/\/www.mozilla.org\/en-US\/firefox\/new\/<\/a><\/p>\n<p>Another important tool for Web Development is an ftp application like FireFTP from<br \/>\n    <a target=_blank href='http:\/\/fireftp.net\/'>http:\/\/fireftp.net\/<\/a><\/p>\n<p>So let&#8217;s have a look at Firefox, briefly, and Firebug and FireFTP &#8230;\n<\/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='#d440' onclick='var dv=document.getElementById(\"d440\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Firefox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d440' 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='#d3372' onclick='var dv=document.getElementById(\"d3372\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=60\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d3372' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Often get asked what CMS is this? Answer is WordPress. Then often get asked what theme is it using? Answer is default WordPress theme Twenty Ten. Finally we have a tutorial where this is relevant! Yayyyyyyyyyyyyyyyyyyyyyyyyy!!!!!! In what follows * &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-change-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":[281,330,438,439,440,615,1209,1268,1319,1400,1404,1456],"class_list":["post-3372","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-digital-colour-meter","tag-firebug","tag-firefox","tag-fireftp","tag-intel-chip","tag-style","tag-theme","tag-tutorial","tag-web","tag-web-browser","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/3372"}],"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=3372"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/3372\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=3372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=3372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=3372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}