Tutorial Chapter 5

From TCki

Jump to: navigation, search

Contents

[edit]

Using the TerraCaching.com website

This section of the tutorial shows you how to use the many features of the TerraCaching website.


[edit]

Showing Stats Banner(s) in Your Forum Signature

[edit]

Get your TerraCaching stats banner text

  1. From the "TerraCentral" left column under "My Stats", click "Get Your Stats Banner!"
  2. Copy the text in the "BB Code" box. (customizing your banner on the page below is optional)
    example: 
[URL=http://www.terracaching.com/profile.cgi?ID=xxxx][IMG]http://www.terracaching.com/statsban/1234.gif[/IMG][/URL]
3. Paste this text into any text editor if you wish to modify or add to it (see below).


[edit]

Get your Geocaching.com stats banner text (optional)

  1. On the geocaching.com homepage left column, click "My Account".
  2. On the right column under "Account Options", click "view my stats bar"
  3. Copy the text provided in the box.
    example: 
<a href="http://www.geocaching.com/profile/?guid=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" target="_blank">

<img src="http://img.geocaching.com/stats/img.aspx?txt=Let's+go+geocaching&uid=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&bg=1" border="0" title="Profile for username" alt="Profile for username"></a>

4. Paste this text into your text editor too.


[edit]

Get any other stats banner text that you want. (optional)

  1. Get navicache.com banner or other text/links, and paste it into your text editor.


[edit]

Editing the text

  1. To work in your TerraCaching.com signature, the text must be:
  • In BB Code with square brackets [ ]. (Not html with angle brackets < >)
  • No longer than 255 characters. (it helps if your text editor can count characters for you.)
2. To include more than one stats banner in your signature, you will probably have to remove unnecessary text, including the links to your profile page.
3. Example of Terracaching.com and geocaching.com stats banner in one signature: 
[IMG]http://www.terracaching.com/statsban/xxxx.gif[/IMG]

[IMG]http://img.geocaching.com/stats/img.aspx?txt=Let's+go+geocaching&uid=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&bg=1[/img]

4. Don't include any line-breaks (return key) characters if you want your banners to be side by side.
(put it all on one looooooooooooooooooooooong line)


[edit]

Shortening URLs (Optional)

  1. If you want to include more text than will fit in your signature
    (255 characters) you can shorten these long URLs (web addresses)
    by using a neat website called www.tinyurl.com.


[edit]

Paste text into your profile

  1. On the menu bar, click Tools | Edit Profile
  2. Scroll down to the "Signature" box and paste the text here.
  3. Click the "Submit" button.



[edit]

Using HTML to Beautify Your Cache Lisings

The subject of html in general is beyond the scope of this TCki entry, and is thoroughly covered elsewhere on the web. To learn basic html, just do a web search for "html tutorial". There are some handy tricks that can be listed here to help you make your pages more nicely formatted. This includes adding background color or background images, centering the entire listing and controlling how wide it will be, adding a frame or borders around sections, etc.

Simply put, html is the code (you've almost certainly seen before) that uses tags inside of angle brackets < > to tell the computer how to format the page. It should not be confused with BB Code, which uses straight brackets [ ]. To use html in your listings, you must be a premium member.

[edit]

Centering

One of the easiest things you can do is to center parts of your listing: 

<center>This Text Will Be Centered</center>

Most html tags have an opening and a closing tag.
The closing tag has a slash at the beginning, as shown in this example.


[edit]

New Lines

One thing you will notice immediately when you add html tags to your cache page, is that all the text you type suddenly ends up in one big ugly paragraph. This is because html ignores the new-lines that you enter by pushing the enter or return key. You have to tell it where you want a new line to start, using the <br> tag, like this: 

This is my first line of text.<br>This is my second line of text.<br><br>This is my third line of text.

Note: The <br> tag is one of the only tags that does not requre a closing tag with the slash (</br>)

This will appear like this: 

This is my first line of text.
This is my second line of text.

This is my third line of text.

Note the extra blank line between the second and third line of text.

[edit]

Changing the Background Color of Your Page

You have control over part, but not all if the listing page. The header and footer of the page are areas controlled by the standard formatting of the web site. Unfortunately, the background color of the page is part of that header, and you can't control it.

But you can add a table to your page. And you can then control the background color of that table. Here's the basic setup to fill the entire area under your control with a table. All of your listing text goes inside of this table: 

<table width=100% bgcolor=#225533 ><tr><td>

YOUR STUFF HERE

</td></tr></table>

The color is specified in 2 digit pairs. Here red=22, green=55, blue=33., giving a bluish green.
The invidual values go from "00" to "FF" ( 00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF )

For lots more information on background colors and where you can use them, do a web search for "html tutorial background color"


[edit]

Using an Image Background for Your Page

Using an image is just as easy as using a color. First, upload your background image to an image hosting service, such as imageshack or photobucket. Choose an image that won't make your text hard to read, and that will look as seamless as possible when it repeats to tile across the page.

Next, just use the "background" attribute in your table. 

<table width=100% background=http://www.blah.com/my_image.jpg><tr><td>

YOUR STUFF HERE

</td></tr></table>


[edit]

Putting a Frame Around Your Listing

You can use a table that is smaller than 100%, center it, and give it a border. This will result in a nice frame around your listing. 

<center>
<table width=760 border=5><tr><td>

YOUR STUFF HERE

</td></tr></table>
</center>

Here, we see the <center> tag again. Remember that? The entire table is between the opening and closing center tag.
Also, we have set the width of the table to 760 pixels. (no % symbol this time). Many computer monitors are in use at screen resolutions of 800 pixels wide or wider. So 760 is a good value to use. You could also use "width=80%" if you wish. Experiment and see what you like.

You can combine this with a background color or image as shown above. If you do, you will notice that the area outside the 760 wide table is the default ugly gray again. We will fix this in the next section.


[edit]

Tables Within Tables!

You can use one background image/color for your framed text, and another to fill the entire page beneath. Here's an example.


This is accomplished by using both the 100% table, and the centered 760 pixel wide table as each are shown above. 


<table width=100% background=http://www.blah.com/my_image.jpg><tr><td>

    <center>
    <table width=760 border=5 background=http://www.blah.com/another_image.jpg><tr><td>

    YOUR STUFF HERE

    </td></tr></table>
    </center>

</td></tr></table>



Translations:
Retrieved from "http://www.terracaching.com/tcki/index.php/Tutorial_Chapter_5"
Personal tools
Parent Site