I’m pretty sure back on October 31st, I didn’t realize that I’d be taken an almost three month genealogy hiatus. I have no idea what made that happen, it just did. So I apologize for only posting diary entries for the last three months and hopefully, I’ll be getting back in the swing of genealogy here soon. Some of my plans include, updating you on the never-ending site re-design, the tragedy the befell my organization system, and get some thoughts out about finally getting around to communicating with my DNA matches on Ancestry.com. I may have only glanced at things in the last few months, but I still have a ton of thoughts running through my head!

One of the things that I want to change with the next site design, is making conversations easier to follow. I get a lot of random questions on older entries and sometimes I worry that my replies get lost in the shuffle. So I’m going to be thinking about ways to resolve this in the future. One of my more recent questions came from Kathy, who wanted to know what fonts I used on my Genealogy Binder. I previously wrote twice about my ever evolving genealogy binder. Post #1, Post #2.

If I’m being perfectly honest, I most likely change fonts almost everytime I print a new page out. So it’s always changing, but I’m definitely happy to share what fonts I’ve used and liked!

Front Cover of Genealogy Binder

On the front page of the genealogy binder, I used the main fonts that I also used in my website banner. These are probably my two favorite fonts. The cursive one is called Aquarelle and the other is called Pupcat. Aquarelle is actually a free replica of a commercial font I once had but lost in a computer failure.

• Pupcat Download: dafont.com
• Aquarelle Download: fonts101.com

One of the reasons I always seem to change my fonts, is that I need for them to be easy to read at a glance. Or maybe sometimes I just want a simple font instead of a fancy one. Most of my the fonts I use are available for free somewhere on the web.

Original Repository List page

For my original Repository List, I think (sorry!) I used another favorite Desigers. This font is also being used on the Diary of Llewellyn buttons in my sidebar.

• Desigers downlad: dafont.com

Contacts List

For my contacts list, I’m still using the font Callie Hand. It’s a very nice, easy to read handwriting font.

• Callie Hand download: dafont.com

Repository List

A newer download for me was A Song for Jennifer. I’m really liking this font a lot. Right now it’s taking up space on my new Repository List.

• A Song for Jennifer download: dafont.com

Records Ordered List

Other than using basic fonts like Times New Roman, Georgia, and Century Gothic, the other font I use regularly is called Aubrey.

• Aubrey download: dafont.com

Really though, the best advice is to just look around free font download websites and find what you like! I once had a huge addiction to fonts, though now I like to keep it a little more simple. If I missed a font that anyone specifically wanted to see, then please don’t hesitate to ask!

Here’s the part of the design I’m most sketchy about. You see, I usually just reuse an old version of my first image sprite navigation. To learn image sprites, I used this tutorial originally. I’ll try my best to explain it here though.  To start with, we have to lay the foundation for the whole shebang.

click for full size image

Here’s where we left off as far as the website goes.

click for full size image

This is where we left our navigation buttons. Now it’s time to put the two together. Trust me, once this part is done, you’ll be so happy with the results!

click for full size image

Okay, here’s our index.php file that we’ve been working on. Added to the file is now the coding for an unordered list. This is basically the nuts and bolts for a bulleted list. The tag < li > is actually a “list item”. I’ve named them all with id selectors because we’re only using these particular ones once and we’re going to need them declared for the image sprite coding.

click for full size image

This is what that coding will do to your website. Do you see the blank bullets? Look at the bottom of the page where the default TNG coding is still present. I don’t have words next to mine because I have no text between my < a > and < /a >. We’re going to do something a little cooler for our links.

already full size image

Here is the mytngstyle.css file. I collapsed my other coding section so they won’t get confused with what I’m working on now. Notice how I’ve added a note for myself about beginning and ending image sprite navigation. I do this so I know that this is my navigation buttons. Sometimes when you go back to alter things months or even years later, you forget what things are. So I don’t mess with something as important as my navigation, I make sure I know this is a don’t touch unless you mean to area.

click for full size image

Usually I like to break up my CSS coding like you saw in the previous tutorial, but because of the number of lines of code I’d have for the image sprite, I go ahead and keep this one a little more compact.

