Tons Tweaks

Privacy Level: Public (Green)
Date: [unknown] [unknown]
Location: [unknown]
Profile manager: Rob Ton private message [send private message]
This page has been accessed 5,378 times.
Warning: None of this code can be used on person profiles. See the WikiTree guidelines on using HTML and inline CSS in profiles.


Drop Cap Sample

'Artistic' styling of narrative elements for visual interest.


ear book, wherein I often view
The face of the loved and true,
With whom I've wiled sweet hours away,
  and held sweet converse by the way.

Where are the friends whose silent forms
Enclosed are within the bonds,
Have they all gone—I left to mourn !
  And wander on life's way alone.
Yes, some to heavenly homes have gone,
Their work on earth is finished and well done,
And Some are travelling yet in life's rough way,
  And hope bespeaks for all a happy meeting day.
Dear Album ! of no intrinsic worth art thou,
That I so fondly o'er the bend,
It is fond memory that gives back the sigh,
  For each beloved, departed friend once nigh.

Sample Code

<span style="float:left;color:#FF0000;font-size:33px;line-height:26px;padding-top:3px; padding-right:3px;font-family: Times, serif, Georgia;">D</span>ropcaps are neat<br />They give that traditional book look.

Short Transcriptions

Have a short item, like an obituary or news clipping you want to include, but don't feel like making a free-space just for some odds & ends?

Just make it smaller and put it towards the bottom of the profile. This way it takes up less room on the biography but is still available for reference without linking away from the page. Can be useful if you wish to include more data from a census for later reference

Or for something more complex...


Here is another way to save space if you have longer transcriptions that you would like to have right on the profiles for reference, but do not need to see ALL the time

Just remember that you must use <br /> to break lines. because just hitting enter twice will not work.

Also it is probably a good idea to put a short description at the top

Note if you put anchors, such as footnotes, inside the frame the box will scroll to display the anchor when the link to the anchor is followed.

A third option is to make information pop-up when users put their mouse over the paragraph (try it on this paragraph), but remember people who use tablet computers and iPad may not be able to 'hover' easily.

Sample Code

Simple Version:
<small> <blockquote> Your text goes here </blockquote></small>

Complex Version:
<blockquote STYLE="outline:black solid thin; height: 100px; overflow-y: scroll">Your Text goes here. <br /><br />And so on and so on</blockquote>

'Hover' Version:
<span title="This is the hovering text">This is the paragraph that the person puts their mouse over to see the hovering text</span>

Call-out Boxes

Want to bring attention to some items, or list the entire immediate family including adopted children, step children so it is prominent?

  • Bob Barker
  • Dudley Doright
The rest of the narrative will 'wrap' the box which allows us some control over formatting the narrative just the way we want it to be displayed. Go creativity!
Or if you want the wrapped text to only be topical to the call-out box (an image thumbnail for example), we can stop wrapping by setting the style to "overflow:hidden" or "clear:both"

Sample Code

<div style="float:right; border:2px #000 solid; background-color: yellow; width:200px; height:auto; margin: auto">The call-out content goes here.</div>
The wrapped text goes here <div style="clear:both;"></div>
And this text will not wrap

Other Highlighting Methods

Delving into some basic use of styling CSS Properties gives us many options on how we add visual emphasis to the most important details of a profile. Keep in mind that changing colour is not always helpful to users with colour vision deficiencies; varying size or using — symbols — are good alternatives.
Also remember that not all web browsers support the same code. In CSS3 this underline should be red.

Sample Code

<span style ="background-color:lightcyan;">Highlighter effect</span>
<span style="text-decoration:underline;color:red;"><span style="color:black;">Text and underline in different colours</span></span>
<span style="outline:red solid thin;">"Circling words"</span>
<span style="color:red;">Coloured text</span>
<span style="font-size:200%;">Resized text</span>

Text and Image Spacing

Don't forget some of the basic HTML you can use such as the  em Space and it's baby brother the  en space. You might also want to use the non-breaking space to make sure titles or styles, full names, and post-nominals all stay together on one line. Say we want The Right Reverend and Right Honorable The Lord Williams of Oystermouth, PC to stay on one line.

Sample Code

For an Em Space use &emsp;
For an En Space use &ensp;
For a non breaking space use &nbsp; in place of a normal space

Images in Biographies

You can use images that have been uploaded to Wikitree in the biography of any profile, including inside call-out boxes, tables, and other elements.
You can control the size of an image by specifying a width in pixels. This is MUCH easier than uploading the same image multiple times at different resolutions - or you can use an x before to specify heights instead of widths such as x50px - this makes sizing two images on the same line much easier!

Image:Loyalists.gif Image:Loyalists.gif

Sample Code

Image sized by width: [[image:imagnename.jpg|200px|image description]]
Image sized by height: [[image:imagnename.jpg|x200px|image description]]

Multiple Columns

 Do you want to reproduce something that was originally laid out in multiple columns like a newspaper? — or maybe you want to limit blank space in the narrative, so you can view more information with less scrolling.
 Well I am happy to report that columns do work. Remember you must define column properties three times because Firefox, and IE/Safari need different CSS properties to display properly. I don't like the full justified alignment, but have used it to show the possibilities.

  • Note that <span> tags are an inline element and cannot contain block elements such as headings. If required, use <div> in place of <span> with the sample code below.

Sample Code

