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.

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!

Before I jump into the most complicated part of the tutorial (in my opinion), I wanted to do a little bit of CSS learning. I don’t want to leave you in the dust by being too vague about CSS coding. My only hope is that I make things a little clearer instead of more confusing.

To get started it might be easier to take TNG out of the picture and just show you the basic purpose and functionality of CSS.

New File from Template Dialog Box (click for full size)

Resulting Blank HTML Page (click for full size)

When I first open up my HTML Editing program, I can start a blank HTML document. I usually use this option because it will fill in all the important parts the browser needs to determine what exactly the page is trying to do.

The above example is a little more sparse then what I’m used to but it’s perfect for this example. This shows the structure of an HTML page.

• html: This tag opens the page and tells the browser exactly what type of code it’s going to be interpreting.
• head: The head tag is an important one. A lot of the behind the scenes work happens in the head tag. Our next step will be taking place there.
• title: This is simply telling the browser what to display in the title bar of your browser.
• body: This is the meat and potatoes of your website. You content is going to go here.

Adding a link to the stylesheet (click for full size)

The highlighted section above shows how I link my separate stylesheet to my HTML page. Now whatever CSS coding I put in testpage.css will apply to whatever page is link to the stylesheet.

Now lets learn some of the more basic coding.

Some Basic CSS code (click for full size)

I used the ‘body’ tag as the example to show you that whatever CSS code I apply to the body tag in this file will apply to my HTML page to whatever is between the body tags.

The only exception to this is that the code will always use the most recent open tag.

For example:

body

div one

div two

/div two

/div one

/body

So using the example above you can set a default font size and color in your body tag. For me, my divs are usually one for content and one for a navigation menu. So if my div one is my content and I can set it to have a slightly larger font size or even just a different color. Now whatever I set the font at for div one will be for the whole thing until I either close the div tag or open a new one. It’s a heirarchy that once you realize what’s going on, it’s actually quite fun to mess around with… Well, as long as you remember which tag is which (why I leave notes) and then remember to close them (again with the notes).

Example CSS page (click for full size)

Example HTML Page (click for full size)

Above I had two example pages. One is a CSS and the other an HTML. I  want to show exactly what divs are in a very visible way.

Test Page (click for full size)

You can see the two different boxes in the example above. However we don’t call them boxes in CSS because boxes are something different that we aren’t getting into right now. Now lets play with the divs a little bit.

Next Example CSS (click for full size)

Next Example HTML (click for full size)

Example (click for full size)

Now if I wanted the text at the bottom to be it’s own div and not wrapped around the other two, I could by creating another div.

Final HTML example (click for full size)

As you can see, I nested another div into backbone of the site.

Final CSS example (click for full size)

I made it the full size of the backbone, and I floated it to the right. I did this so that it will come out on the bottom of the longest section. If I had floated it to the left, it would have been covered by the right div.

Final Example Page (click for full size)

Now on the example page you can see that the last paragraph has default back to the body tag style choices. Also, the gray background no longer goes behind it because there isn’t anything continuing the backbone div down the page. It is still open, but it doesn’t have anything to put a background on.

Today’s post was mainly to help set up the basics of what I’m trying to explain about CSS. I really recommend playing with CSS options on a few tutorial sites I love:

• w3schools.com CSS tutorial
• CSS3.info <– This one shows off some of the newer things CSS can do.

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

Today I’m going to show the process I use to create my website banners. Not all these options will be available with your graphic programs, so you’ll just have to play around with the program and see what works for you. You never know what hidden talents are in those programs!

The banner I’m re-creating (click for full size)

Above is the banner that I’ll be creating. This is the original banner I made for the new website over a year ago. I’m not going to recreate it exactly, because I don’t remember the exact settings I used, so I’ll try and re-create it the best I can.

Color Palette

This is the color palette that I’ll be using for the new design. I wanted to test the colors at both 100% opacity and 50% opacity. I know the colors are glaring to see by themselves, but mostly they will be used to accent certain things. Hopefully I’ll be able to balance them well.

Also on the color palette, I made sure to note down which fonts I’m going to be using. I use Aquarelle for the Moore-Mays.org in my logo and Pupcat for the Misadventures of a Genealogist subtitle. I’m planning on using Century Gothic as the main font on the website, but that can change. I want to make sure the site isn’t too hard to read, so I’ll have to wait and see how well the font looks in the design.

