How To Edit Your Forum Signature

[Poppa Wheelie]

I recently asked the forum moderators if there was a tutorial on how to edit a forum signature.  In the most polite way possible (truly) they asked me to figure it out and write the tutorial myself.

So let’s do this:  below is my take on how to do various things associated with editing a forum signature.  Please comment below if you have a better way of doing something, or if you want this tutorial to address something not currently addressed.  I will update this original post as needed to keep it current with the latest and greatest.

Note:  The examples used here appear correctly at 150% zoom.  If your browser is zoomed in more than this, you may get unexpected results.

 

Some Questions and Answers

Q:  How Do I Even Get To My Signature To Edit It?

Short Answer:  Drop Down in Upper Right > Account Settings > Signature

Longer Answer (with screenshots):

Spoiler

Q:  Are the Capabilities of the Signature Editor the Same As Those of the Editor For Forum Posts?

Short Answer:  Yes

Longer Answer:

Spoiler

Yes, what works in the forum post editor works the same way in the signature editor.

Here are some of those features that are the same in both editors, and that I find very useful for signature editing:

• Right and Left Arrows can be used to move the cursor between items on a single row
• Enter results in double space, Shift-Enter results in single space
• Embedding an image is the same process (copy the URL from your image host, such as Imgur, and paste that URL where you want the image to appear)
• Creating and editing one row of images works the same
• Creating and editing a one-row table works the same
• Embedding a link in an image or in text works the same (more on that process later)

Q:  Does the editor size my images appropriately for the signature line?

Short Answer:  No!  You must size all of your images before you use them.

Q:  Can Zooming the Browser Affect My Signature?

Answer:  Yes!  After you've built your signature, zoom your browser and make sure it behaves as you want.  Edit more, if needed.

 

In My Signature, I Want To …

Have Only Text

Like This:

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
"My favorite quote of all time!" -- That famous guy

"My second favorite quote of all time!" -- Some other guy

Aliquid facetum latine

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Here's How:

Spoiler

Nothing tricky, just write your text in.

Just as in a regular post, you have several text formatting options that you can see at the top of the edit window, including:

• Font, font size and color, etc.
• Bold, Italicize, Underline, etc.
• Bullets and numbered bullets
• Centering and other alignment and justification options

I'll talk about tables, and putting text into tables, later.

Have Only a Few Images

Like This:

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Here's How:

Spoiler

In this situation, the easiest solution is to paste the image URLs into your signature, left to right, in the order you want them to appear.  In fact, this is the easiest method even if you have a whole row of images

Keep in mind that you are not pasting actual images.  You are pasting image URLs.  You need to host the images somewhere else.  Imgur works very well for me.

Here's the procedure for each of the images:

• Wherever your images are hosted, copy the image address.  Using Imgur, for example, you right-click the image and select "Copy image address".
• In the signature editor, put your cursor where you want the image to appear
  • If I click on the previous image, then press the right arrow once, I know that I'm exactly where the next image should be
• Paste.  Control-V, or use the Paste button at the top of the editor

Make a One-Row Table With Invisible Borders

Wait, what?  I know, you're probably thinking, "Hey! We don't need no stinkin' one-row tables!"  But trust me, you will need this to provide some of the capabilities listed below.  So, later on, when I say something like, "you'll need a one-row table to do this", you'll know to come back here.

Here's How:

Spoiler

Here's the procedure for building a one-row table with invisible borders:

• Determine how many Columns you are going to need in this table.
  • How many images, left to right?  Include columns that will have both images and text.
  • How many columns that will have only text, no  images
  • Total these.
• Add up the total width (in pixels) of all of the images you will be placing left to right in your signature, plus an estimate for the width of any table columns that will contain text. 
  • Call this total your Table Width
• Place the cursor where the table will begin.  For a signature, that's usually at the beginning of the first row of the signature.
• Press the Table icon at the top of the editor
• Fill in the following Table Properties:
  • Rows:  1
  • Columns:  This is the number of columns you determined in step 1
  • Border Size:  0 (this zero value is what makes the borders invisible)
  • Width:  This is the Table Width you determined in step 2

