WordPress Bullet Point CSS Styling Emoji Tutorial

Wordpress Bullet Point CSS Styling Emoji Tutorial

We’re revisiting WordPress Bullet Point CSS Styling Primer Tutorial as shown below, today. 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’t mean you have to stop there. Today the styling area of interest we are revisiting is to do with bullet point lists which we add some non-default styling to via …

• CSS styling to HTML ul (parent) li (child) (bullet point) arrangements that have no pre-existing styling, involving style parameters …
• content: [unicode] /0000a0;
• list-style: none;

… and this time we are making use of a great resource for Emoji unicode characters, and others of a similar ilk, at the excellent link here … thanks for this information. It brightens up the website, and we believe it can facilitate learning to have a bright presentation.

So we change the usual (WordPress blog PHP) suspect … header.php … to have …

$wsarray = array("", "01F311", "0026F3", "0026BD", "00263C", "00263D", "00263E", "01F311", "0026F3", "0026BD", "0026f5", "xF0x9Fx91xA0", "xF0x9Fx91x93", "xF0x9Fx90x98", "xF0x9Fx90x92", "xF0x9Fx8Ex89", "xF0x9Fx8DxB0", "xF0x9Fx8DxA9", "xF0x9Fx8DxA8", "xF0x9Fx8DxA7", "xF0x9Fx8DxA3", "xF0x9Fx8DxB1", "xF0x9Fx8Ex88", "xF0x9Fx8ExA7", "xF0x9Fx8ExA8", "xF0x9Fx8ExB5", "xF0x9Fx8Fx88", "xF0x9Fx90x99", "xF0x9Fx90x9E", "xF0x9Fx90xB6", "xF0x9Fx90xBC", "xF0x9Fx90xBE", "xF0x9Fx93x8A", "xF0x9Fx93xA2", "xF0x9Fx91xBC", "xF0x9Fx90xAB", "xF0x9Fx90xA8", "xF0x9Fx90x97", "xF0x9Fx8Fx80", "xF0x9Fx8ExB7", "xF0x9Fx8ExA9", "xF0x9Fx8DxAE", "xF0x9Fx8Dx92", "xF0x9Fx8Fx80", "xF0x9Fx8Cx88", "xF0x9Fx9AxB2", "xF0x9Fx9AxA2", "xF0x9Fx9Ax99", "xF0x9Fx9Ax87", "xF0x9Fx9Ax8F", "xF0x9Fx9AxA7", "xF0x9Fx9AxAA", "xF0x9Fx9Ax83", "xF0x9Fx9Ax87", "xF0x9Fx98x81", "xF0x9Fx98x82", "xF0x9Fx98xB8", "xF0x9Fx9Ax92", "xF0x9Fx9Ax87", "xF0x9Fx9Bx80", "xF0x9Fx8CxB4", "xF0x9Fx8CxB5", "xF0x9Fx8CxB7", "xF0x9Fx8Cx9F", "xF0x9Fx8CxBD", "xF0x9Fx8CxBE", "xF0x9Fx8Dx84", "xF0x9Fx8DxB7", "xF0x9Fx8Dx8F", "xF0x9Fx8Dx9F", "xF0x9Fx8DxB5", "xF0x9Fx8Cx89", "xF0x9Fx8Cx8A", "xF0x9Fx8Cx8B", "xF0x9Fx8Cx87", "xF0x9Fx8Cx86", "xF0x9Fx8Cx81", "xF0x9Fx8Cx82", "xF0x9Fx8Cx82", "xF0x9Fx8Cx83", "xF0x9Fx8Cx84", "xE2x9BxAA", "xE2x9BxB2", "xE2x9BxBA", "xE2x9Bx83", "xF0x9Fx9Ax80", "xF0x9Fx97xBB", "xF0x9Fx97xBC", "xF0x9Fx97xBD", "xF0x9Fx97xBF", "xF0x9Fx90xA7", "xF0x9Fx99x8B", "xF0x9Fx99x88", "xF0x9Fx99x89", "xF0x9Fx99x8C", "xF0x9Fx98x96"); $ws = rand(0, (sizeof($wsarray) - 1));

… rather than (what we had below with) …

$ws = rand(0, 10); $wsarray = array("", "01F311", "0026F3", "0026BD", "00263C", "00263D", "00263E", "01F311", "0026F3", "0026BD", "0026f5");

Enjoy today’s tutorial.

---

Previous relevant WordPress Bullet Point CSS Styling Primer Tutorial is shown below.



Wordpress Bullet Point CSS Styling Primer Tutorial

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’t mean you have to stop there.

Today we address the bullet point lists which we add some non-default styling to via …

• CSS styling to HTML ul (parent) li (child) (bullet point) arrangements that have no pre-existing styling, involving style parameters …
• content: [unicode] /0000a0;
• list-style: none;
• 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

Think it is good to draw attention to bullet point lists because they represent an orderly approach to the blog post’s topic area that many users trying to figure things out would often appreciate, and hone in on.

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 …


<style>
.
.
.

<?php
$ws = rand(0, 10);
$wsarray = array("", "01F311", "0026F3", "0026BD", "00263C", "00263D", "00263E", "01F311", "0026F3", "0026BD", "0026f5");
$cs = rand(0, 10);
$csarray = array("black", "red", "blue", "purple", "maroon", "teal", "brown", "orange", "olive", "lime", "green");
if ($wsarray[$ws] != "") {
echo "
ul.noclass {
list-style: none;
}
ul.noclass li:before {
list-style: none;
float: left;
margin-left: -15px;
color: " . $csarray[$cs] . ";
content: '\" . $wsarray[$ws] . " \0000a0';
font-size: 1.2em;
font-weight: bold;
}
ul.noclass li:after {
list-style: none;
color: " . $csarray[$cs] . ";
content: no-close-quote;
font-size: 1.2em;
font-weight: bold;
}
";
}
?>

.
.
.
</style>




function ul_li_noclass() {
var limyli;
var mylis=document.getElementsByTagName("ul");
if (mylis.length > 0) {
for (limyli=1; limyli<mylis.length; limyli++) {
if (mylis[limyli].className == "") {
mylis[limyli].className = "noclass";
} else if (mylis[limyli].className == "iconlist") {
mylis[limyli].className += " noclass";
}
}
}
}

function courseCookies() {
rptwo(); // Recent Post images
ul_li_noclass(); // Alternative to bullet ul/li lists

winit(); // Ajax functionality 26/11/2014 ... slow hover ... not for mobile
checkMarginLeftImages();
.
.
.
}


… where, with last, if you have no Courses <body onload=’ rptwo(); ul_li_noclass(); winit(); checkMarginLeftImages();‘> may suffice here.

Another subject of interest for you that springs to mind are unicode (UTF-8) and HTML Entities Primer Tutorial, and we found the series of webpages very useful for this tutorial.

Our contextual help Javascript source code can be downloaded by wajax.js which changed as per wajax.js for these modifications yesterday and today.

Of great help with this tutorial was this great link … thanks.

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.