After searching the web I discovered a CSS trick. What you can do is make your wrapper div “position” absolute with a “top” of 0px (this makes sure you wrapper is flush to the top). To get it centered you would make your “left” position 50% and a “margin-left” of “-” half of the total width. Your CSS would like like this:

1
2
3
4
5
6
7

#wrapper {
     width:960px;
     position:absolute;
     top:0px;
     left:50%;
     margin-left:-480px;
}

How someone was able to figure this out still boggles my mind. So after using this technique on multiple projects, I discovered it had a flaw. When resizing your window it kind of “disappeared” when the window gets too small. Not a huge deal, but I had a client point it out to me. SO… I decided to find an alternative solution. After poking around a little more on various forums I discovered the “real” solution to eliminating the pesky margin when using “margin:0px auto;”

By default, the HTML and BODY tag contain some sort of padding and or margins so you simply just have to declare them as “0″ and to make sure that they are set to 100% height and width… Like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

html {
     width:100%;
     height:100%;
     margin:0px;
     padding:0px;
}
 
body {
     width:100%;
     height:100%;
     margin:0px;
     padding:0px;
}
 
#wrapper {
     width:960px;
     position:absolute;
     top:0px;
     left:50%;
     margin-left:-480px;
}

So there you go… a much simpler solution to a common issue.

… But wait! There is more! As a separate note, I had also thought that it was impossible to center a wrapper both vertically and horizontally… but by using the technique of negative margins it is possible! By simply applying the 50% to your top and negative margin to the top of the div it will vertically align it… Like so:

1
2
3
4
5
6
7
8
9

#wrapper {
     width:960px;
     height:960px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-480px;
     margin-left:-480px;
}

But what about the container “disappearing” on a window re size? Well there is a solution. Just make an outer wrapper with 100% height and width and a “min-height” and “min-width”. This will force scroll bars to appear once the window gets to a certain size. The completed CSS and HTML looks like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#outerWrapper {
     width:100%;
     height:100%;
     position:relative;
     min-height:960px;
     min-width:960px;
}
 
#wrapper {
     width:960px;
     height:960px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-480px;
     margin-left:-480px;
}

1
2
3
4
5

<div id="outerWrapper">
     <div id="wrapper">
          <!-- CONTENT GOES HERE -->
     </div>
</div>

I hope this helps someone out, or if someone has a better solution, or finds something wrong with what I have hear feel free to leave a comment.

Before making any rash decisions, I thought I would give the game a fair chance. It is an MMO (which I’m not usually a fan of playing – my last MMO attempt was with Final Fantasy XI – also on a console, not the PC version) and that means MASSIVE environments, EPIC story arcs, TOTAL character customizations, A LOT of levelling, etc. I couldn’t possibly make a ‘love it’ or ‘hate it’ decision after just a few (frustrating) hours. So here goes… Part 1 of my DC Universe Online gaming experience thus far (I’m only about 6 hours in and at Level 10).

———————————————————

The Premise/Back Story:

The game starts with a pretty EPIC opening video sequence – Earth is about to be destroyed a la Brainiac’s invading armies – the heroes/villains are all that remains and it’s not going so well for either side. To everyone’s surprise, Lex Luthor ends up being captured and is Earth’s sole survivor. Fast forward to Lex arming his mecca-suit with Brainiac’s time travelling technology PLUUUUSSS ALL the powers of every superhero Brainiac has ‘stolen’ throughout time and space, conveniently packaged in tiny ‘power orbs’. —–> Lex travels back in time, just as the armies are starting to invade (why he didn’t go back a little further is beyond me / maybe I missed that part…) and spills the beans to the current Justice League (overseen by Superman, Batman and WonderWoman). Oh, and while this is happening, Lex devised a preplan to scatter the ‘power orbs’ all across the world, thus creating a new army of Superheroes – aka Me and You. Viola! Go save the Universe from Brainiac’s evil clutches!

———————————————————

The beginning… or lack there of:

So here’s where it gets a little tricky… or more accurately, frustrating. The game just starts. No instruction, no real tutorial.. you start off picking a ‘World’. What this really means is.. the server in which you’ll be playing the game online. If you plan on joining friends, you better find out which server they’re on ahead of time (I’m on ‘Birthrite’), because as far as I can tell (again.. the details of doing ANYTHING are extremely vague) you’re stuck with what you pick up front.

Next up is character customization! I sat on the next few screens for about an hour going through every option, trying to find the perfect match for the ‘hero’ (or villain) I wanted to be. You get to make a few key choices (again with very vague instructions, or no instructions at all) which will determine A) your main storyline, B) your ‘guide’ or narrator, C) the type of powers you’ll have, and D) the core of your superhero persona. Kind of important stuff that oh I dunno.. you might want a little helping hand with before you start off on your epic quest… that you can’t change.. unless you create a whole new character… How was this even released to the public without some kind of test panel? Anyone?

So before you make any solid decisions, here are the basics (I’ve only followed the hero path, so that’s what I’ll use as an example – I’m assuming it’s the same setup for villains, but then again…):

A) Pick your mentor – This determines the main storyline you’ll follow AND the annoying voiceover guide – I picked WonderWoman who represents the ‘Magic’ storyline (Superman follows a genetics type storyline and Batman follows a human with cool gadgets storyline). Each of these lead you in your ‘levelling up’ path + minigames and all the side quests. The main Brainiac story remains the same and is spread out across your 30 stages of levelling up. Sidenote: Anyone else that picks WonderWoman – is it just me, or does it REALLY sound like they got a black woman to do the voiceover? …more specifically, someone who sounds like the Detective from the Carmen Sandiego TV show…