Have a Mix of Images and Text 

Like This:

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

My SSTOs  |  My KerbalX  |  My Current Jool 5 Mission

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Or Like This:

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Tutorials Calculating Fuel Reading the dV Map

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Here's How:

Spoiler

In the first example, with a row of images above, and a row of text below (or the other way around), you should be OK to use the simple method and insert things in order, like this:

•  Insert image URLs, left to right, in the order you want the images to appear
• Press Enter (if you want a double space), or Shift-Enter if you want a single space
• Type in the row of text
• Format the row of text (center)
• Insert links into the text (which we'll discuss later)

For the second example, you'll need a one-row table to do this.  See the instructions above for creating this table.  Do that, then come back here to fill in your table like this:

First item

• If the first item will be an image, go to your image host and copy the image URL
• Get the cursor into the first column of the table.  Here's the easiest way for me:
  • Put the cursor at the end of the line above the table
  • Press the right arrow once.  The cursor will now look relatively big
  • Press the right arrow once more.  the cursor will look relatively smaller.  You are in the first column of the table.
• If your first item is an image.  Paste the image at the cursor location.  If the first item is text, type in the first row only of the text (you'll come back later to finish the text).

Successive items

• Copy the URL if the item is an image
• Get the cursor in the right position.  Here's how I do it:
  • If the previous item was an image
    • Click the image
    • Right arrow once, and you'll see a large cursor to the right of the image
    • Right arrow again.  The cursor will have disappeared.  That's OK, you're at the right place
  • If the previous item was text
    • Click within the text
    • Right arrow until you have just passed the last character of text
    • Right arrow one more time.  The cursor will have disappeared.  That's OK, you're at the right place
• Paste the image URL, or type the first row of text
  • You'll notice that the image you paste, or the text you type, will appear too far to the right, with too much empty space between the new item and the previous one.  This is OK.  As you fill in more items, the "extra" space will be less and less until, after the last item, there will be little or no extra space between items.  If there is still some extra space, we'll take care of that with the "Insert extra spaces at the end" step below.

Go back and finish text columns.  If you had a column that requires several rows of text (such as in the "Tutorials" example above), then do this for each of those columns:

• Place the cursor inside the text
• Right arrow until the cursor is immediately to the right of the last character of the text on this row
• Shift-Control to insert a single space
• Insert the text of the next row
• Repeat these steps for each row of text within this column

Insert extra spaces at the end.  If you still have too much space between columns do this:

• Go to the last column
• If it's an image, select the image, then right arrow once.  If it was text, select the text on the bottom row of this column, then right arrow until you are immediately to the right of the last character
• Now select the Space bar to insert spaces at the right end of the last column.  You may need to do this several times, but you'll notice the columns getting closer together on the left side of the table.

Have Text That Is Associated With Only One of Several Images

Like this:

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                                          Got It:  Gilly, Duna, Ike, Minmus, Mun, Kerebin
                                          Need It:  Everything else

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Here's How:

Spoiler

You can do this with or without using a table.

Without a table:

• Put all of the images in, using the procedure from "Have Only a Few Images" above
• After the last image, press Shift-Enter to get a single space under the images instead of a double space
• Eyeball where to put the text so that it appears under the image you want
• Do the same if you have two or more lines of text

With a table:

• Create the table, using the procedure from "Make a One-Row Table With Invisible Borders" above
• Place all of the images in, using the procedure from "Have a Mix of Images and Text" above
• Once all of the images are in, place the text:
  • Select the image under which the text will go
  • Select right arrow once
  • Press Shift-Enter to move the cursor a single space beneath the image
  • Type in the text
  • Repeat the previous two steps for each additional line of text

Imbed a Link In Some of the Text, or In an Image

Why?  So that the reader can follow the link and see some details on whatever you are displaying in your signature.

Here's How:

Spoiler

How to embed a link in an image or in text:

• Find the target for your link, and copy the URL of the target
• Select an image (by left-clicking on the image).  Or, select any text.
• Select the icon in the top row of the editor that looks like two links of chain (see, get it?  "links").  The mouseover for this icon says "Link"
• Paste in the URL of the target
• Select "Insert into post"

Imbed a Link That Leads To a List of More Than One Other Links

Why?

• Perhaps you have earned a particular badge more than once, and you want the reader to click the badge and arrive at a page where you provide links to each of the times you earned the badge
• Perhaps you have a lot more that you want to put in your signature line than will easily fit. Perhaps you want to send the reader to a whole page of information and links

Here's How:   @adsii1970explains the process in this post, much better than I could.  Thanks, @adsii1970!

Edit the HTML of my Signature

Short Answer:  It looks like you have some editing capability, but it's complicated and difficult

Longer Answer:

Spoiler

See the very recent post below from @Superfluous J.  Here it is if you can't find it.  Thanks, @Superfluous J!   He says:

"You can't edit the HTML in your signature, but you CAN get some things in your signature that aren't possible in the editor.

For example, you can't (at least I never figured out how to) get a fully realized html table with row widths and invisible borders. However you CAN create an html file (just on your local computer) and create the table there, load that html file into your web browser to make sure the table looks like you want it, and then copy/paste the table into your signature.

It's a huge pain and You can't edit your signature after that or you'll risk mucking it up (i.e. you'll need to do all your editing in that html file and copy/paste each time) but it *does* work. I used to do it for my signature in which I had a table embedded inside a cell of another table, both of which had transparent borders so you didn't know - just looking at it - that I used tables at all."

Also see the Editor items 19 and 20 from this post, by @Mad Rocket Scientist This was written in 2015.  Don't know how much still applies:

"19.  By going RMB>inspect element then RMB>Edit as HTML on <p> you can edit raw HTML for your post, allowing some options not available on the WYSIWYG editor, such as text color and easier tables, but iframes, javascript, and other advanced stuff cannot be embedded in posts.
20.  Tables: Click on the icon that looks like a bunch of boxes, most of the options should be self-explanatory.  You can change the size of the table when it's in the editor by dragging the squares, but you cannot add more rows or columns. A more powerful option is to make the HTML for your table off of the forums, then inspect element on the editor, and paste the HTML table into it."

Some Other Questions, Still Unanswered

Is It Possible To Create More Than One Single Status Update?
What Are the Limits On How Tall and How Wide the Signature Can Be?

What Else?

Please post below if you have any feedback on the following, and I'll update this post:

• Is there a better way of doing some of the things listed here? 
• Do you have a solution for anything listed in the “Other Questions, Still Unanswered” section?
• Is there something you want to do with your signature, but you don’t see it listed here?
• Do you have any suggestions for improving the readability of this post?
  • I'm using dark mode.  Does anything need to be adjusted to work better for light mode?
  • Is anything else needed to help readers find what they are looking for?
     

Edited August 31 by Poppa Wheelie

[Superfluous J]

You can't edit the HTML in your signature, but you CAN get some things in your signature that aren't possible in the editor.

For example, you can't (at least I never figured out how to) get a fully realized html table with row widths and invisible borders. However you CAN create an html file (just on your local computer) and create the table there, load that html file into your web browser to make sure the table looks like you want it, and then copy/paste the table into your signature.

It's a huge pain and You can't edit your signature after that or you'll risk mucking it up (i.e. you'll need to do all your editing in that html file and copy/paste each time) but it *does* work. I used to do it for my signature in which I had a table embedded inside a cell of another table, both of which had transparent borders so you didn't know - just looking at it - that I used tables at all.

[Poppa Wheelie]

49 minutes ago, Superfluous J said:

You can't edit the HTML in your signature, but you CAN get some things in your signature that aren't possible in the editor.

 

Thanks.  I'll update the OP with something on this.