make an eye-catching graphic cache description with html

[+Donutz90]

hello all i'm trying to create a description for a cache that has a nice graphical style. i usually just copy and slightly modify the code i see in other caches so i wanted to know if you know any other caches with nice descriptions or advice on where to find example of valid html code for this purpose, thanks!

[+K13]

What will your zippity-doo-dah graphics look like on my Garmin GPSr? Or on the apps?

 

 

[+niraD]

8 hours ago, Donutz90 said:

hello all i'm trying to create a description for a cache that has a nice graphical style. i usually just copy and slightly modify the code i see in other caches so i wanted to know if you know any other caches with nice descriptions or advice on where to find example of valid html code for this purpose, thanks!

1 hour ago, K13 said:

What will your zippity-doo-dah graphics look like on my Garmin GPSr? Or on the apps?

One approach that I've seen work well is to put the essential information in plain text at the beginning of the cache description, where it is accessible to everyone, and to put the fancier layout later, where it can be ignored when necessary.

 

One example of this was a series where the fancy layout included detailed information about the series and how to get the geocoin reward for completing the series. Geocachers trying to find the cache don't need the info in the fancy layout section, so if their devices show only the plain text at the beginning of the listing, that's fine.

[Blue Square Thing]

23 hours ago, Donutz90 said:

hello all i'm trying to create a description for a cache that has a nice graphical style. i usually just copy and slightly modify the code i see in other caches so i wanted to know if you know any other caches with nice descriptions or advice on where to find example of valid html code for this purpose, thanks!

 

It depends on what you mean by "eye catching" or "nice".

 

My favourite cache page is https://coord.info/GC5KKAH (now archived). The HTML is simple enough and the layout works for me - to the extent that I've used it as a way to create other cache pages.

 

You could easily figure out what the HTML does there and then use that knowledge to create your own pages.

 

Of course, you might want something fancier than that. I'm not sure why you would, but you might.

[+CAVinoGal]

On 2/24/2023 at 1:10 AM, Donutz90 said:

hello all i'm trying to create a description for a cache that has a nice graphical style. i usually just copy and slightly modify the code i see in other caches so i wanted to know if you know any other caches with nice descriptions or advice on where to find example of valid html code for this purpose, thanks!

 

As previously mentioned, "nice graphical style" and "nice descriptions" is very subjective.  Keeping things simple is usually better.  I like to use background images to enhance cache pages, but those don't come through on the app, only seen when viewing the cache page on the website.  Keeping the description as simple as possible seems to work best for me to keep the experience consistent across platforms and apps.

[+arisoft]

On 2/24/2023 at 11:10 AM, Donutz90 said:

where to find example of valid html code for this purpose

 

When you see a cache description you like, then you can look at the source code with your browser and copy the html code. You didn't specify what kind of visual elements you are looking for. Would you like to give some hints?

 

Geocache descriptions can use only limited html code. The most effective visual options are inline CSS attributes (style). You can use style for many different HTML elements like fonts. Here is an example: https://www.geocaching.com/geocache/GC3A38K_xliciivixxclvcilxiixxlxv

[+Donutz90]

12 hours ago, arisoft said:

 

When you see a cache description you like, then you can look at the source code with your browser and copy the html code. You didn't specify what kind of visual elements you are looking for. Would you like to give some hints?

yes this its nice.

 

and other like this: https://www.geocaching.com/geocache/GC6RRDM_milano-foro-bonaparte

 

there is no a site for some examples or generator with code and visual side by side?

 

[+arisoft]

11 hours ago, Donutz90 said:

there is no a site for some examples or generator with code and visual side by side?

 

Try this https://www.w3schools.com/

 

[+thebruce0]

Awww... I was going to show some tricks I used on an old event page I hosted, but I guess it hasn't been grandfathered in during all the changes to image hosting and maybe some html syntax. The description is broken and the listing can't be edited. d'oh! haha

[Blue Square Thing]

On 2/26/2023 at 8:13 AM, Donutz90 said:

yes this its nice.

 