I add the text first (click for full size)

I usually add the main focal point for the banner first. Most cases that would be the text. I want to the text to stand out and not bleed into the background. I want to make sure that it is in place before I start messing with anything else. I’d rather change out a background design/texture then change the text of my banner. I’ve been using the same text for my Moore-Mays banner for at least 5 years now.

The text is added in my blue color (#0385f9), and I’ve tried to center it in the image. My next step is to add a slight curve to the text to give it an extra umph. Is umph an adjective? Oh well. In order to add the slight curve I use the “Create Warped Text” tool on the top bar in PhotoShop. You’ll have to look around your program for something similar if it’s not called Warped Text.

Warp Text tool

There are a few options under the “Style” menu, but I chose the ‘Arc’ option. I also chose a +15% bend for my text.

Blending Option > Bevel and Emboss

Remember when I told you I loved the Blending Options section? Well, we’re using it again! It’s fun to play with these options and see what it does to your image. This time I’m using Bevel and Emboss to create a more 3 dimensional image. Above are the settings I’m using on this project.

Copying Layer Style (click for full size)

Okay, after hitting okay on the bevel and emboss I go ahead and add my subtitle in under the other text. I like how with the bend, both lines of text line up. I want the same bevel and emboss on the subtitle as I used on the title. To do that without going back into Blending Options, I right click on the title layer and select ‘Copy Layer Style’. To paste it, I just have to right click on the subtitle layer and select ‘Paste Layer Style’. Then my text will match exactly!

Progress So Far (click for full size)

Here’s what my progress looks like so far. It doesn’t look like much yet, but wait until we start adding in the background details!

Adding the next layer (click for full size)

I’m going to use what PhotoShop calls ‘Brushes’ for these next steps. In order to be able to really manipulate the next few steps I’m going to add them to new layers so that they are independent of each other.

Creating my own Brush (click for full size)

Once my layer is created, I open up one of my ancestors census images. In this example I’m going to use William Moore’s 1870 Census record from Chicago. This is the first appearance of a Moore in a census. I can’t go any earlier for them in the census then this, so I like to use it in my banner as a sentimental thing.

To create a brush from this image I go to Edit > Define Brush Preset. A screen comes up to verify the name of the brush. I just leave it as the file name and hit OK.

Brush Menu

Here you can see that it’s added the brush to the end of my Brush menu. I make sure that I’ve got my banner file back up and select the census brush. Unfortunately, the brush doesn’t translate well into a screencap. However, I can tell you it will look like a plain outline of the census image. So I was able to line up my ancestor’s name so that they were visible on the screen.

Brush results (click for full size)

Looks good! I’m going to edit that more later, but for now I want to create another census brush from another ancestor. I created a new layer for that brush so that I can edit both census brushes without it effecting the other.

The second brush (click for full size)

After adding the second census brush, you can definitely see the dark overlap of the images. I could have cropped the images a bit to save on this but I can just fix it really quick with a great little tool. The blue arrow is pointing to the “Mask” tool. I love that tool almost as much as I love the Blending Options.

The Mask Tool (click for full size)

The arrow pointing to the Layers menu shows that there has been the addition of something to the current layer. You should also notice that the colors have been changed by the program to black and white. Black will subtract from the layer and white adds to it. Think of the added white box as a mask over top the existing layer. Adding black to this mask is basically you painting a mask over the layer and using white is like erasing that mask. So I use black to clean up my edges on the census layers and make it a little less glaring. The arrow pointing down is pointing to the place on my actual image where the black is showing on the mask box on the side.

Merging the two Census layers (click for full size)

After cleaning up the image, I merge the top census layer down to the second census layer. This will make the census layers as if they are one layer now. Any editing done to those images now need to be uniform, so it’s better to have them on the same layer.

Until this point, I wasn’t worrying too much about the background being way too distracting from my text. It’s time to fix that now, and it’s real easy!

Changing the Opacity (click for full size)

Making sure I have the Census layer selected, all I have to do to lighten up that layer is to take down the opacity. I chose 50% on this particular banner. Depending on what you’re doing you might want to make it less noticeable. I don’t want to take it down too far because I like being able to pick out my ancestor’s names in the banner.

New Layer Again

Now I’m going to add another pop of color into the banner. I’m kind of known in the outside world for loving pops of color and I want to finally show it on my website! I’m naming this layer the ‘Pink Layer’ so I know it’s easier to tell later which layer is which. I set my initial opacity to 40% but after playing with the brushes in my arsenal some, I ended up putting it back to 100% for the next step.

Adding a pop of color (click for full size)

Well, that was definitely a pop! I should mention that I’m not sure where I got a lot of my brushes from. I used to be an active member in some graphic editing communities and there were a lot of free brushes being created and shared at the time. I really wish I had kept better track at the time because I love some of these brushes and would have like to give the creators credit.

Blurring the Pink a bit

To take a bit of the sting out of the pink, I used a Gaussian Blur on it. After the blur, I changed the opacity down to 20%.

Adding some Blue (click for full size)

After the pink was done, I decided to add some blue back behind the lettering. Seeing the blue, you can actually see the extra dimension of the lettering now. This time I just used one of the PhotoShop brushes to fill in behind the text.

Lower the Opacity on the Blue (click for full size)

I lowered the blue layer opacity to 20% also, to match the pink. It still wasn’t quite what I wanted though.

Another Mask (click for full size)

To take a bit of the blue away, I added a mask to the blue layer and used the same faux finish brush from the last step to subtract some of the blue from the image. This gives me exactly what I was looking for!

To finish off the image, I go to Layer > Flatten Image. Then I save the image and upload it to my server. Now we have to add it into the website.

Adding a new id selector to our css file

I bring up the mytngstyle.css file. I add in another selector, this one I name #two. You’ll notice that this one is 980 pixels wide this time. We’re going to center this one inside the 1000 pixel one.

Adding the image to index.php

I add the #two selector in right below the #one selector from last week. You’ll notice I indent things every level I go. So the #one selector is the first level, then the #two selector fits inside that one, and finally the banner image is going inside the #two selector.

Closing the Tag

Don’t forget to also close the tag at the end of the page.

Final Product for Today (click for full size)

Here’s our final product for this week!

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. The Test Website!

Disclaimer: I hope this tutorial will help others to customize their own websites. I don’t claim to be an expert in web design or TNG. I am just hoping to show others how my design is made so that they might get an idea of how to do it themselves. I have no affiliations with any of the programs or websites mentioned in this tutorial. I only own anything that is on the moore-mays.org domain. I am not perfect and I will mess up in the presentation of this design as I go, but I will fix it as I go. The purpose of this tutorial is to show that you will mess up and that you can fix it without having to start all over again.

Okay, I previously showed you how to install TNG on your website and then apply one of their templates. That “beta” site is still live, over here. However, for the purpose of continuing the tutorial, I’m taking it off the pre-made template. This way you’ll be able to see the site as it progresses. I want to get this done this summer, but for the sake of quality and not rushing, I’m thinking about just posting one entry every Friday. That way, it’s before the weekend, and you’ll have time to ask questions about certain aspects before we move on. If I get questions, I might even do a Wednesday entry with the answers (if time permits!).

basic idea of new design (click for full size)

Okay, this is the screenshot of where I was when I decided three columns was too much for my fixed width design. I’m going to use the basic idea from this design, and build a two column design that hopefully translates into a WordPress and TNG layout that functions well. I’m hoping the changes I want to make to both program’s navigation will aid me in this.

First things first, we have to catch up to where we left off the last time.

Back to Square One (click for full size)

Okay, here is where we’re left once we’ve installed TNG onto our website. Very basic. This isn’t anything to be scared of though. This is as blank as it can get, which means there’s PLENTY of room for customization.

Looking up at my target image, I know that I need to create my fixed width background. My current fixed width, content area is about 800 pixels wide and the menu area is about 150 pixels wide. I want to increase it slightly in the new layout. So my total 950 pixel layout will now stretch to about 980 pixels. This doesn’t seem like a lot in the grand scheme of things, but in website design, it’s a nice little room adjustment. I could have spread it out more, but because this is a fixed width, I don’t want it to seem too stretched out on a computer screen, or seem to large to comfortably view on a smaller computer screen. I can’t help the appearance on a smaller tablet or netbook device. Hold on, that’s not entirely true, I can control it, but I’m choosing to allow my design to stretch a little so that the TNG program and WordPress don’t look scrunched into a very small space. As you can see from the above example, the space fills up quickly!

Next Step: Make a new image (click for full size)

Okay, my next step is making a new image in PhotoShop (or your program of choice). My image is 1000 pixels wide and 250 pixels high. This image is going to be cut down some later, but it’s easier to work with if it’s bigger.

Next, Make another image (click for full size)

This is going to seem a little confusing, but this is the easiest way that I’ve found to get the background centered without too much fuss. I make another new image, this one the width I want my actual layout to be. So this one is 980 pixels by 250 pixels. Then I hit Ctrl +A to select the whole image. Then I hit Ctrl + C to copy this image.

The next step is to bring back up the original 1000 pixel wide image and hit Ctrl + V to paste your 980 pixel wide image directly onto your 1000 pixel wide image. Since both my backgrounds are white it just looks like a white block. However, that 980 pixel wide image is now directly in the center of the 1000 pixel wide image as a new layer.

Now if I were to change my background color on the original 1000 pixel wide background, you’d be able to see a difference.

Your perfectly centered white box on a grey background

It might be hard to tell in a scaled down version, but if you click for full size, you’ll definitely see that I changed the background layer to a grey color instead of the white. It’s going to be up to you to decide about your color scheme. I’m choosing to stick with a white background on my content, because it will make the text easier to read. However, I wanted my background to be a slightly different color so I’m choosing to do a light grey.

This isn’t the end to my background customization though. I want to add a little bit to make sure that my content pops from the background. So I’m going to add an outer glow to it. Are you ready?

I use the ‘Blending Options’ selection in PhotoShop

I right click on my ‘Layer 1′/white background. Then I chose the option titled, ‘Blending Options’. This is what it is called in PhotoShop, if you are using a different program, you might not have these options or they might be named something else.

Blending Options

The Blending Options are probably my favorite tools in PhotoShop. We’ll also be using the box a lot when we get to the banner section of the tutorial. For now I want to stick to the ‘Outer Glow’ screen.

My Outer Glow settings

These are the settings I’m using on my Outer Glow. I changed the Blend Mode to Normal. The Blend Modes will affect strongly the way your image will look. For my images, I usually stick to normal, unless I’m looking for a specific effect. Which I’m not at the moment, so we’ll just stick to normal for the sake of this tutorial. I also set the Technique to Precise. I’m doing that because I’m using this image as my background image. This image is going to repeat all the way down my screen. So if I use ‘Softer’ then the pattern is going to look funky. Precise makes sure that the gradient is the same all the way around whatever the glow is surrounding.

The image is previewing in the background, but my image capture program just catches the foreground window. I do this so that there’s not a lot of clutter in my screenshots and they’re easier to edit. This is what my glow looks like on the edge of my white background.

Precise Outer Glow

Full size background image (click for full size)

There is what the background image looks like with the glow. Technically I can leave it like that and it will repeat all the way down the page. However, I don’t need all that image. It’s basically wasted pixels like it is. I only need one line of that to actually repeat down my website. That will make the size of the image considerably less. Though now you see why I said working with it bigger is easier!

There are two ways I can do the next part. I can use the one line selection tool to select only one line, then copy and paste that into a new image. The other option is to just use the crop tool to crop this image down to what I want it to be.

I chose crop (click for full size)

I chose to crop the image. Since I’m cropping, I’m going to settle for an image that’s larger then 1 pixel high, but still very small in file size.

My final image (click for full size)

My background image turns out to be 1000 pixels wide by 18 pixels high. The white area is exactly 980 pixels wide in the middle of the image. I save the image as ‘background.jpg’. You can name it whatever you want, but just remember the more you code, the more likely you are to confuse yourself, so keep it simple and explanatory!

Now comes the coding portion. We’re only going to be putting up the background image for now. So open up the mytngstyle.css file that came with your TNG installation. You can open it in Notepad if you don’t have an editing program. I recommend using some kind of HTML editor as most actually have the code in the program that will help you as you learn the proper commands.

My blank css file (click for full size)

Above you will see my blank ‘mytngstyle.css’ file open in Komodo Edit. It’s important to note that when you see the /* words surround by these characters */, this is a way for coders to leave notes for themselves in a CSS file. Anything written in between those symbols won’t be read by a browser and interpreted as design code. There is another way to do this in an HTML or PHP file that I will show you in a few minutes.

Changing the CSS file (click for full size)

Here are the changes I made to my CSS file. Now I will explain them.

• body: The body is basically what it sounds like. This command changes the entire background color for anything between the < body > tags in the website. This will only be over-ridden by another body tag for a different design code.
• #one: This is probably going to be the most confusing part, but once you’ve got it, you’ll never go back to any other way of design. Basically there are two type of “selectors” in CSS coding, id and class. ID is for something that is only used once whereas class is something that is repeated. For example, I’m using the id of #one for my 1000px  wide layout command because this isn’t going to be repeated at any other time in my layout. For me, I number my id selectors as a number because you don’t know what other selectors are named in the TNG and WordPress coding, therefore, you want to choose something that you know isn’t being used. You can choose anything you want as long as it’s unique to your code. Class selectors are reserved more for text and image commands. These you might use over and over again, like a link color or certain way to display images. I use class selectors also for layout reasons I’ll show you when we get to the customizing of the menu.  IDs are always prefaced with a hashtag (#idone) and classes are always prefaced with a perioud (.classone).

A great reason to have an HTML editing program

It’s a great idea to have an actual editing program for the reason you see above. You can see while I’m typing the program is showing me exactly which commands I can use with the tag I’m using.

• width:1000px: Obviously, I’m using the width command to set #one to 1000 pixels wide. It’s going to be as wide as my background image. Since I’m doing this design as I write the tutorials, I might have to make some changes later. I have to get further along in the design to see if I’ll have to do the background another way, so that everything lines up correctly.
• margin:auto – This is basically telling the page to center the #one box we’re making. Another way to do this would be to specify margin-left and margin-right set to auto. However, because I’m not currently using any other margins within this id, I don’t have to specify.
• background-image:url(”)- A lot of people might group their background tags together, but for the sake of my sanity as I progress and this tutorial, I’m going to split up each command so it’s easier to break apart what each section is doing. The url part usually trips me up somehow. You may find you don’t need to add the /test/ section in. My test TNG installation is in a subdirectory, so I definitely need to add the / before test, so that the code can pick up where I’m going. If TNG was installed in my root directory, I would have been able to just put /img/background.jpg or sometimes you can even leave off the first /. It all depends on where your installation is on your server.
• background-repeat:repeat-y- This command is telling the code exactly how I want my background to repeat. If I wanted it to repeat with a tile effect both vertical and horizontal, I would have put background-repeat:repeat. Just horizontal would have been repeat-x and just vertical repeat-y. Make sense?

Editing the index page

Now we have to change our index.php page so that it will know to read our css page for the commands. I’m using the div command and telling it to read the “one” id from the css page. Also, after that you can see I left a note for myself. Just like in a css page, you can leave notes for yourself. In this instance, by putting my note in between  < !– and — > it leaves a message for myself. You can leave a sentence describing what that command is supposed to do if you want. I’ve been none to put the widths in a complicated design or a description of what that particular command is (ie. 1000px wide or 1000px div containing the core design layout).

You have now opened a tag and all tags MUST be closed. Since this div is going to be the container for my whole layout, I’m going to the bottom of the page.

closing the tag

As you can see, I went all the way to the bottom where the body tag is being closed. I want my main container to end right before the page ends, so I close the tag right above that body tag. Then I leave a note for myself, noting which tag I’m closing. My layouts usually have quite a few divs, therefore I need to make sure I’m closing them all or my layouts will have serious malfunctions.

I’m going to end it there for now, upload my index and mytngstyle files and see exactly what we have.

Today’s final product (click for full size)

I know it still looks like nothing but it’s not bad to start with! We’ll pick up here next time.

In the mean time if you’re wanting to get a little more familiar with CSS coding, there’s a great website set up here: http://www.w3schools.com/css/default.asp. That should help you learn a little bit more about what exactly we’re doing here. I’m not the best teacher when it comes to these things!

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. The Test Website!

If you have questions feel free to post a comment. The comment section isn’t the easiest place to show examples, so most likely I’ll post a Q & A post sometime Tuesday or Wednesday.

Disclaimer: I hope this tutorial will help others to customize their own websites. I don’t claim to be an expert in web design or TNG. I am just hoping to show others how my design is made so that they might get an idea of how to do it themselves. I have no affiliations with any of the programs or websites mentioned in this tutorial. I only own anything that is on the moore-mays.org domain. I am not perfect and I will mess up in the presentation of this design as I go, but I will fix it as I go. The purpose of this tutorial is to show that you will mess up and that you can fix it without having to start all over again.