<span style="display:block;width:500px;text-align:justify;columns:100px 3;-moz-columns:100px 3;-webkit-columns:100 px 3;column-gap:40px;-moz-column-gap:40px;-webkit-column-gap:40px;"> Your text goes here.</span>

Warnings to Editors

Tom Bredehoft suggested pasting a warning to profiles that are under revision so that other editors know edits are in process; a workaround for some record locking concerns with profiles that have many managers. Paste the code in at the top and save immediately so that anyone visiting the page will see the warning. Remember to remove it when you are finished revising :)

Do not attempt to edit while this message is here.

23:28, 28 November 2013 (EST)

Sample Code

<div style="padding-bottom:5px;text-align:center;border-bottom:2px solid red;"><span style="font-size:250%;color:red;">UNDER CONSTRUCTION </span><br />Do not attempt to edit while this message is here.<br /><br />~~~~~</div>

Colour List

Maggie N. has provided a link to which gives a fairly exhaustive list of colours that can be used with your css tags as needed.

Extending Tables

*this section is a work in progress* More advanced styling of tables is possible. A basic understanding of (or looking up) common CSS and HTML attributes (particularly the ones relevant to tables) may be required.

Each 'line' of a wikitable follows the same basic structure: A leading symbol, formatting (optional), content (where appropriate).
If both formatting and content appear on one line they must be separated by a pipe character (|).

The leading symbols are:

  • {| start of a table. No Content.
  • |+ table caption (if used)
  •  ! column or row headings (styled automatically). Column headings must follow the table caption (if used). Row headings must follow a new row. It is a good practice to include either scope="column" or scope = "row" as appropriate in the formatting
  • |- new row. No Content.
  • | new cell in a row
  • |} end of a table. Obviously this will have neither formatting nor content.

If you wish you can put multiple column headings or cells on a single line by doubling the leading symbols on subsequent cells, for example:
|cell 1 format| ||cell 2 content||cell 3 format|cell 3 content.
notice 1) that cells must have content (even if it is a single blank space), and 2) that formatting can be omitted. Bullets, and numbered lists in cells must start on new lines, in this case the leading symbol and any formatting appears on the line before the content.

There are numerous formatting options Some common options (underscores denote a value) are:

Anywhere Tables Cells
  • border = "__"
  • cellpadding = "__"
  • cellspacing = "__"
  • align = "__"
  • style = "____"
    • width:___;
    • height:___;
    • background:___;
    • font-style:__;
    • font-size:__;
    • border:__;
    • margin:__;
  • style = "____"
    • float:__;
  • colspan="___"
  • rowspan="___"

Things That Do Not Work

Running list of code or tags that do not work in Wikitree narratives:

Abbreviation and acronym tags using straight html: <abbr></abbr> <acronym></acronym>

Clint Norwood reports preformatted text tags <pre></pre> partially work. They do not preserve line breaks...

  • But they stop <tags> and [[markup|markup]] from being 'enabled'.

Memories: 2

On 8 May 2018 Steven Tibbetts wrote:

You can use 4 ---- to make a line to divide groups of text in the bio field.

Also, using 5 ~~~~~ in your code will put a timestamp. 4 ~~~~ will add your Wiki-ID once saved. You can then change the second wiki-id to your name on a re-edit. Both versions are clickable to your profile.

On 2 Jan 2014 David Wilson wrote:

If you want to copy and paste a link that contains an equal sign, replace the equal sign with an ampersand then pound sign then 61 then semi colon (no spaces)

Login to add your own memory.

Images: 1
Adding photos to G2G Questions
Adding photos to G2G Questions


On 7 Dec 2016 at 13:17 GMT Chris Whitten wrote:

Hi Rob. I happened to notice some people linking to this page. I really think it would be best to take this down or remove any of the style recommendations that aren't recommended. What do you think?

On 24 Oct 2016 at 02:01 GMT Scott Lee wrote:

If this is 'highly discouraged', why not take the page down?

On 3 Feb 2015 at 17:57 GMT Chris Whitten wrote:

WARNING: WikiTree guidelines have changed since this page was created. Almost everything here is not officially recommended or supported by WikiTree. When Rob started it, doing this stuff was experimental and encouraged. Now it is strongly, strongly discouraged. The full explanation is very technical. As Rob noted at the top of this page, it's at HTML and Inline CSS.

On 20 Oct 2014 at 04:30 GMT Anonymous Jones wrote:


Thank you very much for these tools. They work perfectly and enhance the overall look of any profile.

I have wanted to use the wiki ambox template but it is only available to Supervisors. So I took to coding a small snippet that mimics the ambox template. Would you be interested in adding it to your collection? It may need a bit of refinement but it works and is viewable @ Jones-22397.

Thanks a ton!  ;)

On 4 Oct 2014 at 20:51 GMT Doug Lockwood wrote:

This is great stuff. Thank you for posting this.

On 24 Sep 2014 at 15:32 GMT Julie (Fiscus) Ricketts wrote:

Love this!

On 20 Sep 2014 at 13:36 GMT Sandy Edwards wrote:

Great work. Thanks so much for making this available to all of us.

On 6 Sep 2014 at 01:45 GMT Mags Gaulden wrote:

Nice work Rob! Thanks, Mags

On 11 Aug 2014 at 15:55 GMT Sharon (Troy) Centanne wrote:

Thank you! These codes will make wikitree fun!

On 6 Jun 2014 at 19:42 GMT Kenneth Shelton wrote:

This has come a long way since DOS. Showing my age. Thank you for the post.

more comments