{"id":60128,"date":"2023-07-17T03:01:52","date_gmt":"2023-07-16T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60128"},"modified":"2023-07-16T14:06:26","modified_gmt":"2023-07-16T04:06:26","slug":"wordpress-list-style-image-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-image-primer-tutorial\/","title":{"rendered":"WordPress List Style Image Primer Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress List Style Image Primer Tutorial<\/p><\/div>\n

Think it might be part of “the human tha<\/strike>ing” to “make associations” or “link things”. As such, our “link” to yesterday’s Cut to the Chase of Blog Posting Mobile Events Tutorial<\/a> is WordPress blog TwentyTen them’s header.php “thinking”, but quite a different topic, in that today’s “first draft” and “terribly user unfriendly” work today revolves around CSS styling and aesthetics, rather than the event logic discussed yesterday.<\/p>\n

In the past we’ve allowed the styling of …<\/p>\n


\nul li
\n<\/code><\/p>\n

… ie. “ul” element begets “li” element bullet point “looks” be user controllable … in terms of emoji usage. Well, today, we add onto that possibility, the possibility to use an image rather than an emoji, though you could hardly call our “first draft” of this in any way easily “user controllable” (but appending to a WordPress blog URL ?listimage=[someImageURL] …<\/p>\n

<?php echo ”
\n
\nfunction list_style_image_check() {
\n var listimage=location.search.split('listimage=')[1] ? decodeURIComponent(location.search.split('listimage=')[1].split('&')[0]) : \"\";
\n if (listimage != '') {
\n document.body.innerHTML+=\"<style> ul li::before { content: ''; display: inline-block; height: 25px; width: 35px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -35px; } <\/style>\";
\n }
\n}
\n<\/code>
\n“; ?><\/p>\n

… is the “behind the scenes approach” called at the document.body onload event header.php is privy to)<\/font>. We thank this enormously useful website<\/a> for great advice here, and in days to come we improve on that “user unfriendliness”.<\/p>\n

\n

\n

Previous relevant Cut to the Chase of Blog Posting Mobile Events Tutorial<\/a> is shown below.<\/p>\n

\"Cut<\/a>

Cut to the Chase of Blog Posting Mobile Events Tutorial<\/p><\/div>\n

On the way to you reading this blog posting there have been numerous intervention points for us, as overseeing programmers …<\/p>\n