and other like this: https://www.geocaching.com/geocache/GC6RRDM_milano-foro-bonaparte

 

there is no a site for some examples or generator with code and visual side by side?

 

 

I can't see that one because it's Premium Member Only. Is there a basic one that you could share that looks like the sort of thing you might want.

 

It's an interesting idea to have a side-by-side example set. In time I might be able to do something like that I suppose. Part of the issue is that GS could easily change what HTML/CSS elements are accepted - they seem to be allowing gaps in code just now (a good thing), which seemed to get stripped out in the past, for example.

[+Donutz90]

4 hours ago, Blue Square Thing said:

 

I can't see that one because it's Premium Member Only. Is there a basic one that you could share that looks like the sort of thing you might want.

 

It's an interesting idea to have a side-by-side example set. In time I might be able to do something like that I suppose. Part of the issue is that GS could easily change what HTML/CSS elements are accepted - they seem to be allowing gaps in code just now (a good thing), which seemed to get stripped out in the past, for example.

https://www.geocaching.com/geocache/GC8TCC9

tthis

[+niraD]

52 minutes ago, Donutz90 said:

https://www.geocaching.com/geocache/GC8TCC9

tthis

It would be better if the "La cache" section were moved to the top and displayed without the fancy formatting, before the other content displayed with the fancy formatting.

[Blue Square Thing]

17 hours ago, Donutz90 said:

https://www.geocaching.com/geocache/GC8TCC9

tthis

OK, so this is a set of four <div> tags - divisions - with three of them placed inside the others. The code which sets up each div tag (using CSS) is quite complex - probably more complex than it needs to be - the user must have used a combination of tools looking at the way some of the CSS is formed.

 

Essentially what you have is:

div to set up the big black box, inside of which is:

• div with the image of the cache owner inside it
• div with the Italian flag inside it
• div with the main bit of the description, including the main image inside it (these three could easily have been combined inside one div)
• div with the La Cache bit inside it - this needs a div due to the border
• a horizontal rule tag (<hr>, although <hr /> would be better...)
• div for the flag counter

and then the original div is closed - this makes sure everything inside it takes the same style and is inside the big black box

 

The code for the big black box div is:

Quote

<div style="padding:1em;margin-bottom:1em;font-size:14px;color:#CCCCCC;font-family:Trebuchet MS,sans-serif;text-align:justify;border:solid 2px #333333;border-radius:2em;-moz-border-radius:2em;box-shadow:1em 1em 1em #999999;-webkit-box-shadow:1em 1em 1em #999999;background-color:#000000;">

 

...much later it's closed with
</div>

 

Much of the harder parts of this could be stripped out straight away to leave:

Quote

<div style="padding:1em; font-size:14px; color:#CCCCCC; font-family:Trebuchet MS, sans-serif; text-align:justify; border:solid 2px #333333; border-radius:2em; background-color:#000000;">

 

• padding is the space around the side of the div - it means the text doesn't go too close to the edge of the box. 1em is the width of the letter m in the font chosen and is a standard sort of way to space things (it comes from the way printers worked). You can vary this: 2em is more, 0.25em is less.
• font-size, color and font-family all relate to the font. I think the font family code is redundant - GS makes good choices with regard to fonts - and bear in mind that many devices won't necessarily have the font you specify (the sans-serif part is a fall back font if I don't have Trebuchet MS installed). In this case we're setting the size to 14 pixels (I'd have used 1.2em here as it's more flexible) and the color (note American spelling) to #cccccc - which is a nearly but not quite white sort of grey.
• I changed text-align: justify - which is a bad idea in cache descriptions - to text-align: center because the cache description then goes on and uses text-align: center in each paragraph underneath. You could just set it once here (I would rarely center text anyway, let alone a large block like this);
• the border bit sets a solid, 2 pixel wide border of color #333333 (dark grey) around the black box. If you squint you can sort of see it. This is pretty much unnecessary
• border-radius: 2em then sets the curved borders. To my eye this is too much - I tend to use between 2 and 15 pixels for border radius
• background-color is then set to #000000 - black

 

