{"id":11666,"date":"2015-01-23T05:01:13","date_gmt":"2015-01-22T18:01:13","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11666"},"modified":"2016-05-22T11:23:50","modified_gmt":"2016-05-22T01:23:50","slug":"wordpress-horizontal-rule-css-styling-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-horizontal-rule-css-styling-primer-tutorial\/","title":{"rendered":"WordPress Horizontal Rule CSS Styling Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hr_noclass.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Horizontal Rule CSS Styling Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hr_noclass.jpg\" title=\"Wordpress Horizontal Rule CSS Styling Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Wordpress Horizontal Rule CSS Styling Primer Tutorial<\/p><\/div>\n<p>WordPress Blog websites are often based on a theme and the theme used for this one is called Twenty Ten.  The theme helps you out with PHP templates to give a great foundation for the styling of your website, with a wonderful default look, but that doesn&#8217;t mean you have to stop there.  In this respect today&#8217;s blog posting is a lot like <a target=_blank href='#wbpcspt' title='Wordpress Bullet Point CSS Styling Primer Tutorial'>WordPress Bullet Point CSS Styling Primer Tutorial<\/a> as shown below.<\/p>\n<p>Today we address the HTML <a target=_blank title='HTML hr element information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>horizontal rule<\/a> ( ie. <i>hr<\/i> ) CSS styling, which we add &#8220;into the mix&#8221; for two different purposes at this WordPress blog &#8230;<\/p>\n<ol>\n<li>as a faint line to differentiate one section of webpage work to another<\/li>\n<li>as a divider between linked blog posts where a more recent blog post calls on a blog post from the past to show a relationship, or similar concept, or contrasting concept, or &#8220;building upon&#8221; scenario<\/li>\n<\/ol>\n<p>Decided that the CSS <i>hr<\/i> styling for the former type of usage was fine as is, and that for the latter, we&#8217;d like to make it more prominent, and help to show the user that it represents a chain of thought (a stream of consciousness methinks(?) &#8230; forsooth?!).<\/p>\n<p>So, with that in mind for the latter, what do we do?  It is a two step (thinking) process funnelling into the one little bit of CSS code, making use of the <a target=_blank title='html - Can I write a CSS selector selecting elements NOT having a certain class? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9110300\/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class'><i>&#8220;hr:not(.ybi)[:after] { CSSblah CSSblah CSSblah }&#8221;<\/i><\/a> CSS syntax, in &#8230; you guessed it &#8230; this WordPress blog&#8217;s header.php &#8230; bless its brunswick green socks &#8230;<\/p>\n<ul>\n<li>adjust all the &lt;hr&gt; we have for case 1. as above to give them all a class of &#8220;ybi&#8221;<\/li>\n<li>the other &lt;hr&gt; elements that fall into case 2. above, all keep the same HTML coding but header.php (which contains our local styling) changes as per this <b>bold<\/b> code below &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n<b><br \/>\n&lt;?php<br \/>\n  $hrc = rand(0, 10);<br \/>\n  $hrcarray = array(\"black\", \"red\", \"blue\", \"purple\", \"maroon\", \"teal\", \"brown\", \"orange\", \"olive\", \"lime\", \"green\");<br \/>\n  echo \"<br \/>\n\/* Like ... Glyph, by Harry Roberts ... at http:\/\/css-tricks.com\/examples\/hrs\/ ... thanks *\/<br \/>\nhr:not(.ybi) {<br \/>\npadding: 0;<br \/>\nborder: none;<br \/>\nborder-top: medium double #333;<br \/>\ncolor: \" . $hrcarray[$hrc] . \";<br \/>\ntext-align: center;<br \/>\n}<br \/>\nhr:not(.ybi):after {<br \/>\ncontent: '\\00261f';  \/* via ... http:\/\/www.utf8-chartable.de\/unicode-utf8-table.pl?start=9728 ... thanks *\/<br \/>\ndisplay: inline-block;<br \/>\nposition: relative;<br \/>\ntop: -0.55em; \/\/7em;<br \/>\nfont-size: 1.2em; \/\/1.5em;<br \/>\npadding: 0 0.2em; \/\/0.25em;<br \/>\nbackground: #fffff0;<br \/>\n}<br \/>\n\";<br \/>\n?&gt;<br \/>\n<\/b><br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Did you notice that, even though the <i>hr<\/i> HTML element type does not have an explicit closing tag as such, the <i>:after<\/i> CSS property still works as we talked about on <a target=_blank title='16\/1\/2015' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?m=20150116'>16\/1\/2015<\/a> with  <a target=_blank title='Language Word Association Game Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11641'>Language Word Association Game Tutorial<\/a> &#8230; yayyyyyyyyyy!<\/p>\n<blockquote>\n<p>(supplementing recent <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11513' title=\" ... the other one is a 'nice to have' functionality as outlined yesterday with PHP\/CSS Sentence Auxiliary Verb Game Tutorial\">PHP\/CSS Sentence Auxiliary Verb Game Tutorial<\/a> showing CSS #[elementID]:before { <a target=_blank title='CSS content information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_before.asp'>content: [prefixContent];<\/a> } and #[elementID]:after { <a target=_blank title='CSS content information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content: [suffixContent];<\/a> } functionality presented on the day before yesterday)<\/p>\n<\/blockquote>\n<p>Think it is good to draw attention to those case 2. horizontal rule <i>hr<\/i> elements to make it more clear for the reader what the blog posting&#8217;s intention, or stream of thought, might be.<\/p>\n<p>Thanks to the following helpful sources of information &#8230;<\/p>\n<ul>\n<li><a target=_blank title=\"Simple Styles for hr's\" href='http:\/\/css-tricks.com\/examples\/hrs\/'>Simple Styles for hr&#8217;s<\/a><\/li>\n<li><a target=_blank title='html - Can I write a CSS selector selecting elements NOT having a certain class? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9110300\/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class'>html &#8211; Can I write a CSS selector selecting elements NOT having a certain class? &#8211; Stack Overflow<\/a><\/li>\n<li><a target=_blank title='UTF-8 - Wikipedia, the free encyclopedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/UTF-8'>UTF-8 &#8211; Wikipedia, the free encyclopedia<\/a><\/li>\n<li><a target=_blank title='Unicode\/UTF-8-character table - starting from code position 2600 ... got the UTF-8 code for downward hand pointer from this webpage ... thanks' href='http:\/\/www.utf8-chartable.de\/unicode-utf8-table.pl?start=9728'>Unicode\/UTF-8-character table &#8211; starting from code position 2600<\/a><\/li>\n<\/ul>\n<p>Our contextual help Javascript source code (all in the one place) can be downloaded by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js--------GETME' title='wajax.js'>wajax.js<\/a> which changed as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js--------GETME' title='wajax.js'>wajax.js<\/a> for these modifications today.<\/p>\n<p id='takethemthere'>Live run?  Horizontal Rule(s) OK? ((c)(h)(o)(r)(t)(l)(e) &#8230; (c)(h)(o)(r)(t)(l)(e))  &#8230; You&#8217;re seeing a case 2. a bit below this text (and any dropdowns) &#8230; but if you insist &#8230; <a href='#takethemthere' title='Case 2. hr example'>here it is<\/a> &#8230; chow now, brown cow.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>The tutorial picture today features the <a target=_blank href='http:\/\/www.mozilla.org\/en-US\/firefox\/new\/' title='Firefox home page'>Firefox<\/a> web browser and a very useful add-on called <a target=_blank title='Firebug home page' href='https:\/\/getfirebug.com\/'>Firebug<\/a> which you may want more information about <a target=_blank title='Firebug tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firebug'>here<\/a>, which is commonly used to debug client-side Javascript and HTML.   As for today&#8217;s usage, Firebug is also extremely useful in deconstructing how a web page was created.   The other simple wonderful tool for this is the web browser&#8217;s equivalent menu command like View->Page Source (or sometimes equivalent of right-click Page Source).   Firebug has a sister product called <a target=_blank title='FirePHP home page' href='http:\/\/www.firephp.org\/'>FirePHP<\/a> which helps debug server-side PHP and Ajax <a target=_blank title='FirePHP tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firephp'>work<\/a>.<\/p>\n<hr \/>\n<p id='wbpcspt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11421' title='Wordpress Bullet Point CSS Styling Primer Tutorial'>WordPress Bullet Point CSS Styling 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\/HTMLCSS\/ul_li_noclass.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Bullet Point CSS Styling Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ul_li_noclass.jpg\" title=\"Wordpress Bullet Point CSS Styling Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Wordpress Bullet Point CSS Styling Primer Tutorial<\/p><\/div>\n<p>WordPress Blog websites are often based on a theme and the theme used for this one is called Twenty Ten.  The theme helps you out with PHP templates to give a great foundation for the styling of your website, with a wonderful default look, but that doesn&#8217;t mean you have to stop there.<\/p>\n<p>Today we address the bullet point lists which we add some non-default styling to via &#8230;<\/p>\n<ul>\n<li>CSS styling to HTML <a target=_blank title='HTML ul tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_ul.asp'>ul<\/a> (parent) <a target=_blank title='HTML li tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_li.asp'>li<\/a> (child) (bullet point) arrangements that have no pre-existing styling, involving style parameters &#8230;<\/li>\n<ul>\n<li><a target=_blank title='CSS content information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content: [unicode] \/0000a0;<\/a><\/li>\n<li><a target=_blank title='CSS list-style-type information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_list-style-type.asp'>list-style: none;<\/a><\/li>\n<\/ul>\n<li>PHP WordPress Blog header.php onload logic (with some randomizing code) to allow such styling to ul (parent) elements that have no classname yet or are one of Recent Posts, the code for which you can see below<\/li>\n<\/ul>\n<p>Think it is good to draw attention to bullet point lists because they represent an orderly approach to the blog post&#8217;s topic area that many users trying to figure things out would often appreciate, and hone in on.<\/p>\n<p>This ul (parent) li (child) CSS styling has great application for this WordPress blog, with its header.php changed as per the two bold code blocks below, respectively CSS coding and the Javascript onload functionality to call it into play  &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n<b><br \/>\n&lt;?php<br \/>\n  $ws = rand(0, 10);<br \/>\n  $wsarray = array(\"\", \"01F311\", \"0026F3\", \"0026BD\", \"00263C\", \"00263D\", \"00263E\", \"01F311\", \"0026F3\", \"0026BD\", \"0026f5\");<br \/>\n  $cs = rand(0, 10);<br \/>\n  $csarray = array(\"black\", \"red\", \"blue\", \"purple\", \"maroon\", \"teal\", \"brown\", \"orange\", \"olive\", \"lime\", \"green\");<br \/>\n  if ($wsarray[$ws] != \"\") {<br \/>\n     echo \"<br \/>\n ul.noclass {<br \/>\n    list-style: none;<br \/>\n }<br \/>\n ul.noclass li:before {<br \/>\n    list-style: none;<br \/>\n    float: left;<br \/>\n    margin-left: -15px;<br \/>\n    color: \" .  $csarray[$cs] . \";<br \/>\n    content: '\\\" . $wsarray[$ws] . \" \\0000a0';<br \/>\n    font-size: 1.2em;<br \/>\n    font-weight: bold;<br \/>\n  }<br \/>\n  ul.noclass li:after {<br \/>\n    list-style: none;<br \/>\n    color: \" .  $csarray[$cs] . \";<br \/>\n    content: no-close-quote;<br \/>\n    font-size: 1.2em;<br \/>\n    font-weight: bold;<br \/>\n }<br \/>\n\";<br \/>\n   }<br \/>\n?&gt;<br \/>\n<\/b><br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p><code><br \/>\n<b><br \/>\nfunction ul_li_noclass() {<br \/>\n  var limyli;<br \/>\n  var mylis=document.getElementsByTagName(\"ul\");<br \/>\n  if (mylis.length > 0) {<br \/>\n    for (limyli=1; limyli&lt;mylis.length; limyli++) {<br \/>\n      if (mylis[limyli].className == \"\") {<br \/>\n          mylis[limyli].className = \"noclass\";<br \/>\n      } else if (mylis[limyli].className == \"iconlist\") {<br \/>\n          mylis[limyli].className += \" noclass\";<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n  <b>ul_li_noclass();  \/\/ Alternative to bullet ul\/li lists<\/b><br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n  checkMarginLeftImages();<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n}<br \/>\n<\/code><\/p>\n<p>&#8230; where, with last, if you have no Courses <b>&lt;body onload=&#8217; <\/b>   rptwo();  <b>ul_li_noclass();<\/b>   winit();  checkMarginLeftImages();<b>&#8216;&gt;<\/b> may suffice here.<\/p>\n<p>Another subject of interest for you that springs to mind are <a target=_blank title='Utf-8 information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/UTF-8'>unicode<\/a> (UTF-8) and <a target=_blank title='HTML Entities Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6311'>HTML Entities Primer Tutorial<\/a>, and we found the <a target=_blank title='HTML Entities' href='http:\/\/www.utf8-chartable.de\/unicode-utf8-table.pl?start=9728'>series of webpages<\/a> very useful for this tutorial.<\/p>\n<p>Our contextual help Javascript source code can be downloaded by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js------GETME' title='wajax.js'>wajax.js<\/a> which changed as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js------GETME' title='wajax.js'>wajax.js<\/a> for these modifications yesterday and today.<\/p>\n<p>Of great help with this tutorial was this <a target=_blank title='Great link' href='http:\/\/ryansechrest.com\/2012\/11\/change-your-list-bullet-to-a-custom-character-in-css\/'>great link<\/a> &#8230; thanks.<\/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='#d11421' onclick='var dv=document.getElementById(\"d11421\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11421' 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='#d11666' onclick='var dv=document.getElementById(\"d11666\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11666' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>WordPress Blog websites are often based on a theme and the theme used for this one is called Twenty Ten. The theme helps you out with PHP templates to give a great foundation for the styling of your website, with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-horizontal-rule-css-styling-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,281,327,438,439,576,932,997,1212,1319,1324,1325,1346,1407,1456],"class_list":["post-11666","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-css","tag-did-you-know","tag-firebug","tag-firefox","tag-html","tag-php","tag-programming","tag-styling","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-usability","tag-web-design","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11666"}],"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=11666"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11666\/revisions"}],"predecessor-version":[{"id":22131,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11666\/revisions\/22131"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=11666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=11666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=11666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}