Clickable Background Ad CSS

After searching around for awhile, I couldn’t come by any code that I could use to create a clickable background image on a client’s website.  What is a clickable background ad? Its really just a huge background image that sits behind all of your content that can be clicked. A good example is to check out any big gamer website or adcamo.com also has some good ones to show for examples.

Sounds easy right? I struggled with this for quite some time and finally figured it out!  I even got it to work on a wordpress theme.  The trick is using “position” and “z-index” mentions in your css area.

Anyway, your search is over if you are digging around for something that will work…it works, trust me. Who knows, maybe someday I will turn this into a clickable background image wordpress plugin.

Its free to use.  I just would appreciate some credit or let me know where you use it. Here’s the code:

CSS CODE
[code]
body
{
overflow: hidden;
}
.bglink
{
position: absolute;
z-index: -1;
top: 0px;
left: 0;
width: 100%;
height: 100%;
background: #fff url('http://www.psdgraphics.com/file/green-abstract-background.jpg') center center no-repeat;}
.content
{
position:absolute;
padding: 5px;
background-color:#fff;
color: #000;
width: 960px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
[/code]

HTML CODE
[code]
<div><a href="http://www.google.com"></a></div><div>Webturd Content Will Goes Here<br>Test Content Webturd Goes Here<br>Test Content <a href="http://www.webturd.com">Webturd</a> Here<br>Test Brow Will Goes Here<br>Test Content <a href="http://www.test.com">Will</a> Goes Here<br>Test <a href="http://www.webturd.com">links work within the overlaying div</a>!<br>Test Content Will Goes Here<br></div>
[/code]

10
May 2011
POSTED BY
POSTED IN Brow's Dumps
DISCUSSION 0 Comments
TAGS

Indiana Beach 2011 Review – Not Good

Dsc00612My family and I have been coming to Indiana Beach for many years now and each time around, it gets worse. Ever since the new ownership, it seems like the level of care has fizzled out. Our experience this past opening weekend of Indiana Beach 2011 had us reconsider any future visits.

Indiana Beach has been advertising new “multi-million dollar” attractions and improvements. Because of this, we were excited to see what was new with Indiana Beach. One attraction called “Adventure Point” that is supposed to include rock climbing walls and a zip line was nonexistent. What we got to enjoy were several removed rides, construction fences and unattractive muddy areas of nothing. They did have some “Pardon Our Dust” signs posted up but we just had a difficult time understanding why it looked like the project just started on opening day. Maybe sometime in September there will be something to view?

About half the rides were not working. The rides that were working were still covered with the same dust and rust that I recall seeing over 30 years ago when I was a kid. It amazes me to think that these things are still in safe operation. There’s also rumor that the Indiana Beach train derailed with people in it…yeah, scary and I guess that explains why the train wasn’t working and was hiding in a utility shed.

Not only did Indiana Beach look trashed but the employees matched the trend. A majority of the employees seemed to be distant, frustrated and unbathed. We just didn’t seem to get a very good impression from these people with the random glares and toothless frowns.

To add to this hillbilly melting pot, the visiting crowd has also let themselves go. Nothing but loud, poorly dressed, dirty people walking around graciously spreading their body odor into the air. A simple dress code would be nice to see from time to time. Is it not a place for families anymore?

Recently, Indiana Beach operates on a new “Cool Cash” program to where you have to drop your hard earned dollars onto a little card that resembles a credit card. The card has a bar code on it and it gets scanned for everything. Wether its your kid getting on a $2.50 kiddieland ride or playing a rigged skill game on the boardwalk, you have to scan the Cool Cash card. Although we avoided the “new and improved” bathrooms, I wouldn’t be surprised if we had to scan our cards to use a toilet. Reluctantly, we added some Indiana Beach Cool Cash to a card that we still had from last year and headed to the games. We attempted to play our first game of the 2011 Indiana Beach season and was quickly told that Cool Point system wasn’t working yet and they were accepting cash only. Seriously?!

Only about 45 minutes into the 2011 Indiana Beach visit, we’ve had enough. Why put money on a card that we can even use? It only seemed right that we got our cash back so that we could spend something and try to have some kind of fun before we left. We went to the nearest customer service booth where the oldest woman in the world worked accompanied by an ancient version of Jabba the Hutt. We explained the situation and were quickly told…NO REFUNDS. As we stood there in frustration, another fine employee walked in and proceeded to tell us the same thing without evening listening to our situation. He repetitively told us that he there were NO REFUNDS while looking down directly at the floor and avoiding any and all eye contact.

Being stubborn, we went on and tried to make the best of it. We tried to enjoy an ever delicious Elephant Ear with minimal places to sit since the decided to remove all the picnic tables. Because they seemed like the only thing good at the amusement park, we decided to get some to take home to other family members that were smart and stayed home. Surprisingly, the lady that operated the Elephant Ear stand explained that she did not charge us Cool Cash for the first Elephant Ear that we got and wanted to make up for it this time around. She took our Indiana Beach Cool Cash Card and drained it, then told us that we owed $5.00 plus change in cash. Seriously?! Having had a enough, we refused to pay anything more and hoped that she would realize that it was HER mistake. How were we supposed to know how our Cool Cash were doing if all you have to look at is a plastic card? After she fumbled around with numerous little beeps and buttons, she finally did cave in and we walked away in another wave of anger.

Can’t forget about the cotton candy. My daughter loves cotton candy and we noticed that the two elderly women finally fired up the machine in the cotton candy stand. For a long time, it looked like the stand was closed down and not taking orders. After waiting about 10-15 grueling minutes, my daughter finally got her bag of fluffed sugar. The ladies were nice, but they were very slow.

I’ve lived in the same town that Indiana Beach is located for a long time and have always enjoyed visiting. As a teenager, I was even employed at Indiana Beach for a few years. I grew up there. Not that I am struggling to hold on to past memories of Indiana Beach, but its a shame to see the park lose its appeal and nostalgia that it once had. The only thing that kept us there is our innocent 5 year old daughter that was oblivious to the crap that was going on. As I mentioned before, we left angry and don’t plan on going back any time soon.

Indiana Beach 2001 – Not clean. Nothing New. No warm cherry employees. No tickets to win. No fun prizes to win. No fun.

09
May 2011
POSTED BY
POSTED IN Brow's Dumps
DISCUSSION 3 Comments
TAGS

Simple Twitter Widget for WordPress

Introducing the new Webturd Twitter Widget for WordPress.  A Clean, Simple and Minimal WordPress Twitter Widget. Displays your Tweets WITHOUT using the <ul> and <li> html codes that creates those ugly bullet points…hate those things.

Its very light weight and works how you want it to while adapting to your current theme css.  Use it how you want and let me know where you use it!

Some screenshots:
Ss1Ss2

Download Link: http://www.mirrorcreator.com/files/RB0IQBCN/webturd-twitter-widget.zip_links

04
May 2011
POSTED BY
POSTED IN Brow's Dumps
DISCUSSION 0 Comments
TAGS

Gas Prices Comic Revisted

These damn high gas prices remind me of a comic that I did 11 years ago.

04
May 2011
POSTED BY
POSTED IN Brow's Dumps
DISCUSSION 0 Comments
TAGS

Fresh and Clean FileZilla Theme

I’ve been on an icon slash customizing binge and decided to do something about FileZilla today. The customizing turned out to be just about as easy as my little Ugly Google Chrome Extension Icon experiment went.

Taking note of a recent icon treasure find, I decided to go with Yusuke Kamiyamane’s icons.  He has a ton of awesome little icons to pick through and I just couldn’t resist.

Its clean. Its minimal. And its right here if you want the free FileZilla theme.

Action_shot

Group_shot

FileZilla Theme – WebTurd

===============================

Assembled by Brow - webturd.com

Some Icons are Copyright © Yusuke Kamiyamane. All rights reserved. Licensed under a Creative Commons Attribution 3.0 license.

===============================

Install Instructions

Unzip folder and put “webturd” folder and leds.png under the Program Files > FileZilla FTP Client > Resources directory

Launch FileZilla and choose Edit > Settings

In the Settings window, scroll down to Interface and then click Themes

Choose “WebTurd” theme and then click OK to apply.

Done!

Download the WebTurd FileZilla Theme: http://www.mirrorcreator.com/files/1N3MBJZP/webturd_filezilla_theme.zip_links

*Note – This theme only changes the icons…don’t get mad if you were expecting more.

14
Apr 2011
POSTED BY
POSTED IN Brow's Dumps
DISCUSSION 0 Comments
TAGS

Ugly Google Chrome Extension Icon? Change it!

Have you ever found a good Google Chrome extension and the icon just sucks?  There are some good extensions out there but fail in the nice-looking-icon department to suit my tastes. A big ugly icon stuck up in the tool bar just ruins my day when the option to hide it just doesn’t cut it.

Today, I took some time out to see if I could actually change the icons that come installed with Google Chrome extensions.  It was actually much easier that I thought it would be.

Here is what you can do to change up a Google Chrome extension icon:

My target extension to change the icons was the Neat Bookmarks extension. I love the extension but just didn’t care too much for the big blue square icon.

Custom_chrome_icons

The image on the right is what I ended up with by creating a custom chrome extension icon.

First, you will need to decide on what icons that you want.  In this case, I wanted something minimal that represented a bookmark and a folder icon to match.  Use .png files with transparent backgrounds so that if you change your theme, it will still look decent.  The icon that I wanted to replace was sized at 19px by 16px, but I replaced with 16px by 16px.  Chrome seemed to let it size perfectly and I didn’t notice much of a difference at all with the change.

Here are three good places to locate replacement icons for chrome extensions:
http://www.iconarchive.com/
http://www.iconspedia.com/
http://p.yusukekamiyamane.com/

Once you have located and saved the icons to your desktop, you will now have to find the directory where the chrome extensions are stored.  The Google Chrome extension file location for Windows 7 can be similar to what I have here:

C:\Users\*YOURUSERNAME*\AppData\Local\Google\Chrome\User Data\Default\Extensions

Now, that you have made it to that folder, the guessing game begins.  The chrome extension folders are not named with something easy.  Instead, they are marked with odd strings of letters.  The best thing to do is to open each folder and then open the options.htm file.  By doing this, it should provide you with a decent clue on what extension you are looking at.

Directory_wtf

The folder that I found the Neat Bookmarks extension in was called: nnancliccjabjjmipbpjkfbijifaainp\0.8.8_0

Now that you have found the correct extension folder, its time to copy over the newly found icons into this location. The icons should have the exact same file name of the icons that you are replacing to where you are overwriting and replacing.  Before you do this, its probably a good idea to make a quick back up of the old icons.

Directory

Once you have replaced the old icons with the new, open up Google Chrome or restart if you already had it open to check out your changes.

That’s it! Its that easy.  If you are using Neat Bookmarks and want to give it a try, here are the exact icons that I am using.  Save ‘em and give it a shot.

Icon  Folder

12
Apr 2011
POSTED BY
POSTED IN Brow's Dumps
DISCUSSION 1 Comment
TAGS

Lost: Google Adsense Account

This morning started out really prefect when I got an email from Google stating that my account was disabled. Uh, what? I was only $6 away from cracking the $100 limit to receive a check and they cut me off!

I was hoping that it was just a very delayed April Fools joke but after trying to log into my account, I got another denied message. Damn, this really just happened.

After looking into the situation a little further, it appears that I was causing some click fraud by clicking on the ads that were on my sites.

Now, I’m not going to lie…I have clicked on them before just out of pure curiosity on where they go and what a user would experience when they click on something. I am a web designer so I think that its only fair that I know how the ads will operate and treat my visitors. Do the ads take me to a scam site? Do they open up in a new window? Things like that caused me to lose my Adsense account?

I can understand if that’s all I did was click on the ads and purposely try to generate revenue but I knew from the get go that it is against the terms of service.

Knowing that it probably wont help, I attempted to appeal it with a form that they let me fill out. Its not that I made millions off of Google Adsense but it was nice to get a small check every few months or more.

Now, its time to find an alternative and I am open to suggestions. I am looking for something similar for content with decent rates.

07
Apr 2011
POSTED BY
POSTED IN Brow's Dumps
DISCUSSION 3 Comments
TAGS