HomeGuideID RequestRecentFrassForumsDonateHelp

Clickable Guide

Calendar

Upcoming Events

Photos of insects and people from the 2024 BugGuide gathering in Idaho July 24-27

Moth submissions from National Moth Week 2024

Photos of insects and people from the 2022 BugGuide gathering in New Mexico, July 20-24

Photos of insects and people from the Spring 2021 gathering in Louisiana, April 28-May 2

Photos of insects and people from the 2019 gathering in Louisiana, July 25-27

Photos of insects and people from the 2018 gathering in Virginia, July 27-29

Previous events

FOR REVIEW: Complete Markup Article

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Overview

LINKS
--BBCode Version
--HTML Version
IMAGES
--Clickable Thumbnails
--Images from another web site
FONT SIZE
COLOR
CITATIONS (cites)
BOLD LETTERING
ITALICIZED LETTERING
UNDERLINED LETTERING
ANCHORS
--Adding Anchors
--Linking to Anchors
MIXING MARKUPS
STRIKES
SYMBOLS
REFERENCES

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Links

--BBCode version
You will want to type:

[url=Web Site Goes Here]Word Goes Here[/url]

Fill in the colored words with what they say. Example:

[url=http://bugguide.net/node/view/15740]Welcome to BugGuide.Net![/url]

would come out to look like:

Welcome to BugGuide.Net!

----Another way to do it is this:

[url]Web Site Goes Here[/url]

Example:
[url]http://bugguide.net/node/view/15740[/url]

would come out to look like:
http://bugguide.net/node/view/15740

--HTML Version

You will want to type:

<a href="Web Site Goes Here">Word Goes Here</a>

Let's try it.
<a href="http://bugguide.net/node/view/15740">Welcome To BugGuide.Net!</a>

which would look like:
Welcome To BugGuide.Net!

Now, if we wanted this link to take someone to a different tab, you would type:
<a href="Web Site Goes Here" target="_blank">Word Goes Here</a>

Let's try it out.
<a href="http://bugguide.net/node/view/15740" target="_blank">Welcome to BugGuide.Net!</a>

Which would look like:
Welcome to BugGuide.Net!

»More about the target attribute
»More about the links

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Images

--Clickable Thumbnails*

You will want to type:

[thumb:#]
where # is the number on the top left corner of any image on BugGuide.

Example:
[thumb:290030]

would come out to look like:

*These can only be used on BugGuide images.

--Images from another web site

NOTE: Be cautious when doing this. Always make sure to give the website/photographer credit for their photo.

You will want to type:

[img]Web Site (copy image location) Goes Here[/img]

Example:
[img]http://bugguide.net/themes/bugguide/images/bglogo.gif[/img]

comes out to look like:

--Images with HTML

<img src="http://bugguide.net/themes/bugguide/images/bglogo.gif" />

The result:

--Clickable Images
You can combine links and images to make a clickable image.
You will want to type:
[url=Site Here][img]Site Here[/img][/url]

Let's try it:
[url=http://bugguide.net][img]http://bugguide.net/themes/bugguide/images/bglogo.gif[/img][/url]

This would look like:

Now let's do the HTML version.
<a href="Site Here"><img src="Web Site (copy image location) Goes Here" /></a>

Let's try it:
<a href="http://bugguide.net"><img src="http://bugguide.net/themes/bugguide/images/bglogo.gif" /></a>

More about images...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Span

The tag is a way to use a form of CSS, called an inline style sheet. Instead of stating how the elements are used in the first part of the page, you can state how the elements are used with the tag (or any tag).

For an inline style sheet, you will want to type this:
Text to which the commands will apply

Now, how to type the style commands:
property:value;property:value;
Each property:value; is a declaration.
For example you might want to type:
This is a test

This will generate:
This is a test

Here is another example that makes letters blink.
Test
Test

NOTE: Blink is not supported by Internet Explorer, Safari, or Chrome.

It may be helpful to you to read this and this

--Text decoration

Some examples:
Test
Test
Test

The results:

Test

Test

Test

--SIZE
You will want to type:

Word Goes Here

Let's try it out:

BugGuide.net

This is what it will look like:

BugGuide.net

You can change the size. I just randomly chose 17 for an example.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Color

You will want to type:

[color=Color Here]Word Goes Here[/color]

Let's try it out:
[color=red]BugGuide.net[/color]

will look like:
BugGuide.net

Also, you could use Hex Colors.
A hex color is a hexidecimal number. The first 2 digits are the red, the next 2 digits are the green, and the last 2 digits are the blue.
Simply add a # to the code.

[color=#ff00ff]i am ugly[/color]

i am ugly

For a reference of hex colors, see the page on my website.

--Color with Inline Styling

I am ugly

The result is the same as the BBCode version.
I am ugly

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Citations

Cites are used to credit books, images, forum topics, and links*. They are clickable.
You will want to type:
[cite:#]
where # is the cite number of the page. If you go to a page on BugGuide, at the address bar, the last number is the number you will want..

Let's try it:
[cite:24520]

will look like:
(1)
*These can only be used on BugGuide.net.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Bold

--BBCode Version
You will want to type:
[b]Word Here[/b]

Let's try it.
[b]BugGuide.net[/b]

will look like:
BugGuide.net

--HTML Version

You will want to type:
Word Here

Let's try it:
BugGuide.net

which would look like:
BugGuide.net

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Italic

--BBCode version

You will want to type:
[i]Word Here[/i]

Let's try it.
[i]BugGuide.net[/i]

will look like:
BugGuide.net

--HTML Version

You will want to type:
Word Here

Let's try it.
BugGuide.net

which would look like:
BugGuide.net

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Underline

--BBCode Version

This is what you would type:
[u]Word Here[/u]

Let's try it:
[u]BugGuide.net[/u]

which would look like:
BugGuide.net

--HTML Version

Type:
Word Here

Ex.
This is a good page!

Result:
This is a good page!

Hmmm... BugGuide does not seem to allow the HTML version. Read the CSS way to do it instead.

--A CSS way to do it

Example:
Test

The result:
Test

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Anchors

--Adding Anchors:
You can use an anchor to link to a specific section of a page. To do that, you have to add an anchor to link to later on.

This is what you will type to add an anchor
<a name="Anchor Title Here">Word Here
Note: You cannot use spaces in anchor naming. I use underscores (_)

Here's an example:
<a name="Anchor_Test"></a>Anchor Test

Now I'm actually going to create an anchor so we can link to it.

Anchor Test=this is the anchor. I made it bold so it is noticeable.

--Linking to anchors

Linking to anchors is pretty much the same as a normal link. The only difference is you add a # on the end and then type the anchor name you are linking to.

Here is what you type: (I just chose to use BBCode here. You can use HTML as well.)
[url=Web Site Goes Here#Anchor Name goes here]Word Goes Here[/url]

Let's try it out on the anchor we made:
[url=http://bugguide.net/node/view/354750#Anchor_Test]Anchor Test[/url]

Now let's see if it takes us to the anchor.
Anchor Test

»More about anchors...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Mixing Markup

You can use more than one markup at a time.
For instance, we could do this:
[b][i]BugGuide.net[/i][/b]
which would look like:
BugGuide.net

or this:
[color=blue][b]BugGuide.net[/b][/color]
which would look like:
BugGuide.net

or this:
[color=blue][b][i]BugGuide.net[/i][/b][/color]
which would look like:
BugGuide.net

or this:
BugGuide.net
which would look like:
BugGuide.net

or this:
<a name="Anchor Name Here" href="Site Here">Word Here</a>
which would look like:
<a name="anchor_test_ii" href="http://bugguide.net/node/view/15740">BugGuide.net</a>
which would be:
BugGuide.net
Then we could link to it:
http://bugguide.net/node/view/354750#anchor_test_ii

There are unlimited tags you can combine. Try it out!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Strike

You will want to type:
<strike>Word Here</strike>

Let's try it:
<strike>BugGuide.net</strike>

which would look like:
~~BugGuide.net~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Captions
Copy this code:

Skipper

Datana

Arctiid

[thumb:489150]
Caption Text
Note: This uses the thumb tag, see the thumb tag in this article.
Note: You can not use the same number in a thumb tag more than once in a page.
Note: You cannot go into the next line of code with another caption. Otherwise they will not display correctly.
Important Note: After the last caption is closed in each row of captions, place this line of code so your text is not hidden underneath each caption.



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Symbols

Symbol entities can be used to show a symbol without activating markup
Here are some codes that can be used: (code_____symbol it turns into)
& (or &)_____&
[_____[
]_____]
<(or <)_____<
>(or >)_____>
•_____•
"_____"
°_____°
«_____«
»_____»
→_____→
←_____←
↓_____↓
↑_____↑
↔_____↔
⇒_____⇒
⇐_____⇐
&dArr;_____⇓
&uArr;_____⇑
⇔_____⇔
§_____§
≤_____≤
≥_____≥
≈_____≈
&sim;_____∼
≠_____≠
&equiv;_____≡
&cong;_____≅
&lowast;_____∗
√_____√
∞_____∞
&or;_____∨
&and;_____∧
♀_____♀
♂_____♂

See my collection of over 600 symbol entities on my website here.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
References

This is a list of all the forum topics on BugGuide that have helped me with this article

http://bugguide.net/node/view/354520
http://bugguide.net/help/markup
http://bugguide.net/node/view/353017
http://bugguide.net/node/view/341266
http://bugguide.net/node/view/258535#403776
http://bugguide.net/node/view/258535#534552
http://bugguide.net/node/view/258535#404027
http://bugguide.net/node/view/258535#404256

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
More

This was originally its own page, but I merged it with this markup page.

First of all, CSS stands for Cascading Style Sheets, a language used to style HTML elements.
The only type of CSS allowed in Bugguide messages is inline styling, styling within the HTML style attribute.
To learn more about this please see w3schools.com.

I will only cover a few very neat ways to enhance your messages here at BugGuide.

Creating Stunning Headers

To create headers such as above copy this code:
<span style="display:block;padding:5px;-moz-box-shadow: 2px 2px 10px #000000;-webkit-box-shadow: 2px 2px 10px #000000;-moz-border-radius:10px;-webkit-border-radius:10px;background:#c0c0c0;background:-moz-linear-gradient(top, #efecde, #c9c5ae);background:-webkit-gradient(linear, left top, left bottom, from(#efecde), to(#c9c5ae));font-weight:bold;font-size:20px;border:1px outset #e5dcb2;text-shadow:0px 1px 0px white;font-family:trebuchet ms, verdana, sans-serif">PLACE YOUR TEXT HERE!

To create a code container like above use this code:
<span style="display:block;padding:5px;-moz-box-shadow: 2px 2px 10px #000000;-webkit-box-shadow: 2px 2px 10px #000000;-moz-border-radius:10px;-webkit-border-radius:10px;background:#c0c0c0;background:-moz-linear-gradient(top, #efecde, #c9c5ae);background:-webkit-gradient(linear, left top, left bottom, from(#efecde), to(#c9c5ae));font-weight:bold;border:1px outset #e5dcb2;text-shadow:0px 1px 0px white;font-family:monospace">PLACE YOUR TEXT HERE!

For all of these 3d boxes, they will only look correct if you are using Safari, Firefox (a new version), or Google Chrome. Here is an image of what you will see if you use either of those 3 browsers:

This code was originally from my Insects gallery and my Forum.

Contributed by roar on 25 November, 2009 - 3:32pm
Last updated 16 January, 2012 - 10:14am

Finished? Place it!

Is this nice guide finished now?

If so, why isn't it placed so people looking for help can find it, like on the Help Tab - Images? Or at least have a link there to point to it if it can't be moved. Nobody will ever see it otherwise.

I've see other things that would be useful if placed where somebody would look for it. This is like a picture known to species yet still in the ID Request section (which bugs me no end).

… Glen Forister, 4 January, 2019 - 5:49pm

links that are hard to find

Since there are a number of useful links that seem to get lost in the Forums what I do is list the ones that I think are useful on my account page for easy access.

… Ilona L., 8 January, 2019 - 11:48am

simple question

.
how to make [cite:####] appear as text and not as say: (1)?
.

… Mike Quinn, 3 October, 2018 - 6:37am

replace any element of the syntax by its code; see the Symbols section of this article

i put [ in stead of the opening bracket

… v belov, 3 October, 2018 - 8:51am

You could always just do the non-cite technique

The Coccinellidae (Coleoptera) of America North of Mexico
[url=
then add the bugguide page
https://bugguide.net/node/view/48287
then close the square brackets
then add the title
The Coccinellidae (Coleoptera) of America North of Mexico
and finish with closing [/url

… john and jane balaban, 3 October, 2018 - 8:11am

return to beginning of next line

We are working on Joe's Miridae article here following the pattern set up above under Captions. It says you have to end each line of captions otherwise it won't display correctly, but we're not sure how to tell how many images will fit on a line. The article looks fine on our computer but displays differently on two other computers we visited. It wraps to the next line, but not necessarily to the beginning of that line. Do we just arbitrarily put six or maybe seven images to a line and hope they fit?

… john and jane balaban, 23 January, 2018 - 7:44pm

Is there a way to write a string of superscripted characters?

Please see my posted query about this. My purpose is to use superscripted "(3)" rather than ordinary text "(ref. 3)" to denote the third reference (not hyperlinked) in my managed forum article. In that way I maintain the style dictated by superscripted hyperlink "(2)" which was automatically created for the second reference. I'm not sure what will happen if ever I add to the article a third hyperlinked reference. Will there be automatic creation of superscript "(3)"? That would compete badly with my previous reference"(3)" which is not hyperlinked. If that would happen, I would have to manually reassign all my superscripts "(3)" to "(4)". What a mess!

So I guess I'm asking two questions. How to do superscripts? How to best list and denote a mix of hyperlinked references and non-hyperlinked references?

… Peter W. Messer, 25 March, 2013 - 10:36pm

Superscripts

Unfortunately I don't think superscripts can be done in BG. Usually you would use the HTML tag, but BG doesn't let you use this tag... not sure why exactly.

… roar, 4 May, 2013 - 4:04pm

list question

I often create lists using the "+" markup, which creates a nice bulleted list. Is there a way to make certain bullets of a list indented?

… Brad Barnd, 9 April, 2012 - 12:43am

If you're making lists, ...

use the <ul> tag and the <li> tag like this: <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> </ul> which will be

List Item 1
List Item 2
List Item 3
List Item 4

… roar, 9 April, 2012 - 7:54am

My captions are to the side of the image

What am I doing wrong? See this page.

… Lynette Elliott, 15 January, 2012 - 12:35pm

A hunch

The caption needs to be on the next line. Unfortunately, that puts the caption outside the box when done on guide pages

The problem is that the system treats text differently in guide pages than in forum topics and comments: it wraps each line in a <div></div> pair, instead of just one for the whole text area. HTML pairs like the and <div></div> should never cross each other- one needs to be completely nested inside the other. The result of doing so is unpredictable: some browsers may work ok, but others will have some odd mix of working and not, or even not work at all, hiding the whole thing.

I have a suspicion that the caption code is incompatible with guide pages and will only work in comments and forum topics, but there may be something I'm missing here.

… Chuck Entz, 15 January, 2012 - 4:44pm

I agree

Not sure how to fix this off the top of my head either...

… roar, 15 January, 2012 - 5:05pm

Thanks.

… Lynette Elliott, 16 January, 2012 - 9:58am

Actually I may have figured it out...

Apparently BugGuide supports , which is an HTML comment. Assuming the guide pages support this, this could be a way to get around the <div> thing on each line:

[thumb:489150]Caption Text

… roar, 16 January, 2012 - 10:16am

Nope

I just tried it. The result was the same as before.

… Lynette Elliott, 16 January, 2012 - 10:36am

Is the result still present?

if so I can see what's happening

… roar, 16 January, 2012 - 10:37am

Yes,

I used that code for the the O. aglossus image on a) of the same link I show above.

… Lynette Elliott, 16 January, 2012 - 10:46am

No clue

If you included the  thing that was in the code I'm not sure what else to do.

… roar, 16 January, 2012 - 10:49am

Thanks

for trying. =]

… Lynette Elliott, 16 January, 2012 - 10:53am

is there a way to indent paragraphs in a hierarchical list?

i mean, without adding the nonbreaking space symbols (that only indent the first line anyway)
example:
Order PODUROMORPHA
   Superfamily Neanuroidea
      FAMILY NEANURIDAE
         Subfamily Neanurinae
            Tribe Neanurini
            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

...so that the entire bla bla bla text holds the left indentation of the first line, no matter how long the paragraph is? thanks.

… v belov, 2 November, 2011 - 2:53pm

yes

Order Blah
Family Blahgenus Blahspecies Blah

Order Blah
Family Blahgenus Blahspecies Blah

… roar, 2 November, 2011 - 4:54pm

terrific. many thanks -- again

hope this works on info pages... will be trying

… v belov, 2 November, 2011 - 5:08pm

yaay! it worked...

...very much the way i wanted it to -- pls see the classif. synopsis at(1) -- i just wonder why does the interparagraph space expand so much when the 'block' thing is used...

… v belov, 2 November, 2011 - 9:32pm

interparagraph space

Since a newline in Bugguide turns into a , that automatically puts the span tag into a new line. Display=block makes it so the element will automatically break. Therefore there are 2 breaks happening, which explains the interparagraph space. The way to fix this would be to get rid of newlines in between each span tag, for example:
do this:
BlahBlahBlah

instead of this:

Blah
Blah
Blah

Hope that made sense.

… roar, 4 May, 2013 - 4:00pm

thank you so much again

i'll try to edit the code following your advice

… v belov, 4 May, 2013 - 4:10pm

Images and text

Can you show us how to put text side by side with a picture? I know that there is a way. In fact I found an example in one of the early Information pages but I can't remember where it is any more. I can't remember if it combined BB code and HTML code or not.
It would be very useful in cases like this. There is a lot of wasted space that I would like to eliminate.
Thanks for all the tips.

… Beatriz Moisset, 22 February, 2011 - 9:38am

better use of the screen space is very important

knowing all the available ways to pack it more efficiently with info and eliminate wasted background will help a lot; i second the request and thank roar again in advance.

… v belov, 22 February, 2011 - 10:31am

Also

I'd love to know how you did those captions without the brown decorations... is it just a matter of removing the "background-color:#e6dbae;" from the code?

… Charley Eiseman, 22 February, 2011 - 10:51am

as a reply to both

To remove the decorations simply take out the background-color and the border.

To make the left-aligned images you
a) cannot use [thumb], you must use the [img] or <img> tag.
b) need to add the attribute align="left" to the <img> tag. Example:
<img src="http://bugguide.net/images/cache/THMHBHXHRRRLVZGL1Z5LEZ8LWZZLNZ7LJHXLRR7L9ZGLFHPH3H7HOHMHCH4HBHQLTHWHAZNH9ZPHVHKL1ZGLLRML9Z.jpg" align="left" />
This would result in:

text
text
text
text
text
text

… roar, 22 February, 2011 - 3:47pm

Yes, but...

It helps, yes. But: how do you post clickable thumbnails like the ones Christopher used here?
And I agree that Bugguide has been agonizingly slow today. At times it just gave an error message.

… Beatriz Moisset, 22 February, 2011 - 4:58pm

simple

simply wrap the <img> tag in the <a> tag.
<a href="http://bugguide.net/node/view/489132"><img src="http://bugguide.net/images/cache/THMHBHXHRRRLVZGL1Z5LEZ8LWZZLNZ7LJHXLRR7L9ZGLFHPH3H7HOHMHCH4HBHQLTHWHAZNH9ZPHVHKL1ZGLLRML9Z.jpg" align="left" /></a>

Result:

Text
Text
Text
Text
Text
Unfortunately there's no simple way to do it, you must manually find the image URL.
Text

… roar, 22 February, 2011 - 5:17pm

It works! Thanks!

I did it for the Carnivorous caterpillars that I mentioned in my query. Now there is no wasted space next to the first image.
One thing to remember is that the appearance changes when you enlarge or reduce the text.

… Beatriz Moisset, 22 February, 2011 - 5:39pm

posted by accident again

bugguide was being slow, i was unsure if it had posted or not

… roar, 22 February, 2011 - 3:46pm

posted by accident

… roar, 22 February, 2011 - 3:42pm

Are you thinking of

this one?

… Charley Eiseman, 22 February, 2011 - 10:20am

is there any possibility to:

make text arranged in columns? (e.g., here)

arrange thumbnails with a caption underneath each in a matrix format like here? would help to use the screen space more efficiently and make more content available at a glance -- especially important for side-by-side image comparison. (sorry about being so ignorant, and many thanks in advance for the answer; feel free to e-mail me directly, if this is off-topic. =v=)

… v belov, 9 February, 2011 - 1:21pm

not off topic

I put in captions, but it is a bit tedious making them and there is a lot of code.

As for the multi-column layout I will have to look into that. Normally I would say use an HTML table but BugGuide doesn't allow those tags, so I'll have to do something with .

… roar, 9 February, 2011 - 2:39pm

i immensely appreciate your help

just noticed the new section you added -- will practice toying with that

… v belov, 12 February, 2011 - 8:12am

first results...

(1)
you are most helpful, roar. i'm sure scores of people will arrange info page content this way. the pages will benefit a lot -- from more efficient use of the screen space and increased educational value.

… v belov, 12 February, 2011 - 12:39pm

page looks good

The decorations on the captions look good for only a few specimens I think, but in the format of many rows and columns it definitely looks better without them.

… roar, 12 February, 2011 - 2:37pm

yeah...

i'm still coping with non-monochrome interfaces, man...
back in the early 90s, MSOffice used to have this "black-n-white toolbar buttons" option; i can't tell you how much i miss it.

… v belov, 12 February, 2011 - 2:44pm

a small addition

you say about cites that "These can only be used on BugGuide books."
however, as it turns out, any items posted under the 'Links' tab -- you can use the cite:# format the same way, just pick the actual number from the url, just like you do to include thumbs. Example:(1) -- you see?
works the same way with anything: pix, forum threads, glossary entries... e.g. (2)(3)(4)

and many thanks for this helpful manual, Roar.

… v belov, 25 December, 2009 - 11:39pm

Didn't know that!!!

If I did, I would have included it. Thanks for telling me!

… roar, 28 December, 2009 - 4:54pm

Question

I rarely use [img] because I have personal concerns that if the image is from a site other than BugGuide it may be considered hot-linking, and that there may be copyright issues if we don't obtain permission and/or give proper photo-credit or some other type of citation. Is this possibly a real concern? I almost never use [img] in responses and never on a guide page, and instead use [url] to point to the image and allow views to "click to see".

… John R. Maxwell, 25 December, 2009 - 10:42pm

I rarely use it either.

It is just a form of HTML/BBCode that people might want to know. I stated that it should always be given credit.

… roar, 28 December, 2009 - 4:56pm

A couple of tweaks

On the whole, very good. It covers a lot of useful stuff in an easily-understandable way.

First tweak: in you section on images, you should add the ability to make images from other sites clickable. You do this by putting the code for the link around it. Just replace the text in your link with the block code for the image. For instance:
[url=http://bugguide.net][img]http://bugguide.net/themes/bugguide/images/bglogo.gif[/img][/url]

It also works with the html version, in case you want to use the target="_blank" trick.

Second tweak: most people use the wrong terminology for the forums. A forum is the major section like "Articles" or "General Discussion". What many people call "forums" are actually forum topics, though there's nothing wrong with referring to them as "posts" or (in the case of this forum) "articles".

An idiosyncracy of the BugGuide Search is that the forum topics themselves aren't included in any search, but the comments posted to them are (unless comments in general are excluded). That's because they don't belong to any of the types of pages that existed when the search was created, and it hasn't been worth the extra work of expanding it to include them.

… Chuck Entz, 20 December, 2009 - 3:28pm

Thanks for the help!

I added the BBCode version, but the HTML version did not seem to work. Here is what I typed:
<a href="http://bugguide.net"><img src="http://bugguide.net/themes/bugguide/images/bglogo.gif" /></a>

… roar, 23 December, 2009 - 3:24pm

Let's try it

It seems to work fine for me (I added target="_blank", but otherwise it's just copy and paste from your comment).

It might be good to add the height and width attributes for the html img tag to your explanation. They're useful for making larger images fit on the page.

Just remember that they don't help with the time it takes to load big images: to show the page, the browser loads the full-size image file, then changes its apparent size when it puts everything together on the page.

To reduce this 161 x 48 pixel image to half I added the attributes as follows:
<a href="http://bugguide.net" target="_blank"><img src="http://bugguide.net/themes/bugguide/images/bglogo.gif" width="80" height="24"/></a>

… Chuck Entz, 24 December, 2009 - 4:39pm

HTML done

I must have made a careless error somewhere.

… roar, 25 December, 2009 - 8:48pm

Disclaimer: Dedicated naturalists volunteer their time and resources here to provide this service. We strive to provide accurate information, but we are mostly just amateurs attempting to make sense of a diverse natural world. If you need expert professional advice, contact your local extension office.

Contributors own the copyright to and are solely responsible for contributed content.
Click the contributor's name for licensing and usage information.
Everything else copyright © 2003-2024 Iowa State University, unless otherwise noted.

Bugguide is hosted by:

Printer Friendly Version