We start out with the position:relative tag. We’re doing this to establish a base for the more exact coding coming up in the next two lines.

navbuttons; margin and padding. If you’ve ever used tables before the padding section will be a little familiar. Basically what these two things are saying is that we don’t want any margin or padding added to our list. We want them to be right up against the edge of our container div.

If I said I wanted a 4 pixel padding, then then the list would start at the edge of the grid (or container div), but it wouldn’t put any text or images within that 4 pixel padding. If I were to say I wanted a 4 pixel margin, then the container div wouldn’t start until the 4 pixel margin had been applied. So in order to make sure my stuff is starting right against the edge, I set both these options to 0 pixels.

position:absolute. Now I’m going to start position my buttons, so I want to put definitive coordinates onto my list items. So I set position to absolute. Setting it to absolute means I need to give the coding some kind of coordinate to navigate to. So I set my top coordinate as 180 pixels. This is the height of my header image. I want my buttons to be directly underneath that. The width of 140 pixels and height of 27 pixels are simply the size of an individual button.

You’ll notice that the next line is for li and li a. This means I’m setting specific instructions for list items and links within list items.

I’m the first to admit I don’t always know everything. So I’ll use the example below to show you my process on getting the buttons to display the way I wanted them to. Logically because I want my links to be side by side, I should have been able to use inline links. However, I have no text set for my links, so that doesn’t work. So I set my links to inline-block, and they display, but with too many spaces between them. Therefore I ended with just using the block and float actions together and voila.

click for full size image

I jumped ahead a bit, only because I had to have the images displaying to show you WHY I had to go with a block and float tag instead of just an inline tag.

It’s confusing, I know. Now you know why I just copy my already working version and change where needed.

click for full size image

Now we’re moving onto the actual buttons. Each line is setting something different. The 1st line saying that my left positioning is set to 0 pixels and a width of 140 pixels. The second line sets a background image (my button) also with positioning set to 0 and 0. This coding will tell the website to display a 140 by 27 pixel box starting at the 0,0 coordinates of the button image. The third line is doing the same thing as the second, except it’s using a hover command to tell the code that we want to do something a little different when the mouse hovers over the link. You’ll notice the difference being -27 pixels. This is what is telling the code that we’re now reading the bottom button instead of the top.

click for full size image

Ruh Roh. When I uploaded to make sure that we were moving along nicely, we hit a speed bump. The little buffer at the top of my page is making my 180 pixel top margin a little off. I apologize in advance to my childhood math teachers. I promise I do know how to do math, it’s just that it gives me a headache when I’m sewing, couponing, and designing websites… Oh. Anyway, instead of trying to figure out how I need to adjust my pixels, I just decide to modify a little code and my image a bit.

click for full size image

I added a margin-top command to the body tag. This tells the code that I want no buffer at the top. I want it to be right at the very top of the page.

The second thing I changed was I took all the white space out of my buttons. I thought this might make it easier to get the buttons lined up. You don’t have to do that, you just might have to mess with your numbers a wee bit. To take out my white space, all I did was create a new image that was just big enough for the buttons. Then I opened my .psd file and flattened it before I copied the buttons and pasted them in the new image. It just took a few extra minutes!

I did promise I would change things as I went didn’t I?!

click for full size image

Much better! Our stuff is running over the default TNG text a little bit, but since I’ll be changing that, we won’t worry about that for now! The next step is to plug in all the other buttons coding into the .css file.

click for full size image

So we move on down the code, changing the id selector and adding 140 pixels to the coordinates each time we add a new one. This is basically telling the code which button goes to which link.

click for full size image

Here is what we’ve created today! My mouse is hovering over the Mays button to show what the hover effect looks like against the default buttons. I love the effect. It’s adding a little bit of interactivity without a ton of code which will make the page load slower.

Once I got that done, I started wondering what it would look like adding more color to my buttons, so I tried out having the hover buttons be purple. Again, I opened my PSD file and changed the gradient overlay to a purple gradient, flattened the image and copied the new layer onto my buttons image.

