/* C:\Users\TBoyd\Documents\MyWeb-tkb\Drafts\SG\css\Po_snImages-WpFlagB.css THIS IS GETTING CLOSER TO OKAY, but us still terribly "tangled", and "summary" incomplete. It is intended that this will replace Po_snImages-WpFlag.css (the version of this with almost same name, just no "B"), as and when I can change calls. (Change calls sg_-19216.css to at same time. Again, just add a B.) One "not backward compatable" factor: Before the B versions, the Wikipedia link tweaker was present both of them. Now only this has it. (One of two mentions.) Version: 27 May 20 Work of 26 May 20, MyCovidDay 68!, was extensive and a great leap forward from what I had previously. Started: ("B" version: 26 May 2016 Feb 19, which was only a slight evolution of Po_snImages-WpFlag.css, which began Mar 18 To validate: put this in a page, then run http://jigsaw.w3.org/css-validator on that page. This CSS written for CSS3. N.B. : A global alteration of all classes of the img tag is problematic, and should be kept to a minimum. See notes in sg_-19216B.css === Summary of what it provides, and their requirements... 1) Wikipedia link tweaker. It requires: A file, "Icon_External_WPLink.png" in the domain's root folder. If you provide that, the CSS here... Puts the graphic after any URL with "wikipedia" in it. (Thst is case sensitive, by the way.) Note, until Po_snImages-WpFlagB.css/sg_-19216B.css, this was ALSO provided for in sg_-19216(NO B).css. (Second of two mentions.) (For the future? Maybe, redefine the Wikipedia link handler? So that things can be color tweaked for their environment? (Not "important") --- 2) Provides img classes tkbR, tkbL, tkbC. They will put images on a page at right, left and centered. For them the stylesheet sets: img border-style:none; img border-width:1px; img min-width:150px; img max-width:1200px; Margins (the bits outside the "border") are set for each class separately. They will be the color of the background of the parent element. As usual,inside them is a border, and inside THAT, padding. None of which are counted as part of the element's "width". Example of how to use of one of the classes: ((qzAlt text for image)) (Case-by-case redefinition of min-width, max-width, using inline CSS, will often be a good idea.) -- For a brief time, I made refinements to the img tag GENERALLY, but that led to problems with Google and validator buttons (including those injected by hhtop.htm, hhbottom.htm). A global alteration of all classes of the img tag is problematic, and should be kept to a minimum. See notes in sg_-19216B.css That looked like... img {min-width:150px;} I've now backed off from messing with the properties of the img tag generally.) --- For use illustration of how it is used, see... http://sheepdogguides.com/hh/html-css/TestStyleSheet.htm --- See... https:bit.ly/CssBoxesInBoxes for many general points about relevant issues. (http://sheepdogguides.com/hh/html-css/BoxesInBoxes.htm) ================================ Building the classes.... - - - - ========= Wikipedia link flag... This, BEFORE the "B" versions", WAS also present in sg_-19216.css. Now only available here. Po_snImages-WpFlag.css (this file's pre-cursor) is where it was first used, was my first use of this trick. First use was sometime before 22 May 2018. The domain's root folder needs to have copy of the Icon_External_WPLink.png file. Sub-folders won't need copies. My thanks to https://lefkomedia.com/adding-external-link-indicator-with-css/ and https://stackoverflow.com/questions/26898931/is-it-possible-to-style-external-html-links-differently-to-relative-links-us for... For this, where we use "conditional CSS selectors". Make a note in some "general guide to CSS": If you do a newline after the colon, you break the following. Also: You MUST use dbl BACK slashes here to say "root of domain". FORWARD SLASH WON'T WORK.*/ a[href*="wikipedia"]:after {content:url(\\Icon_External_WPLink.png);} /*===================== Refinements to img tag... (//Also// mention the following in some "general guide to CSS".. but leave here as well...) First set default border-style for all imgs... Style must set to SOMETHING, or no other border attribute will be applied. A width setting is irrelevant while style is "none", but setting WIDTH here saves doing it (on pages that use this file) which override the default STYLE. For the moment (5/20) I am NOT going to use ANY tweaks to all img tags. I will put what I feel necessary in each class, as it arises. TRIPLE CEHCK NO GLOBAL TWEAKS CREPT IN! The min-width of the img tag GENERALLY must be kept small for Google and validator buttons, until way to override inside of "injected" htlp, e.g. hhtop, hhbottom, found.*/ /*Classes to put images at left or right...*/ /*Set common values...*/ img.tkbR,.tkbL,.tkbC { border-style:none;border-width:1px; min-width:150px;max-width:1200px; margin-top:3px; margin-bottom:6px; padding:4px;} /*Then refine, with specifics. ORDER of the lines is IN REVERSE //ON PURPOSE//... so same numbers on equiv lines*/ img.tkbR {float:right;margin-right:4%; margin-left:2%;} img.tkbL {float:left;margin-left:4%; margin-right:2%;} /*Class to center an image. Thank you... https://www.w3schools.com/howto/howto_css_image_center.asp for this. Or was it... https://www.w3.org/Style/Examples/007/center.en.html#block ? */ img.tkbC { display: block; margin-left: auto;margin-right: auto; margin-top:2px;margin-bottom:5px;}