B) Pick your powers/weapon – there are quite a few options here, ranging from guns, to a staff, to psychic energy, etc. When you start playing you basically have 2 options – button smash A, and button smash B – DON’T FRET! As you level up (which happens quite quickly), you can add combos and enhancements to these powers and it makes things much more interesting/makes you much more powerful.

C) Pick your ‘super’ mode – This basically determines how you’ll ‘quickly’ get around the MASSIVE worlds.. and I mean MASSIVE. Your options are flight, acrobatics, or superspeed. I tried flight because.. well, who doesn’t want to fly? Sounds better on paper. Good luck with the controls, like how do you fly ‘down’? I abandoned that one pretty quickly and switched over to acrobatics, aka Spiderman. You can stick to walls/climb on ANYTHING, even upside down, ‘glide’ while you run / jump off high surfaces and fake flying. I think it’s the best of the all options.

D) Create your hero – Here’s the fun/annoying part. First off, I warn you, the controls/menus are extremely finicky! I got really frustrated just trying to move from one screen to the next. I think this mostly has to do with lag from the Internet as EVERYTHING is done online. There are TONS of options at this point.. costume (ranging from gloves, body, back, legs, feet, shoulders, etc.) + colour selections. Don’t worry if you don’t find that EXACT costume piece right away – you’ll earn/find/buy a whole bunch more as you play through the game. I would recommend equipping something for each option now as you can always choose ‘none’ later on, but you can’t add anything after this first step (unless you earn it later.. which is a little different than just finding add-ons.. confusing, I know).

You’re done! / Get ready for basic (and I mean baaaaaaaaasic training).

———————————————————

To be continued in Part 2!

Check back shortly for more in depth coverage / any coverage as the instruction manual doesn’t even cover what I wrote about above.. just sayin’. / If Part 1 made the game sound more annoying than fun… it’ll pass. After working out the kinks / just reading my breakdown above will save you HOURS of frustration. More soon!

Single Post with an Archive ontop

Okay this one made me go crazy trying to figure it out. It’s just as difficult to explain what the problem was. Okay… So I wanted to have an archive of a specific category at the top of a single post entry. This meant that in my “single.php” file I had to put a query at the top then rewind the loop at the bottom and and have it pull the single post’s information. Confused? Yeah me too.

Here is what you have to do. First you have to put in a little snippit of code to have the single post’s query saved. You do this by writting in:

1

<?php $temp_query = $wp_query; ?>

Then you do your query for the archives you want to display along with the loop:

1
2
3
4

<?php $wp_query = $temp_query; ?>
<?php while (have_posts()) : the_post(); ?>
 <!-- CONTENT GOES HERE -->
<?php endwhile; ?>

Now that you have your archives set up and the single posts query saved we can now call it;

And booyakasha you are done! Congrats!

Hopefully this post can help you out with whatever your wordpress task may be. Till next time.

The grid generator and download can be found at 960.gs which intself is a huge asset, as it allows you to preview what the final grid will look like. Not to mention they have now added a “Website builder” which will not only generate the CSS for you but also the HTML saving tons of time and effort. Since I like to think of this blog as a learning tool developed by a self taught student, I’ve decided to ouline the basics of 960 grid system.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// This is your Wrapper
<div class="container_12">
 
	//12 column div
	<div class="grid_12">
	//Content goes here
	</div>
		// Goto the next line
		<div class="clear"></div>
 
	// Left area, 4 columns wide
	<div class="grid_4">
		//Content goes here
	</div>
 
	// Right area, 8 columns wide
	<div class="grid_8">
		//Content goes here
	</div>
 
</div> // Closes you Wrapper

The Design of the 960 Grid is so simple, and there are so many tools offered on their site there is no wonder that so many people are using it. Take a look at their website and a list of the websites using the grid, including companies like drupal. www.960.gs

1
2
3
4
5
6
7

<div style="<?php if (is_front_page() ) {
      echo 'display:block'; 
} else { 
      echo 'display:none'; 
} ?>">
         Show and Hide this content
</div>

Little did I know that I didn’t require a div at all. All I had to do is self contain the PHP code and whatever is between the initial “IF” statement and “ELSE” and “ELSE” and close, will be the content that toggles. Take for example:

1
2
3
4
5

<?php if (is_front_page() ) { ?>
        This is font page content
<?php } else { ?>
         This is NOT front page content
<?php } ?>

Even though both of these work, I find the second bit to be a lot cleaner. Now back to my statement at the begining of this post. Even though the first example may not have been 100% accurate, I still was able to use it down the line. This techniques can be used to switch the class of a certain object depending on what page you are on. Say for example that you want a link to change colour if you are “home”. Well all you need to do is make a class with the colour you want and call it say “.active”. Now just throw it in with the link:

1
2
3
4
5

<a class="<?php if (is_front_page() ) {
      echo 'active'; 
} else { 
      echo ' '; 
} ?>">This is a link</a>

Now I could go on forever about the “IF” statment but I think I will leave it where we are. Maybe in a future post I will write about all of the different IF’s available in Worpress. Stay tuned

While browsing around the web I was able to find a website that was a Godsend. The website is www.border-radius.com, and the tool was developed by Jacob Bijani. I love finding websites like this. Apparently their are people in this world who like to make designers and developers lives easier. Simply type in the corner radius for each corner and the code magically appears in the middle square. Thanks Jacob, for this handy tool.