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:

Hugh Watkin's WATKINS LAPHAM 2005 database at WorldConnect
Corresponding Website Homepage for Hugh Watkins
Corresponding CSS file
My Geary Family Genealogy database at WorldConnect
Corresponding narrative website Geary Family Genealogy
The example used below is the CSS file for this site.
Pat Asher's Example

Instructions:

Open Notepad and create a file with the following lines.

body {background-color: #F5ECDD;}
H2 {
	FONT-SIZE: 200%;
	COLOR: Black;
	BACKGROUND-COLOR: #ccccbf;
}

A:LINK {
color: #663300;
text-decoration: none;
font-weight: bold;}

A:VISITED {
color: #006600;
text-decoration : none;
font-weight: bold;}

A:HOVER {
color : #D77A7A;
text-decoration : underline;
font-weight: bold;}

A:ACTIVE {
color : #D77A7A;
text-decoration : none;
font-weight: bold;}

Change the colors to match your site design. Use as much of the coding as you want but don't get to greedy. Too much CSS might mess up the coding WorldConnect uses.

- 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.

- Upload the wc.css file to your website - FreePages or another site BUT NOT YOUR WORLDCONNECT SITE.

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 below.

METHOD 1 - You can now sign in to RootsWeb from the main page and access all of your accounts. For now, signing in directly to your WorldConnect database seems simpler. For more details on Member Accounts

RootsWeb Sign In Screenshot.

RootsWeb Secure Sign In Screenshot.

Screenshot of My Accounts Page

If you have already setup your accounts, you will see your WorldConnect Databases listed.

Screenshot WorldConnect User Codes.

Choose the one you would like to work with and click Edit.

You will see two windows Tree Information and Tree Settings which is the one you will work with

Screenshot Tree Settings.

Choose Display Options (click for screenshot)
In the Title field, enter the following code all in one line

Screenshot Display Options Title.

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

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

OR METHOD 2

Sign on to the User Setup/Edit page at WorldConnect

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

Advanced User Set-up Dialogue Box.

<LINK REL=STYLESHEET TYPE="text/css" 
HREF="http://users.adelphia.net/~gearyhome/cw.css">
Geary/Gary Family Genealogy

The above 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.

#13 would be the URL of the companion website you are linking to.

#14 would be the title of that site.

View screenshot

#15 would be the header for the site.

#16 would be the footer for the site.

The Header and Footer in WorldConnect setup may contain 511 characters.

View screenshot

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

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

Download WorldConnect and CSS in pdf format