click for full size image

Then I changed it back because I didn’t like it. Though now I can definitely see changing color schemes maybe for a holiday theme. Not this year though, I have to stay on topic! ha!

That’s enough for today. Next we’ll finally set up our content sections and start customizing TNG! It takes awhile to get the nuts and bolts set up but at least we’re moving along!

Previous Posts:

1. RMC: Part 1 is the Planning Stage
2. RMC: Creating a Database and Installing TNG
3. RMC: My Design Inspiration Sketch
4. RMC: Programs You Might Need
5. RMC: The Site Design Images- Part 1
6. RMC: A Note on Things to Come
7. RMC: New Plan and New Background
8. RMC: Creating the New Banner
9. RMC: A Little CSS Tutorial
10. RMC: Navigation Buttons
11. The Test Website!

Disclaimer: Again I have to say that I’m not an expert. It’s possible I have no idea what I’m talking about. Everything I know about CSS and HTML I’ve taught myself over the years on an as needed basis. Feel free to ask me questions and I’ll try my best to answer them. This series is my attempt at helping people to fully customize their TNG installations.

This entry is going to show you just how far behind I am on following leads, but oh well! Such is life I guess. Anyway, months ago, I wrote an entry about how I loved being a mystery detective when it comes to my family tree. That entry highlighted Emma Carter and my search for her mother among a group of sisters. I discovered her mother was Sina Carter and that Emma married Charles Hurdle.

Thanks to a wonderful friend/reader, Magda!, I have a few more leads after this entry to get me started. Unfortunately or fortunately, it could be both, I am only left with more questions. Ha! Magda commented on the entry to say my Carters sparked a few thoughts about her own Carters in that area, so she decided to dig a little deeper to see if there was a connection. Sadly, there wasn’t, but she did find some great records on FamilySearch for me to look at and analyze!

The first record she linked was the death record of Lewis Carter, the other mystery Carter from my previous entry. The death record gives his mother’s maiden name as Sina Carter and doesn’t list a father except for the last name of Carter. So that’s still an unknown at this point. The other record Magda found was a marriage record for Emma Hurdle and Elmer Fite! The best part is it actually gives Emma’s father’s name as John Jennings. I do wonder if maybe Lewis had the same father but without any record to back up that thought, it stays a thought. So I’ll leave Lewis for another day this week and take on Emma’s clues.

After the marriage record, I immediately did a search on the Ohio Death Records to see if I’d get a hit on Emma Fite, since I hadn’t gotten one on Emma Hurdle previously.

click for full size

There was indeed a record. The name, birth date and place of death all fit my criteria. Also, this Emmie Fite being buried in Mt. Zion Cemetery also is in the positive column. I have yet to come across any of this family of Carters NOT buried in this cemetery. The only thing that was disappointing was that the mother is listed as Ellie Carter, not Sina and there is no father listed. So it’s an up in the air record. I’ll go ahead and use it and see where I go, knowing I might have to remove it later.

Since the death date was listed as 1931, I went ahead and jumped to the 1930 census to see if I could find Emma and Elmer in Clark township, Brown County, Ohio.

