More Color Tweaking

Since I felt like I was neglecting the Pressbook Collector site, I decided to clean up the colors and fonts a bit. There weren't a ton of changes. I just tried to match the colors on the site with the colors in the header (as much as possible).

I also changed some of the fonts in the CSS file to make it look more like the inside of a pressbook. Hopefully it looks a little bit better. I'll start working on a bit of SEO next.

The Site Made a Sale

I was looking through my Commission Junction stats for yesterday and noticed that the Pressbook Collector site had its first sale. I'm not sure where it came from though because I failed to add any kind of hit counter to the page. That's either a sign of encroaching senility or of having too many irons in the fire!

The Commission Junction stats show that it's had fourteen clicks through to eBay and the one sale. Even more encouraging is that the sale was for a pressbook:

Ok, so the commission was only $0.83 on this one item, but since I haven't done any SEO work on the site yet, it should give an indication of just how powerful BANS can be. Someone was probably searching for Pressbooks in a search engine, found the site, clicked one of the items, and bought something.

Since I forgot to add a hit counter to the site, we'll never know for sure. I'm going to remedy that right now though. If this is all old hat, just skip the rest of the post; for the rest of you, I'll show how I set it up.

I use Statcounter for all of my hit tracking. Some people prefer the high-level analysis that you can do with Google Analytics, but I like the granularity Statcounter provides. Heck, they're both free, so I suppose you could put both on the same site. Since adding them to your sites works the same way for both, I'll just walk through one here. Again, I'll assume that you're using a BANS site (since that's the gist of this thread).

First, set up a free account at Statcounter if you don't have one already. Once your account is set up and you have logged in, click the "Add New Project" link on the main page:

Fill out the name of your web site, its address, then choose a category and timezone and click "Next." Congratulations! Your project has been created! OK, so you still need to configure it and get the code (I don't know why they get so excited at this point). Click the "Configure & Install Code" arrow to move to the next step. I almost always choose an invisible counter, but you can use your judgment here. Just choose one of the display options and click next again.

It will ask you where you want to install the code to help you make it a bit easier. Just choose the option that says "No, I want the default install guide" and click "Next" again.

Now here comes the fun part. You'll see a bunch of code in the middle of the screen:

If you click inside of the box, it will highlight all of the code for you. Then copy the code to your clipboard (steps 1 and 2 below the box of code tell you how to do this if you don't know how). Now you need to insert it into your page.


Switch over to your BANS admin page (log in if you need to), and click on the "Template" link on the left menu. Once that loads, choose the "footer.php" link for your chosen template (see 1 and 2 below):
Now it gets really ugly! Not really. This is pretty easy. Inside of the code window, scroll all of the way to the bottom and find the last two lines that look like this:

</body>
</html>

Click in front of the "<" on the "</body>" line (use your arrow keys if you aren't sure that you're in the right place), then paste in the code you copied on the Statcounter site. If you don't know how to do this, hold down the control key on your keyboard and type the letter "v" (if you're a Mac user, you're on your own since I don't know the keystrokes). Then make sure to click the "Update Footer" button at the bottom of the page:
That's all there is to it. As you get visitors to your page, you'll see them show up on the Statcounter site. Their free service only saves 500 visitors per site, but I've found that it's enough to get a good understanding of traffic patters of your visitors.

On another note, I'm taking a few days off from work over the weekend, so I'm going to try to finish up the pressbook site. It's very close already, but I'm not satisfied with the page colors. Then I'll start some SEO work to see if we can start getting some real traffic.

Till next time.

More Template Changes

I'm going to be changing the pages colors to match what I did in the header. If you aren't familiar with how they colors are defined on web pages, it can be a bit intimidating. In basic terms, they are defined using the amount of red, blue, and green in the color. That's easy enough, but they are defined using hexadecimal which begins looking like some type of alien language for the uninitiated:

#ffcc22

Here's how it works in a nutshell (without worrying about all of the math). The first two characters are the amount of red, the next two are green, and the last two are blue. The higher the number, the more of that color there will be, and each digit goes from 0 to f with f being the highest (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f). If you want all red and no other color, you would use #ff0000. All green would be #00ff00 and all blue is #0000ff. The other two of interest are black (no color): #000000; and white (all colors): #ffffff.

If you're lost, don't worry. You don't really need to know all of this. Most graphics programs will tell you the RGB values of a color, and there are some handy color-picking tables available on the web.

In my case, I want the background parts of my page to be the same green as the background of the header. Looking back at my image editing software, I see that it was #75bb4e. I'll make the following edits in styles.css to set this color (only the changes sections are shown):

#header {
margin: 0;
padding: 0;
height: 334px;
width: 100%;
background-color: #75bb4e;
}

...

body#background {
background-color: #75bb4e;
}

