So cool in fact I made a site dedicated to it, it’s pretty easy to use and spits out the CSS you’ll need for the gradient background: http://css-gradient.com/ (I got inspiration from this awesome site)

That CSS should work in every browser except Opera, if you’re in Opera you’re out of luck. If you’re a beginner to CSS and the code it spits out means nothing to you, this post should help!

Hope you all like it!

If this gains traction and I get a few comments asking for it, I’ll spend the time to make those input boxes draggable so you can change the gradient’s angle.

I’m writing this post on 2 hours sleep in the past 40 hours so it’s a bit short   Anyways, less than 7 hours in we’re at 1300 members which isn’t too shabby.

If you haven’t had the chance to check it out yet, Click Here, it’s a pretty cool concept — hope you like it!

What have I been up to? Well, for one I created this site: WTForF.TW with the amazing Jon Fox.

Also, I’ve been working on a new product with Tim Linden and Jon Olson, that’ll be out on May 11th, so you’ll hear more then

Thanks for reading! Hopefully I can find some time to crank out more useful posts soon.

What would you like me to write an informative post on? If you have any ideas for some sort of script like the overlay box and banner creator, let me know and I can do that too.

Post your suggestions in the comments section.

Thanks!

P.S. just so this post has some sort of content, here’s a picture of my newly acquired living room furniture….

It’s actually pretty easy and done through something called mod_rewrite.

Mod_rewrite can get pretty complicated and get into a ton of regular expressions, but for most uses, just copy and paste what I have and make any necessary changes.

Mod_rewrite goes in the .htaccess file on your server (in the main public html directory). If your server has it, edit the file, if not create one — it’s just .htaccess, nothing before the period.

Here’s the base code you’ll want to start with (but will need some modification) All of this is color coded so hopefully that helps:

RewriteEngine on
RewriteRule ^([^/]+)/?$ index.php?page=$1&%{QUERY_STRING} [L]

For example, if you want /index.php?action=anything to look like /anything what you’ll need is:

RewriteEngine on
RewriteRule ^([^/]+)/?$ index.php?action=$1&%{QUERY_STRING} [L]

The above code will make /login essentially cloak /index.php?action=login, /register will load/cloak /index.php?action=register etc…

If you only want /login to go to /index.php?action=login and not have it happen for /anything you would want something like this (no wildcard):

RewriteEngine on
RewriteRule ^login/?$ index.php?action=login&%{QUERY_STRING} [L]

You can also do this for multiple parameters, so to go back to that first example of making /index.php?page=whatever&num1=7&num2=6 look like /whatever/7/6 you would want to use:

RewriteEngine on
RewriteRule ^([^/]+)/([0-9]+)/([0-9]+)/?$ index.php?page=$1&num1=$2&num2=$3&%{QUERY_STRING} [L]

• Here’s a bit of an explanation of what that all means…Starting at the 2nd line, the rule is it’s searching the URL (when someone visits a page on your site) for ([^/]+) which is any combination of characters/numbers *except* a forward slash. The + means it must match at least one character.
• ([0-9]+) Looks for any number
• /?$
  • The / looks for a forward slash
  • The ? means that forward slash is optional (if it’s there it works if it’s not it still works)
  • $ means it’s at the end of the URL. So it matches for http://anything.com/anything/ and http://anything.com/anything, but not http://anything.com/anything/somethingelse.
• After the space is the URL it will load once there is a match
  • $1 is a wildcard for the first contents of parenthesis, so it refers back to (^/) and what it stood for. In this case it stood for “whatever“
  • $2 is a wildcard for the 2nd set of parenthesis, $3 for the third and so on.
  • %{QUERY_STRING} just allows extra stuff to be put on the end so if I did /whatever/7/6/?test=test it would pass the test parameter as well.

Want to get into some more advanced mod_rewrite? Here’s a nice little cheat sheet. If you have questions, post them in the comments.

Drag the link below into your bookmarks

and click it on any site you want to cloak / put a “light box” (an overlaying box) on. When you click the bookmarklet it’ll ask what you want to show in the box, just type that, hit save and you’re done.

Overlay

Here’s an example: Google
Tweet this

Hope you like it and let me know how I can improve it!

The biggest new feature is the addition of multiple background images.

Here are a couple examples:

You can check it out here: http://trkr.me/5f

As always, let me know what you think!

• You can now pick custom background colors
• Same goes for font color
• Better alignment
• Text is now wrapped, so you can enter longer text and it will force it to a new line.

You can access it here: http://trkr.me/5f

It’s easy, just use this page: http://austinhallock.com/createbanner.php

As always, let me know what you think!

If you don’t understand anything in this article, either leave a comment with a question, or refer to the previous post (the one before my apartment vid). This ended up being pretty lengthy, so grab a glass of water and get comfortable

The best element to use for positioning/padding/margins etc is the <div> tag. Next easiest is the <p>, and tags like <span>’s and <a>’s can be moved around and have the height changed with a bit of extra work.

We’ll start with what you do for <div>’s and <p>’s:

Width and Height:

.pixels
{
	width: 400px;
	height: 400px;
}
.percentages
{
	width: 70%;
	height: 50%; /*Though % heights don't always work as expected */
}

<div style='width: 400px; height: 300px;'>Test</div>

Padding

Padding is just that, it’s extra space that pads the outside of your element, meaning more space between the edge and your content. You can use “padding:” or “padding-left”, “padding-top”, etc.

CSS

.all_around
{
	padding: 20px;
}
.left_right
{
	padding: 20px 0;
}
.top_right
{
	padding: 20px 20px 0 0;
}
.left_pad
{
	padding-left: 20px;
}

Examples

<style type='text/css'>
.mydiv
{
	padding: 2px 10px;
}
</style>
<div class='mydiv'>Test</div>

Tips
If you just enter one value, ie the all_around class above, it will pad all four sides.
If you specify two numbers like the left_right class, it will pad the top and bottom with the first number, and left and right with the second.
If you specify all four numbers like the top_right class, it will put the padding in clockwise order. So top, right, bottom, left.

Margin

Margin is very similar to padding. The difference is margin is the amount of space between each element, while padding is extra space inside the element. This makes a big difference when you start adding background colors and borders. Like padding, you can use “margin”, “margin-right”, “margin-bottom”, etc

CSS

.all_around
{
	margin: 20px;
}
.left_right
{
	margin: 20px 0;
}
.top_right
{
	margin: 20px 20px 0 0;
}
.left_pad
{
	margin-left: 20px;
}

Examples

<style type='text/css'>
.mydiv
{
	margin: 10px 0;
}
</style>
<div class='mydiv'>Test</div>

Tips
The order of top, right, left, bottom is the same for this. And again, use padding when you have a background color for your element and you want some space so the text isn’t smushed up against the edge, use margin when you want space between elements.

Centering an element

<style type='text/css'>
.container
{
width: 800px;
margin: 0 auto;
}
</style>
<div class='container'>Whatever</div>

Just a random tip that I can’t really write a full blog post for, there’s an order to which elements can be inside which. Basically, don’t put a <div>, <p>, <h1> (h2, h3 etc) inside of a <span> or <a>

Well that was a lot of text, hopefully you’ll find some use out of some of it. Funny thing about me doing these tutorials/posts on CSS is CSS was the last thing I became fluent in, learned HTML -> PHP -> Javascript -> CSS.

Next up is more advanced positioning/padding for stuff like links and spans.