1930 U.S. census, population schedule, NARA microfilm publication T626, roll 1753. Brown County, Ohio. Clark township, ED 003, sheet 04-A, dwelling 96, family 97, Elmer E Fite; digital image, Ancestry.com (http://www.ancestry.com).

1930 found them exactly where I expected them to be, so I moved on to 1920… where the intrigue got started again.

1920 U.S. census, population schedule, NARA microfilm publication T625, roll 1351. Brown County, Ohio. Clark township, ED 026, sheet 10-B, dwelling 240, family 240, Elmer Fite; digital image, Ancestry.com (http://www.ancestry.com).

On the 1920 census, it lists a Meredith Hurdle as Elmer’s stepson. There are a few problems with this. I have record of Emma’s children with Charles Hurdle and Meredith wasn’t one of them. I found a death record that fit Charles for 1897. So if Meredith was born about 1902… well, then Charles isn’t the father of Meredith. Unfortunately, I couldn’t find the family in the 1910 census yet, I have to go page by page in Clark township yet. So I set off for more information on Meredith. I came across a marriage record for him and that’s when things got more interesting!

click for full size image

On Meredith’s marriage license, it gives an exact date of birth. Doing my calculations, that means he was born 16 Dec 1901. Definitely too far from 1897 to be Charles Hurdle’s son. Even more interesting is he’s going by the last name Fite and lists his father as Elmer. My first thought was that maybe he was Elmer’s son. Then I realized he was born 6 and a half years before Elmer and Emma’s marriage. Which doesn’t mean Elmer isn’t his father, just that it’s not a given fact.

Then I started thinking about it, and really I ended up happy. Happy that a boy without a father at his birth might have found a father figure by the time he married at the age of 22. Really Elmer might have been there his whole life, I don’t know. Just another one of those mysteries that keeps growing.

So thanks again Magda for all the great leads you gave me, and next I’ll have to ferret out Lewis!

I can’t lie to you, after such a long hiatus, I’ve been dreading this particular post. Not because of the subject matter, I’m just afraid of not making any sense whatsoever. Nothing for you to worry about though, because if you’re reading this, then I got ‘er done!

click for full size image

This is the image I’m going to hopefully recreate. This is the navigation buttons I created for the original re-design. However, I don’t need those same tabs anymore. I’ve re-evaluated which “quick links” I’m going to showcase on the top of the page. This means I need to remake the image instead of recycling it from the old re-design concept.

click for full size image

I start by making the base image. I made it 980 pixels wide by 75 pixels tall. I’ll most likely crop some of that height out once I get the buttons created. I just don’t like to be too cramped when I’m creating the initial image. It’s much easier to crop it off then to add it back… Okay that’s a fib, I’m just too lazy to add to the image after I’ve already started.

click for full size image

I used the selection box to “select” a 980 pixel by 25 pixel box. This will be the top line of buttons. Once I have the area selected, I make a new layer and flood fill it with my theme blue color. I’m using blue because I did try other colors but they were too busy or loud for the design.

click for full size image

Here are my two button layers. The colors are simply taking up space on the layers, because I’m not keeping them. I like to use gradients on buttons to give them more depth. However, I’m really bad at getting gradients straight. So I’ve discovered, doing a gradient overlay of a plain color is much more my speed.

click for full size image

Under my favorite menu, Blending Options, I add a foreground to background gradient overlay to the top buttons. I’m going for lighter buttons on top and darker on the bottom. The plan is that when you hover over the menu, the buttons will change from the top button to the corresponding bottom button. That means I want to see a visible difference between the top and bottom buttons. I’m going to save the base image when it’s done, that way I can change the colors later if I have to. Most likely I will, because that’s just how it goes with my designs!

click for full size image

Here are my button blocks so far. Now it’s time to decide on how many buttons I’ll be using and how big each one will be. It’s definitely a personal decision, but I’m going to make sure each button is the same width. I just like things to line up perfectly, but if that’s not your speed, you don’t have to do it that way.

These are the sections I’ve decided on for the buttons:

1. Home. Websites should always have a way back to the “beginning”, like an out clause.
2. The Blog. This will go to the main blog page but could change because of the way the site will be setup. So another good reason to keep a changeable version of the buttons.
3. Moore Surnames
4. Mays Surnames. I have my father’s side separated from my mother’s to keep it a little less confusing.
5. Contact. An easy way for folks to find my contact information
6. Diary of Llewellyn. I’m going to separate my Diary of Llewellyn posts into their own section of the website so they aren’t mixed in with regular entries anymore. This link will also hopefully lead to an index of all the entries (someday).

So that’s six sections divided by 980 pixels. That would leave 163.3333333 pixels for each button. That doesn’t work for me. It leads to too much math for me. I’m one of those lazy people who groans and can’t make a decision on how to precede from an answer like that. So I do what any logical person would do. I add another button, bring the count up to seven, which gives me 140 pixels for each button. So I’ll just add another section for a disclaimer/copyright page. See, everything worked out in the end!

click for full size image

For the next part I zoom in just enough to be able to see the grid lines on the image. This is going to help me keep my lines straight for the next step. Next, I create a new layer that I title “RED LINES OF DEATH” for no other reason then I like to name things. This layer is going to have nice, clear red lines to shape my boxes for the buttons. I’ll add more aesthetically pleasing ones at the end but first I just want to mark my boxes so I can add my text.

click image for full size

Using my select tool again, I meticulously mark the end of each button with 2 red lines. The 2 red lines will help me know that it’s the end of a button. I did this for both rows. As you can tell, the buttons are beautifully spaced. However that isn’t going to get my text in the center of the box. Since I went with a 25 pixel high button panel, I’m not going to be vertically center, I can mark the horizontal center though. For the vertical spacing, I’m just going randomly say I want at least 5 pixels of space beneath my text. I might move it higher or lower. I just won’t be able to tell until I get the text on the image.

click for full size image

To easily mark where I want the bottom of my text to be (not at all because I’m lazy of course), I use the single marquee line tool on both the top and bottom button panels. I ended up leaving 4 blank pixel rows beneath my line because the text will be right about the red line, making it 5 pixels from the bottom.

click for full size image

Once the horizontal line is set, it’s time to set the center mark. I do this because I’ve found that it’s easier to get things looking center if you’ve got an idea of where the actual center is. My eyes have been bad for my whole life, so I don’t trust myself. Which is also why I use the RED LINES OF DEATH. They are easy to see. I set my selection tool for 70 pixels wide by 75 high. This will cover the whole height of the image so I can mark the top and bottom at the same time. Now where you see the green arrow pointing is my horizontal center.

click for full size image

Now all my pretty red lines are in place. It’s time to get this party started. First though, I like to get up and stretch after this much eye strain at one time. Also I’m usually a bit on the frustrated part by this time. My math skills have always been adequate at best and all this perfect lining things up stuff always gets me tense. Which is obviously why I went into web design and sewing. Obviously I’m into self-torture or I like a good challenge. However you want to look at it.

click for full size image

You’ll have to look at that image in it’s original size, but I always make sure my text alignment is set on center. This way the text tool uses a box to mark the center of the text. If you chose right or left alignment, the box will be at the place where the text starts, so you’d have to eye where your text goes. As I’ve said before, I don’t trust myself for that anymore.

I go through and add each text separately, making sure that the boxes are on the right side of my center red line.

click for full size image

Once I’ve got all my text on there, I realize that the right side is more crowded than the left side. I quickly realize switching one of the short words and one of the long words might make it look more balanced.

click for full size image

That looks better! Now it’s time to put in the button structure lines. This isn’t a necessary step, but I like the look of it.

click for full size image

Again, not because I’m lazy but because it’s faster, I use the vertical single marquee tool to select all my vertical red lines at the end of the buttons. I flood fill these on a new blank layer.

click for full size image

This lets me use the selection tool to select the areas between the button layers and simply “Cut” out the places I don’t want the line to be. To me this is simpler then zooming in and scrolling around trying to get the exact line in the right place.

click for full size image

Then in a last minute stroke of genius… Sorry I had to. I add a “stroke” border to each button layer. I don’t know why they call it stroke. They should just call it a border, which is what it is. Anyway, I add a 1 pixel outside border to each layer in a lighter blue. This will make the colors stand out and it won’t disappear against the buttons when you hover over one. I chose an outside “stroke” because it was an easy way of adding it to the top and bottom of each layer. Since the left and right go off the end of the image, the program can’t add a border to it.

click for full size image

Voila, I now have a finished product. Before I flatten the image and save though, I make sure to save a .PSD version of the file. This keeps all layers intact so that I can come back and quickly edit them later. I make it a habit to keep something like this for every website. Who knows when you might decide to change up which things you link in the top menu!?

click for full size image

I almost forgot. I turned off my RED LINES OF DEATH (sorry I enjoy that too much) layer instead of deleting it. This is so that if I bring up the .PSD later, I don’t have to remake the lines for any reason. I like to keep all my “construction lines” for later use. Since I hid the layer from view, when I went to flatten the image, the program wanted to know if I wanted to discard the hidden layers. For the sake of flattening I said YES. However, if you haven’t saved your .PSD yet, I would do that first before flattening the image or closing anything. If you chose yes, it will discard that layer and merge everything visible into one layer for saving.

click for full size image

When you click Save As… there should be an option under “Format” for a Photoshop or .PSD file. I usually do this one first and then flatten and save as a .PNG or .JPG. For almost all my images I choose .JPG but for the buttons I chose .PNG because I want them to remain crisp and not get pixelated at all in the compression of the file.

That’s all I have time for today (because it’s my birthday)! I’ll try and come back early in the week next week to show how to get the image set up on the website. I’m hoping I’m helping you guys just a little bit. I know it’s more tricky then just using a template but once you’ve done it once, you get better at it and it gets easier!

Previous Posts in this series:

1. RMC: Part 1 is the Planning Stage
2. RMC: Creating a Database and Installing TNG
3. RMC: My Design Inspiration Sketch
4. RMC: Programs You Might Need
5. RMC: The Site Design Images- Part 1
6. RMC: A Note on Things to Come
7. RMC: New Plan and New Background
8. RMC: Creating the New Banner
9. RMC: A Little CSS Tutorial
10. The Test Website!

Yesterday I wrote about my first productive day back from an unexpected break from technology. As with all research, one thing can always lead to many more avenues of information. Yesterday was no different for me. I talked about my marriage possibility list and how I was going to use the list to see if I could find out the spouses of my 5th great grandfather‘s siblings. Often when I’m coming back from a break, and I’m looking for something specific, I re-examine the records I’ve already found. So yesterday, I decided to go back through the death records I had for all of the children of James Love and Janet Fleming.

click for full size

On the death record of Margaret Love, the informant is listed as Andrew Ritchie, nephew. I’ll take that clue! When I looked at my information for Margaret’s sisters (since the nephew did not share the Love surname), I saw that her oldest sister Elizabeth married James Wylie and died 2 years later with that surname. That means she was out as Andrew’s mother. The second eldest sister, Janet, was unaccounted for, which left her as an option. The youngest sister, Jean, was also unaccounted for at that time. That left me with two sisters and one nephew. That seems to be my story a lot! Trying to find out which sister a niece/nephew belongs with.

So I went to my trusty “possible spouses” list, and you can even see in my photo from yesterday who the obvious answer was:

Yesterday’s post

With that hint, I verified that Jean Love and James Ritchie had a son named, Andrew.

They did.

My next step (for now) was to search out a death record for Jean Ritchie. I wanted to verify that her maiden name was Love and that her parents were James Love and Janet Fleming. They were.

click for full size

So with that, I’ve tracked another sibling of my 5th great grandfather, and I’ve added another will to my to do list. Those are 5 and 10 credits a piece sometimes, so they come when I’m really blocked or feeling like I want to spend some money. What a rebel I am!

James Love and Janet Fleming’s family

All that yesterday on top of surgery on my great grandmother Llewellyn’s sewing machine (according to Grandpa Moore it was hers)! Today I think I’ll stick to some office work for the rest of the day and make sure all my logs and lists are up to date. I also have to add James and Janet’s family to my database on the website so that when I talk about them, you can find out who I’m talking about.

P.S. Just because I was away, doesn’t mean I didn’t notice that nifty new feature on FTM2012!

Web links? Yes please!

You have no idea how much easier it will be to update my website manually when I’m researching now!

Hopefully, I’ll be able to work on the next RMC update tomorrow and Friday! I’m really ready for the redesign to be moving forward again!

Note: As part of the redesign I’ll be making a disclaimer page. Until I get all that sorted out, just to be clear, I have no affiliation with anyone for any perks. I just really love the tools that I use and I like to get excited about new finds. I do not currently make any money for this website, so please don’t sue me for any reason. I’m really wanting to save up for an iPhone 5 come December. ^.^ <– That’s my giggly face.