Similarly, I'll update the test portions of the page to be the aged white color: #efece5. That's in the following sections. You may not want to make all of these the same color, but it works for the look I'm going for. To do this in CSS, change the colors marked in green below; you can remove the red lines and these sections will get their background color from the page itself:

#page {
 background-color: #efece5;
 margin: 0px;
 padding: 10px;
 width: 968px;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 display: block;
 }
...
#content {
 width: 574px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding-right: 10px;
 padding-left: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
    background-color: #f8f8f8;
  border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 text-align: left;
 }
...
#footer {
 margin-top: 0px;
 width: 968px;
 height: 30px;
 clear: both;
    background-color: #dddddd;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 }
...
#products {
 width: 100%;
 margin: 0px;
 padding: 0px;
 border: 0px;
 border-style: solid;
 border-color: #efece5;
 }
...
tr.row1 {
   background-color: #efece5;
   border-style: solid;
 border-color: #efece5;
 border-width: 1px;
   }
...
#navigation ul {
 text-align: left;
 font-size: 12px;
 padding-left: 5px;
 list-style-type: none;
 list-style-image: none;
   background-color: #dddddd; 
  }
...
#viewmore {
 text-align: right;
    background-color: #ffffff
  }
...
#sortbox {
 width: 100%;
    background-color: ;
  border: 0px;
 border-style: solid;
 border-color: #efece5;
 }
...
#search {
 padding: 12px;
 margin-top: 0px;
    background-color: #efefef;
  color: #333333;
 font-family: Arial;
 font-size: 12px;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 text-align: left;
 }
...
#sidebar {
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 10px;
 float: left;
 width: 175px;
   background-color: #f8f8f8;
     text-align: left;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 }
...
#sidebarright {
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 0px;
 float: right;
 width: 175px;
    background-color: #f8f8f8;
    text-align: left;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 }

Now I just need to find a darker color of the antique-white for some of the other sections of the page. I'll mess around with it a bit and show what I did in the next post. For now, here's what the site looks like:

Template Changes

This is probably going to be too much detail, so if you already know how to edit CSS and change colors on web pages, you'll probably want to just skip this post. If it's over your head, there are tons of HTML and CSS tutorials on the web; Google is your friend.

First things first. I chose the layout-2-both BANS template for this page. There are a few things that I don't like about the template that I'll change first. The first is the line between the header and the body:



It isn't going to work with my design, so I'll edit it out; you can use the BANS editor for all of these edits. To remove it, just delete the following lines from the CSS file, styles.css:

#line {
background-image: url('images/linebg.gif');
background-repeat: repeat-x;
height: 32px;
width: 100%;
}

Next, let's get rid of the title that overlays the header. The BANS headers all have an image on the right and a blank space on the left. The default templates use this blank space for the title of your page. I like to do it myself in the header, so this part can be removed. It's in the header.php template file. Look for the following section and remove it (don't forget to save):

<h1 id="title">
<a href="<?php print URL_PATH.">"> <?php print SITENAME."";?></a>
</h1>

Finally, I'll make the header image the right size so that at least it shows up correctly. The section that needs to be changed is back in styles.css:

#header {
margin: 0;
padding: 0;
height: 180px;
width: 100%;
background-color: #e8e8e8;
}

.headerimg {
margin: 0;
background: url('images/logo.jpg') no-repeat;
height: 180px;
width: 968px;
}

