{"id":11421,"date":"2015-01-04T05:03:06","date_gmt":"2015-01-03T18:03:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11421"},"modified":"2016-05-22T11:25:13","modified_gmt":"2016-05-22T01:25:13","slug":"wordpress-bullet-point-css-styling-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bullet-point-css-styling-primer-tutorial\/","title":{"rendered":"WordPress Bullet Point CSS Styling Primer Tutorial"},"content":{"rendered":"<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","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-bullet-point-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":[171,281,576,577,997,1319,1325,1333,1352,1456],"class_list":["post-11421","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-bullet-points","tag-css","tag-html","tag-html-entities","tag-programming","tag-tutorial","tag-twentyten-theme","tag-unicode","tag-utf-8","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11421"}],"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=11421"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11421\/revisions"}],"predecessor-version":[{"id":22132,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11421\/revisions\/22132"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=11421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=11421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=11421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}