Month: July 2012

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

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.

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!

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.

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.

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

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.

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.

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

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.

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

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?

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.

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.

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.

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

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.

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!

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.

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.

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

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.

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.

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

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.

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

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?

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.

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.

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.