WorldConnect and CSS

Would you like to add some style to your WorldConnect Database results. Would you like those pages to look more like your genealogy web site?  My thanks to Hugh Watkins for asking the question and Pat Asher for providing the answer on the Freepages-Help Mailing List.

Examples:


Instructions:

Open Notepad and create a file with the following lines.

body {
	background-color: #ffffff;
	margin-left: 95px;
	background-image: url('images/fall-leaves.jpg');
	background-repeat: repeat-y;
}
h2 {
	font-size: 250%;
	color: #ffffff;
	background-color: #571F10;
	padding-top: 10px;
	padding-bottom: 10px;
}
A:LINK {
	color: #A22E15;
	text-decoration: none;
	font-weight: bold;
}
A:VISITED {
	color: #AC712D;
	text-decoration : none;
	font-weight: bold;
}
A:HOVER {
	color : #AC712D;
	text-decoration : underline;
	font-weight: bold;
}
A:ACTIVE {
	color : #D77A7A;
	text-decoration : none;
	font-weight: bold;
}

Change the colors to match your site design or to any colors you wish to use. Do NOT go overboard as too much CSS might mess up the style sheets that WorldConnect uses. If you want to use a graphic image on the side of the page, do not choose an overly large image. Adjust the left side margin so the content does not cover the image. And above all, make sure the image you choose is available online.

Step Two: File > Save As > Choose where to save the file in your Web Site directory on your hard drive. To the right of File name type in wc.css To the right of Save as type, select All Files Click the save button.

Screenshot Save File Dialogue Box.

Step Three: Upload the wc.css file to your website - FreePages or another site BUT NOT YOUR WORLDCONNECT SITE. I chose the domain with the shortest url. You will see why shortly.

Once the file has been uploaded you will need to make changes to your World Connect Options. Sign in to your WorldConnect database using one of the methods listed in the previous section.

The Manage Trees screen displays the selected database Tree Information and Tree Settings. Tree Settings is the one you will work with.

Screenshot Tree Settings.

Select Display Options > In the Title field, enter the following code all in one line. The code should appear as one line in the input box - no breaks. The http:// should refer to the actual location of your css file. Use the full http address. The title should follow. Keep it short as it appears only 128 characters including spaces is allowed for that field.

Adjust the code to reflect the url for YOUR style sheet and the text content to what you want displayed. NOTE: This is why I chose the shortest domain name to upload the style sheet to.

<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://www.the-gearys.com/wc.css">
Geary/Gary Family Genealogy

Screenshot Display Options Title.

Click Update and check to see if the page looks like you want it to.

If you sign in directly to the User Setup/Edit page at WorldConnect > Choose Advanced >

Advanced User Set-up Dialogue Box.

Choose Advanced > Under #5 Title add the following code:

<LINK REL=STYLESHEET TYPE="text/css" 
HREF="http://www.the-gearys.com/wc.css">
Geary/Gary Family Genealogy

At the same time you might want to add more detail to #15 Page Heading and #16 Page Footer. NOTE: 511 Characters Allowed. View screenshot

Header Code

<b>Tracing the Little Family from Rowan County, NC, into Lincoln County, TN <br>
Tracing the Winstons from Virginia into Tennessee and Alabama<br>
Tracing the Bayless Family from Long Island, NY into Virginia, Tennessee, and Alabama<br>
Tracing the Descendants of Josiah Brandon, A Revolutionary War Soldier<br>
Tracing the Burley family of Henrico County, VA.<br>
Also Tracing the Oldhams of Arkansas and the Boone Family<br><b>

Footer Code

<center>Much of the information in this database is well documented. Some is not. I am adding information from the Social Security Death Records, as well as obituaries as I have time. Corrections, additions and comments welcome.</center>

The easiest way to do this is to write what you want with word wrap off. You may need to copy and paste a line at a time if you let the text wrap.

Click Upload/Update. Because you haven't given WorldConnect a GEDCOM file address during this edit of your settings, it automatically knows you want to update your display settings and it applies the new setting to your existing (and future records) at WC. Check and see that your edits look like you want them to.

Click Upload/Update and check to see if the page looks like you want it to.

View Screenshot

View Little Family Genealogy

The tutorial, World Connect and CSS, is included in the Planning a Genealogy Website 2nd Edition EBook which you can download FREE.

Want to add images or working hyperlinks to your WorldConnect pages? See World Connect and HTML.

Pat Geary.
Copyright © 2011 Pat Geary of Genealogy Web Creations, All Rights Reserved
Revised and Updated February 2011