You can see that the default image width for this template is 968 pixels and the height is 180 pixels. My image is 968 by 334, so I have to change the height to 334 in two places:

#header {
margin: 0;
padding: 0;
height: 334px;
width: 100%;
background-color: #e8e8e8;
}

.headerimg {
margin: 0;
background: url('images/logo.jpg') no-repeat;
height: 334px;
width: 968px;
}

Now that the basics are out of the way, I'll work on the rest of the template. That will be in the next post.

The Header is Done

After a bit of trial and error, I think I've got something that I like. Since I was trying to go for the feel of an old pressbook, I used just a couple colors and desaturated the images to black and white. It didn't look old enough until I added a bit of tan (for aging) to the whites and then faded the blacks to a dark gray. I'm fairly pleased with the results:


I'm going to use the green color for the page background and then the light color for the background of the test areas. When you are making your own graphics, you'll want to remember to make it the right size for your templates header or you'll have to make quite a few changes. My template's header is 938 pixels wide, so I stuck to that width with this header image. To get it to show up, just save it as JPG, upload it to the images directory for your BANS template, and rename it to logo.jpg.

Here's what it looks like with the header (and no other template changes):



Ugh! The header is cut off at the bottom, there's a title on the header that I don't want, and the rest of the page is still the default grays. Time for some template changes.

Working on Graphics for the Site

I finally got some spare time, so I'm going to work on the graphics for the site. I think I'm going to go for the look and feel of one of the movie pressbooks. For the older ones, the pictures are usually printed in monotone and then some of the text might be in a second color (or sometimes not). Here are some images I found that I'll start with. All of these came from Morgue File:



The trick is going to be to put these together in a meaningful format (and I may not use all of them).

Downloaded some images

Although I'm not sure how much time I can devote to this new site the rest of the week, I'm going to try to do something every day. Today I went to the Morgue File to find some public domain images as a starting point. If these don't work out I'll search for some cheap stock images.

Maybe tonight I'll work on a header.

I should also mention that the initial keyword research looks pretty grim, but if people are buying on eBay, who knows. The keyword data in general is a bit behind the market.

The site is live

Ok, I ate dinner, fed the dog and cat, and built the pressbook website. I'd consider it a preproduction site at this point, but it's usable as it is. I've seen many BANS sites get published that aren't much more than this:


This took about ten minutes to set up. To get started, you just FTP the BANS software to your new site, connect it to your database by following on-screen prompts, then do a little configuration. If you choose a single category from eBay, which I did, the site navigation is all set up by the software. After filling out a few fields and choosing some default settings, your site is ready.

I'm going to spend some time on the header and look and feel of this site, and by the time the DNS entry is up and running, it will look much better.

A bit of prework for the site

Since I already have web hosting on Hostgator and their Baby package allows unlimited domains, I'll set up the new site there. It won't work until the DNS entry is created on 1 and 1, but I can go ahead and get it ready on Hostgator anyway.

I just did an add-on domain for the new site on the c-panel tool for my host:



Now that the site prework is done, I'll set up the database for BANS. It needs a MySQL database for each site, and it's also pretty easy to set up in C-Panel:


Just create a database by giving it a unique name. Remember that Hostgator adds your user name to the beginning of your dabase and any users you create, so is your user name is "billy" and you create a database named "wigitstore" your real database name is "billy_wigitstore."

While you're in the MySQL Database admin area, create a new user (and password) and link it to your new database. The BANS manual shows how to do this, but it's right on the C-Panel form.

Now that the prework is done, I'm going to get something to eat and come back and set up the BANS site.

So, what can you do with this?

Find niches of course!

Ok, so what can you do with these niches? I'm going to show you step-by-step how to monetize one of these niches using a tool called Build A Niche Store (BANS).

As I pointed out in the previous post, one of the hottest niches on the list was Movie Pressbooks:



Doing a little digging, I found that PressbookCollector.com is available. I just registered the name on 1 and 1 Internet, and the DNS setup will take much longer than it takes to set up the site in BANS. As I set up the site, I'll add more posts with the details.