+EJKPBR Posted March 11, 2017 Share Posted March 11, 2017 (edited) I'm trying to make my cache page stand out by using color. When I import the html into the cache page and then view the cache, the background color is just white. Everything else remains formatted correctly. Including the proper color of text. Will this be fixed once the cache is published? or do I need to learn a different method of html? Edited March 11, 2017 by EJKPBR Quote Link to comment
+EJKPBR Posted March 12, 2017 Author Share Posted March 12, 2017 This is the html code i'm using: <body bgcolor="#484329" lang=EN-US link=blue vlink=purple> <div class=WordSection1> <p class=MsoNormal align=center style='text-align:center'><img width=627 height=327 id="Picture 7" src="https://img.geocaching.com/cache/large/2b096bbf-1a5c-4092-a494-09e68238617a.jpg"></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:22.0pt;line-height:115%;color:#B9CDE5'>Welcome to the Happy Trails</span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:14.0pt;line-height:115%;color:#B9CDE5'>The Smiley Face Geo-Art located SE of Sioux Falls SD, in the NW corner of Iowa near Larchwood, Alvord, Lester, Inwood and Rock Rapids IA</span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:12.0pt;line-height:115%;color:#B9CDE5'>This trail consists of 101 Mystery/Puzzle caches in a 60 sq. mile radius & a bonus Multi-Cache/Field Puzzle that you will earn the coordinates to by finding 3 specially marked caches along the trail. (You will need to collect the partial coordinates from all 3 marked caches to get to Stage 1 of the bonus cache)</span></p> <p class=MsoNormal align=center style='text-align:center'><img width=606 height=27 src="https://img.geocaching.com/cache/large/9b37acfd-7aa0-4254-954e-3ff37b65c816.jpg"><span style='font-size:12.0pt;line-height:115%;color:#B9CDE5'> </span></p> <br clear=ALL> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:12.0pt;line-height:115%;color:#8EB4E3'>Some of the solutions to these caches will just be hidden coordinates in text that matches the background. Like the solution to this 1<sup>st</sup> cache whose solution is in the text on the line below.</span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:12.0pt;line-height:115%;color:#B9CDE5'> </span><span style='font-size:18.0pt;line-height:115%;font-family:"Arial Narrow","sans-serif"; color:#4A452A'>N 43° 26.858 W 096° 23.364</span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:18.0pt;line-height:115%;font-family:"Arial Narrow","sans-serif"; color:red'><img width=624 height=77 id="Picture 6" src="Welcome%20to%20the%20Happy%20Trails_files/image003.jpg"></span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:12.0pt;line-height:115%;color:#8EB4E3'>Some of the solutions will be found by solving a puzzle or answering a question.</span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:12.0pt;line-height:115%;color:#8EB4E3'>Have fun and cache on!!!!!</span></p> </div> </body> Quote Link to comment
+niraD Posted March 12, 2017 Share Posted March 12, 2017 My guess is that you can't specify the color for the entire page, because that would break the content that you didn't provide. You could try specifying both the background color and the font color in the DIV element that surrounds the content that you do provide. Quote Link to comment
+EJKPBR Posted March 12, 2017 Author Share Posted March 12, 2017 (edited) I found the solution on my own...(highlighted in red font) <div class="WordSection1" style="background-color:#484329;"> <p class="MsoNormal" align="center" style="text-align:center;"><img width="627" height="327" src="https://img.geocaching.com/cache/large/2b096bbf-1a5c-4092-a494-09e68238617a.jpg" name="Picture 7" /></p> <p class="MsoNormal" etc...etc....etc.....etc...... At least it works in Chrome. Not on Android in c:geo Edited March 12, 2017 by EJKPBR Quote Link to comment
Blue Square Thing Posted March 12, 2017 Share Posted March 12, 2017 I found the solution on my own...(highlighted in red font) <div class="WordSection1" style="background-color:#484329;"> <p class="MsoNormal" align="center" style="text-align:center;"><img width="627" height="327" src="https://img.geocaching.com/cache/large/2b096bbf-1a5c-4092-a494-09e68238617a.jpg" name="Picture 7" /></p> <p class="MsoNormal" etc...etc....etc.....etc...... At least it works in Chrome. Not on Android in c:geo I'd be surprised if anything much worked in an app in terms of formatting. The app will present the text in the most appropriate way for the app's interface - the html will work in a web browser pretty much I should imagine, unless of course a user goes into accessibility mode or uses their own stylesheet. Fwiw from an *accessibility pov*, black on white is easily the easiest text to read for the majority of users (and those for whom it's not will probably be using some way of adapting the colours anyway). By shifting colours to do anything other than create emphasis to a word or two you're really screwing with accessibility for users. Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.