Music for HipHopForums.org
I needed to add some music to the site, so I pulled out my old flash player and set it up. The problem is that it would quickly become boring and repetitive since it would always play the songs in the same order, so I searched online for a jukebox type of flash player that would shuffle the music for me. I found a decent free one that I liked. I set up a window popup link in the blocks section. I disabled this for guests because I don’t want them using up bandwidth without at least registering with my site.

Rotating Banner Block Code
I needed a way to randomly display different banners and advertisements for my current forums as well as future forums. This way I can have different affiliate advertisements being displayed randomly. I found a few php code snippets over at the tinyportal’s site that should handle this.

Revamp DJKasper.com
I also revamped my DJ Site (www.djkasper.com). It’s a flash site and since I haven’t made changes since 2007, It felt like I was learning Flash all over again from scratch! Whoa! Even the simple tasks seemed hard (like trying to find out where the actual url link is embedded!). Anyway, I just got rid of all the old page images and added new ones; deleted old links (like myspace) and added a nice link to my Hip Hop Forums (of course); and changed the wording on the ‘About Me’ section.

I like it, I just have to do the photo gallery and weblog pages still. But I will save that for another day. I’m going to sleep! or hmm, maybe I’ll go ride my motorcycle.

Things I needed to change are:  

1. Forums Appearance.
   The Forums are kind of plain looking; I wanted to add some life to it. I figured I could do this by adding a section to the front page that would contain a recent music related article along with a nice sized picture of the artists. I wanted the article to appear at the top, with the forums starting immediately under it. Setting up articles in the tinyportal mod was slightly confusing, but eventually I got it set up. There were a few unexpected issues, such as when viewing the actual article in a browser window that was not expanded, the blocks from the right panel would float in front of the article. The workaround was to disable the right panel while in article view.
   

   New look with Artist Image

   Not a big deal I guess. One nice feature about using articles with Blocks (Tinyportal mod) is that I can create a bunch of articles (with artist images) and when I’m ready to give my forums a new look, I simply select a new article from the Block drop down list. Another issue was that once you view the article, the text was a light blue almost transparent looking. It was using the body tag in the css file. I changed it to black, but then of course since it’s the body tag, a few other areas were affected: the pop up windows now have black text over a black background. I’m still trying to find the actual file (not the css file) that references the article text so I can assign a new class.  

2. Incorrect Copyright Year.
   A very small issue, The copyright year still says 2009. I don’t want to keep having to remember to update it each year, so I added some code to grab the current year automatically.
   Insert the following: 

   <? echo date(‘Y’);  ?> 

   So the full code would read:  

   copyright 2009 – <? echo date(‘Y’); ?> HipHopForums.org 

   That would set the copyright to: 2009 – 2010 

3. Font is Too Large in the Recent Posts Section.
   The Recent Posts section lists the last 10 posts. The font is so large that each line gets word-wrapped and just looks sloppy. I don’t enjoy searching through smf site files; it makes even the smallest changes take up too much time. I’ll give you an example, I just did a properties check on my Hip Hop Forums directory and the site has 10,480 files inside of 300 folders! Now of course all of those are not being used, and many are probably images, language files, etc, but you have to see what I mean! lol. Anyway, I found the file (BoardIndex.template.php) that I needed to make the changes to. I want to make the font size smaller, and stop the text from word-wrapping, so I deleted the first column (board name) and just adding a new class to each of the remaining two table columns. The new classes were obviously font size classes.

Well that was enough for me, I am ready to get this forum started!

1. After the user filled in the data in the first section they would hit CONTINUE, but the second page loaded very slowly (maybe 5 seconds).
2. MAC users complained that the submit button on the second page would not submit.

The slow loading of the second forms page seemed to be caused because I used so many hidden inputs. I didn’t use sessions or cookies to store the data from the first page, instead I just posted the values into hidden inputs. 28 of them. I didn’t realize this would slow the page load time.

The other issue where MAC users could not submit the final forms page really bothered me. It took me a little while to figure this out because I do not own a Mac, so I had to keep making guesses and wait to see if a Mac user complained again. Eventually I stumbled onto the reason. It turned out to be a case where I used the word “button” or “submit” (I already forgot which one!)  as a class name in the css, and assigned it to the submit button. It must have been a reserved name. It is odd however that Safari & Firefox browsers for the PC still worked with the form, yet the same browsers on a Mac would not (Internet Explorer worked on both platforms).

THE SOLUTION
Well obviously changing the class name to something else solved the MAC users problems, but I still needed the page to load faster. I decided to put all form sections on one page (to eliminate all of those hidden inputs), but this would make the page extremely long, so I messed around with sprys for the first time. I set up an Accordion Spry which closes all sections except for the active section, and you can tab through to the next section once you’re finished the current one. It looked real nice, it definitely boosted the sites overall appearance.

So finally, I think I can call this project, “completed”.

Revamped

Adobe Photoshop CS4
I learned that alot of site designers actually create their site’s design and concept in Photoshop as a PSD file first. Not functional of course, but just to get an overall picture of how their site should look… So that’s what I did. The first 3 ideas I had were flops, just not good at all, but then I deleted all of the extra junk and simplified it and came up with something simple & clean. Take a look at the PSD snapshot;  

PSD

I took an actual image of a customer’s house and threw it in the background; lowered the opacity and the fill so that it would be slightly transparent in the background and blend in with the blue color that I picked for the sites overall color; put some keys hanging in the top right corner and added a drop shadow to give it a little 3d effect. I decided to bevel the entire page and add a slight drop shadow to the title and page as well.   