You could simplify this code again to:

Quote

<div style="padding:1em; color:#CCCCCC; text-align:center; border-radius:15px; background-color:#000000;">

 

That would work just as well I think.

 

The only other div which does anything interesting - other than centre stuff - is the box at the bottom. The code there is:

Quote

<div style="font-size:12px; margin:1.5em 0; padding:1.5em; border:solid 1px #000000; border-radius:2em; border-color:#FFF;">
<p align="center"><strong><font color="#FFFFFF">La cache</font></strong></p>
<p align="center">Semplice cache contentente il solo logbook.<br>
<br>
Il titolo è per via di alcuni grossi vasi posizionato nel cortile della fabbrica antistante.</p>
</div>

 

This does similar things - the margin adds a gap before and after the div - the 1.5em adds at the top and bottom and the 0 doesn't add anything on the left/right (this is now getting slightly complex so it might be better to read up on the CSS documentation if you intend to do this sort of thing). This time we have a smaller font (why?), padding again, and a white, thinner border (#fff - which means the same as #ffffff). The border-color tag overwrites the #000000 which is setting the border color to be black. The paragraphs are then a bit of a mess and do all sorts of unnecessary stuff.

 

I'd re-write this whole section with:

Quote

<div style= margin-bottom: 1.5em; padding: 1.5em; border: solid 1px #fff; border-radius: 15px;>
<p><strong>La cache</strong></p>
<p>Semplice cache contentente il solo logbook.</p>
<p>Il titolo è per via di alcuni grossi vasi posizionato nel cortile della fabbrica antistante.</p>
</div>

 

This assume you set text-align to center in the big black box div. The margin at the bottom is needed because there's no content before the <hr /> tag which sets a line across the page.

 

Is it eye-catching? Maybe. Personally I prefer black text on a white background and then using colour and bold to highlight specific sections, (along with boxes like the last one) but that's my preference.

[Fledermaus]

On 2/24/2023 at 1:10 AM, Donutz90 said:

hello all i'm trying to create a description for a cache that has a nice graphical style. i usually just copy and slightly modify the code i see in other caches so i wanted to know if you know any other caches with nice descriptions or advice on where to find example of valid html code for this purpose, thanks!

Perhaps one of the following links may be helpful.

 

https://www.geocaching.com/geocache/GC9TBMY_enigma-kriegsmarine-m4

 

https://www.geocaching.com/geocache/GCA0CHE_the-enchanted-forest

 

https://www.geocaching.com/geocache/GC8BDNN_seafood-jigsaw-puzzle

 

https://www.geocaching.com/geocache/GC68Y9E_schold-farm-fluxus-quipu

 

/\/(*w*)\/\ - "When all else fails, RTFM"

[Fledermaus]

On 2/26/2023 at 12:13 AM, Donutz90 said:

yes this its nice.

 

and other like this: https://www.geocaching.com/geocache/GC6RRDM_milano-foro-bonaparte

 

there is no a site for some examples or generator with code and visual side by side?

 

Visit this website for everything you want to know about HTML & CSS coding of web pages and geocache descriptions:

https://www.w3schools.com/

 

You will also need software that is is specifically designed to write, edit and validation your coding. I suggest you locate and download the FREE program entitle: CSS HTML Validator Lite (any version of v16 or later) from the following website:

https://www.freehtmlvalidator.com/

 

You may also use an Online validator at:

https://validator.w3.org/

 

P.S. With the above said validator program, you may run multiple files side by side within the same instance or even run multiple instances. I have had the occasion to run as many as 10 files at the same time and edit stuff from one file to another.

 

/\/(*w*)\/\ - When all else fails, RTFM"!

 

Edited March 28, 2023 by Fledermaus

[+Calypso62]

I just use an online HTML editor. Write what you want. Add colour to text if desired. Add images (there's a bit of a process for that but it's not arduous.) Press the Source button and up comes the code. Copy and paste the HTML code into the description box on the cache editing page. Works for me.

https://www.html.am/html-editors/online-html-editor.cfm