Forum:Color of hiero

How do I change the foreground and background color of hieroglyphics? the code looks like this Pr to go forth
 * Hr face


 * Wth flight


 * Pi-hiharoth" to go forth abroad, to face flight
 * in Egyptian Pi-hahiroth is transliterated Pr Hr wth


 * To go forth, to face flight, fleeing abroad
 * To go forth, to face flight, fleeing abroad

and the result looks like:
 * Pr to go forth
 * Hr face


 * Wth flight


 * Pi-hiharoth" to go forth abroad, to face flight
 * in Egyptian Pi-hahiroth is transliterated Pr Hr wth


 * To go forth, to face flight, fleeing abroad
 * To go forth, to face flight, fleeing abroad

Granpa 08:29, August 25, 2010 (UTC)

I already tried Granpa 09:01, August 25, 2010 (UTC)
 * You can't change the color (without HTML5), they are images. -- 11:47, August 25, 2010 (UTC)


 * You can change the color of images with CSS for Internet Explorer, but it won't work in other browsers. See http://www.fred.net/dhark/demos/css/css_filter_examples.html for examples.
 * Another possibility is to use Javascript to do this; see e.g. http://www.nihilogic.dk/labs/imagefx/ . -- ◄mendel► 13:23, August 25, 2010 (UTC)
 * Yeah, I should've said you can't do it reliably without HTML5. -- 13:37, August 25, 2010 (UTC)


 * Bummer. Ok, if I cant change the color then can I at least add a border to it. Without a border the first hieroglyphic on this page is completely unreadable in my browser. Granpa 16:49, August 25, 2010 (UTC)
 * .mw-hierotable > tbody > tr > td { border:1px solid green; }
 * Is that what you want? -- ◄mendel► 17:42, August 25, 2010 (UTC)


 * Yes. Half of it anyway. I also had to set the background color. Now it works fine. Thank you. I could never have figured it out myself. Even knowing the answer it still doest make much sense to me. Granpa 21:27, August 25, 2010 (UTC)


 * Well, the meaning is this: the hieroglyphs are rendered with nested tables: there's a table for the whole tag, and then there's a table for each glyph nested inside that. The outer table has class="mw-hierotable". I can see that by looking at the html source of the rendered page.
 * The css references the outer table tag class with .mw-hierotable ; then it looks inside teh table to find a tbody tag nested directly within ( ">" means "direct descendant" in html terms); this tbody doesn't actually appear in the page source, but the browser inserts it because it is part of the standard. Inside the tbody, grab the next row and then the next cell, which is the one with all the individual glyph tables in it. It has to be the very next tbody/tr/td, because otherwise the .css would match the inner glyph tables as well.
 * For some strange reason that I haven't figured out myself, the table cell is actually bigger than the table itself. I think that this might be because the table is set to be displayed inline, and the images overflow it. -- ◄mendel► 22:12, August 25, 2010 (UTC)