{"id":47174,"date":"2019-11-16T03:32:50","date_gmt":"2019-11-15T17:32:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47174"},"modified":"2019-11-17T16:28:43","modified_gmt":"2019-11-17T06:28:43","slug":"wordpress-bold-within-code-styling-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bold-within-code-styling-primer-tutorial\/","title":{"rendered":"WordPress Bold Within Code Styling Primer Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Bold Within Code Styling Primer Tutorial<\/p><\/div>\n

Can’t remember when it happened, but the HTML <b> bold text<\/b> <\/b> is under threat of deprecation, and this has affected how it no longer “packs a punch”, in WordPress blog styling, within a <code> code tag text<\/code> <\/code> as it used to.<\/p>\n

This has been annoying news for us trying to link a concept with a code snippet. But all is not lost, as we can try flagging the link in another way, independent of text line thickness (by the way, the <strong> <\/strong> HTML is an alternative to <b> <\/b>, here). We read about the concept of Text Gradient at this useful link<\/a>, thanks, and applied it to our WordPress TwentyTen themed header.php file as per<\/b> the CSS (code) snippet (within the PHP) …<\/p>\n


\n<style>
\n\/* Thanks to https:\/\/cssgradient.io\/blog\/css-gradient-text\/ below *\/
\n
\nb:not(.dyk) { <\/b>
\n background: -webkit-linear-gradient(#eee, #333);<\/b>
\n -webkit-background-clip: text;<\/b>
\n -webkit-text-fill-color: transparent;<\/b>
\n}<\/b>
\ncode b { <\/b>
\n background: -webkit-linear-gradient(#eee, #333);<\/b>
\n -webkit-background-clip: text;<\/b>
\n -webkit-text-fill-color: transparent;<\/b>
\n}<\/b>
\n<\/style>
\n<\/code><\/p>\n

… the result of the deployment of which shows you this very affect, to look above (as our golden retriever, Nala, is apt to do …
\n<\/img>
\n)<\/font>.<\/p>\n

Notice the use of a CSS Combinator<\/a> “code b” (ie. the “descendant selector”, specifically “Selects all <b> elements inside <code> elements”)
\n …<\/p>\n

\nA CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
\n
\nThere are four different combinators in CSS:
\n
\ndescendant selector (space)
\nchild selector (>)
\nadjacent sibling selector (+)
\ngeneral sibling selector (~)\n<\/p><\/blockquote>\n

… CSS Selector above, as a tool for that more forensic CSS styling on your webpages!<\/p>\n

Stop Press<\/i><\/b><\/p>\n

We found with mobile platforms, that within code elements, when a bold (ie. b element tag) had multiple lines to it, the CSS above caused it to only show the first line, so in TwentyTen theme’s header.php we had to add onload=” lookforbincode(); ” code as per …<\/p>\n


\nfunction lookforbincode() {
\n var cdsis, bsis, icdsa, jcdsa, xbsis, repwith='', kdsis, vparts;
\nif (navigator.userAgent.match(\/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device
\n cdsis=document.getElementsByTagName('code');
\n for (icdsa=0; icdsa<cdsis.length; icdsa++) {
\n bsis=cdsis[icdsa].innerHTML.split('<\/b>');
\n for (jcdsa=0; jcdsa<eval(-1 + bsis.length); jcdsa++) {
\n vparts=bsis[jcdsa].split('<b>');
\n if (vparts[eval(-1 + vparts.length)].indexOf(String.fromCharCode(10)) != -1) {
\n xbsis=vparts[eval(-1 + vparts.length)].split(String.fromCharCode(10));
\n repwith=\"\";
\n if (xbsis.length > 2) {
\n for (kdsis=0; kdsis<xbsis.length; kdsis++) {
\n repwith+=xbsis[kdsis] + '<\/b>' + String.fromCharCode(10) + '<b>';
\n }
\n if (repwith != '') {
\n \/\/cdsis[icdsa].innerHTML=cdsis[icdsa].innerHTML.replace('<b>' + vparts[eval(-1 + vparts.length)] + '<\/b>', '<b>' + repwith + '<\/b>');
\n \/\/if (cdsis[icdsa].innerHTML.indexOf('<b>' + vparts[eval(-1 + vparts.length)] + '<\/b>') != -1) { alert(repwith); } else { alert('0:' + repwith); }
\n cdsis[icdsa].innerHTML=cdsis[icdsa].innerHTML.replace('<b>' + vparts[eval(-1 + vparts.length)] + '<\/b>', '<strong>' + vparts[eval(-1 + vparts.length)] + '<\/strong>');
\n }
\n }
\n }
\n }
\n }
\n}
\n}
\n<\/code><\/p>\n

… changing b tags into strong tags in this mobile platform “b within code” scenario.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n