To convert this to a  functional website, I needed to slice the background into several pieces and export them. First I turned off all of the layers except for what I want to use as the background images (I turned off the USA map, the “Select Your State” text, and the submit box, etc).  

Top, Bottom, Fill

Then I duplicated the image (Edit\Duplicate), and flattened the new copy using ‘Layer\Flatten Image’. This merges all layers together into one layer so that ‘copying and pasting’ will include all layers (everything you see) as opposed to just the selected layers content. I used the Marquee tool to copy and create the jpgs I needed. I needed the top, bottom, and the fill. I selected ’save for web’ and messed around with the settings until I got the best ratio (low file size / good quality image).   

Adobe Dreamweaver CS4
Prior to using Adobe Dreamweaver CS4, I was using Dreamweaver, but my version was so old, it was still called Macromedia Dreamweaver. Adobe acquired the program in 2005 and the CS4 bundle is my first use after Adobe took over. And what a jump up in features! I literally love this program, and rightfully so since I use it every day.   

 Ok, on to programming and converting my PSD to a functional website. First I opened up my default template into Dreamweaver in which I already have some standard code and divs set up to use as a quick start php file. There’s already an associated stylesheet, so I start adding the images to the CSS file (NOT to the actual web page); adjusting, & re-adjusting until I get it right. I set the top image to an absolute position at top left, and I set the transparent house image to background-position: left bottom. The fill image is needed to fill in the area between the top image and bottom image when the web content extends and pushes them apart which would cause white space if there was no fill image. It was set to ’background-repeat: repeat-y’. That was pretty much it for implementing the background images.   

Once that was completed, I created the web pages that lead up to the forms download page. Here, visitors can download most of the pdf forms they need, except for one. The last form is filled out and submitted online. Once submitted, it’s emailed to me. On my old sites I used tables to create columns and rows for my online form, but I’m trying to stay away from tables on this new site, so I needed a way to use CSS to make horizontal columns to put my form in. I got the columns going finally, but still wanted my form to have a better appearance. Everyone knows forms are just so plain and ugly. I tried different ideas with CSS but I just couldn’t figure out how to get the online form to look better, so I searched for help online and it seemed like many other people were searching for ways to make them look better too. I came across a site with a really nice way to use CSS to ‘beautify’ forms. And walaah, just what I was looking for.
  

Site snapshot

Recently I wanted to give it another go, but this time monetize the forums. I say “forums” because you need more than one. There doesn’t seem to be a lot of money in monetized forums, unless you have a few that have a lot of active members and traffic. I went with a music forum again because I have a genuine interest in that, and I feel as though I would be more committed in seeing that type of online community grow. I picked out a few other domains also but I’ll discuss them in a later post.

So I registered the domain name, “HipHopForums.org”. Next I needed a forum software. Initially I was torn between two; vBulletin and SMF (Simple Machines Forums). vBulletin requires you to purchase their license (you could lease also). Currently the license is $195, whereas the SMF software is Open Source and Free. Hmm let me think… This is tough… Free it is!  lol.

Now I needed a theme for the forum. I wanted it to be kind of plain using blue or a bright red color and it definitely had to be easy to navigate through the forums. I found a nice clean red theme called “stylized”; I made a few minor edits and walah! A nice looking Hip hop forum!

I was worried about what I would use as a header image because I’m not that creative with graphics. I know the header would make or break the site (cosmetically). Fortunately I used to DJ for a group back in the early 90’s who happen to be celebrities now. So I took out a CD; scanned it; put it in Photoshop; cropped it; and just played around with the layer styles (outer glow, inner glow, satin, etc) until something accidentally looked nice. ha ha ha, but I’m serious. lol. Then I did the same thing with the text: inner glow, satin, bevel, anything I could click on. lol and it turned out pretty nice.   I figured I would just use what I made myself until my forum gets more traffic. Once I get more traffic, I’ll set up a contest or something where I would offer a prize for the person who creates the best header image for my site. Until then, I am pretty happy on how the site looks.

I also needed a way to display advertisements on my forum. SMF is just a one column forum, but I found a great little mod called TinyPortal. This mod expands SMF by giving it a frontpage, articles, panels (top, upper, left, right, bottom, & lower), among other things. The panels are what I was looking for to hold advertisements. Right now I just put a couple of amazon.com advertisements on my site until I get more traffic. Of course the ads are for PS3 slim and DJ Hero!  I guess I was a little biased when selecting what to advertise.  lol. I’m joking,

In case anyone else is starting a forum, I’ll mention a few mods that I really liked:

• NotifyOn mod – This mod will automatically set the email notification to on. This way when someone replies to a members post, that member will receive an email informing them. This is a good way to keep members actively participating in the forum.
• Custom Profile mod – This allows you to add custom fields in the members profile. I used it to add a field for their myspace page, twitter page, facebook page, as well as a Bio section.
• Reputation mod – This mimics the reputation feature I’ve seen on vBulletin forums and replaces the Karma feature completely. I really like this mod.
• Flash Chat – This isn’t a mod, but rather exactly what the name implies: a chat room (via Flash plugin). This is such a great addition to any forum. It integrates with the SMF forums and uses member’s logins etc. I simply created a menu button (via TinyPortal block) to trigger the chat room.

Ok well I guess that’s it for now. I’m exhausted; I’m just going to relax and sit back and watch a movie! 

It seems to be a good way to network and possibly cross paths with others that have similar interests, but in the very least, it will provide me a way of documenting my journey, taking notes on the things I’ve done, the steps I’ve taken, etc. I have a BAD memory, so that is a big plus.