Neil Lee’s BeatnikPad!

Let’s catalogue the similarities with my (now obviously) old theme (some of them somewhat eerie):

1. Dark banner across the top — check!
2. Serif-type font in the headline — check!
3. Serif-type font everywhere! (hey, apparently I’m not the only one who likes Georgia) — check!
4. Sidebar on the right — check!
5. Asian dude — check!
6. 30 years old — check!
7. Lives in Toronto — check!

… and here’s the sad part (for me) …
Started his website 3 months ago — BEEP! (errr … no)
– actually, Neil hit it up, like 3 *years* ago.

… which, sadly, makes *me* the Johnny-come-lately.

(and of course, the differences start piling up after that — lives with cats, works with macs, likes taking snaps photos, uses typepad, has own ISSN and so on … )

Well, props to you Neil Lee … I tip my hat to your design good sir.
It doth kicketh ass. :)

Anyway, it certainly kicked *my* ass into changing a few things around, as I was thinking of changing around my own-rolled wordpress theme anyway.

Old DJI Theme; New DJI Theme (well, you’re looking at it, right?)

I guess its funny that way — you spend a lot of elbow grease and otherwise frustatingly long hours to hone, grind, and polish your theme, and whoops! Turns out that someone already had that idea.
I wonder how many other theme authors run into this problem, by accident (not on purpose).

Or, how many different design combinations there *really* are, plus or minus the unconscious influence of other websites we may have seen around the web.

Things left to do:

1) Decide what the main nav is REALLY going to be like
2) Add a “by-line” somewhere
3) Categorize the category display by “alphabet”
4) Sort out footer
5) Figure out a ‘download” section
6) Have an “above the fold” ADMIN link
7) Create a *real* featured posts

Mostly because it basically did “The Loop”, but after a single post (the latest), it then changed the format of subsequent posts to “excerpts”, and through the magic of styling and divs, changed the format of THOSE to a different location (“below the fold”) as well as a different style.

Its clumsy, because if you SEARCH for different items, your results will ALSO end up the same way; the first item will be okay, but the rest of your search results will be styled “below the fold” — which is REALLY supposed to be for INDEPENDENT, footer-type items … latest posts, latest links, a detailed “about” and so on.

Therefore, a new “below the fold” is the following:

1) truly independent, and in the “footer.php”
2) will include the following items, independent of whats above the fold:
a) latest entries / popular entries
b) latest “news” (aka magnolia or delicious entries)
c) blog roll — popular other blogs
d) a true footer

To accomplish this, you fundamentally need to sort out the trick to get multiple loops on the same page.

Why? The latest series of posts above the loop — that’s loop #1. The last series of entries below the loop, to show up on every single page independently of what’s above the loop (it could just be headlines a la “crate“) is loop #2.

The Codex has what seems to be a good explanation of how to do more than one loop AND be able to select which posts to select IN that loop:

http://codex.wordpress.org/The_Loop#Multiple_Loops

Although you can add “tags” to create and modify pages (and The Loop), at its heart, it MUST adhere to the rules of PHP — because that’s how WordPress is built upon.

Therefore, its curious how it deals with its control structures, because THERE ARE NO CURLY BRACKETS!

That is, when you usually use an “IF”, the actual stuff which follws the operator is usually enclosed in curly brackets!

To wit:
if (anita == pregnant) {hungfamily +=1; }

ANYWAY:

There are no curly brackets in the actual code.

That is, there is nothing like:
(DIFFICULT TO EXPLAIN WITH EXAMPLES … )

Is anita pregnant? yes she is!

RATHER:
Wordpress uses an interesting quirk because its SYNTAX is also borrowed from PYTHON:
SEE: http://vsbabu.org/tutorials/php/index-2.html

In other words, it can also follow this syntax (that is, NO CURLY BRACKETS)

if (expr1) :
...
...
elseif (expr2) :
...
else :
...
endif;

Therefore, you can get away with just including things like without any curly braces … just make sure to end it properly!

Something to think about.

* added “download” link for guide
* cleaned up “categories” and stuff — removed bullets and indenting (removing extraneous ULs)

Also, figured outa “proper” footer

*Challenge: creating a “background” which fits the entire width of the screen, which, unfortunately, is currently outside the “wrapper”

*Solution:

Create a second wrapper “total_wrapper” which is width 100%, around the normal “wrapper”, which is set at 800px and centered.

THEN:

Make sure all of the below is OUT of the “inner wrapper”, which is just called “wrapper”, but still inside of the “total_wrapper”.

THEN … creating “Nested” divs for a single footer: an “outer_footer”, which is set to a width of 100% … it will match the edges of the “total wrapper” (which is already 100%), and an inner footer, which is just called “footer”, which is defined EXACTLY as the “wrapper” width … 800px and margin: auto.

If you set the background color of the outer_footer to whatever you like, you can give the appearance of a bottom-half where the text, set in the inner footer (“footer”), appears to be centered and aligned with all of the rest of the website

VOILA!

NB: Make sure to write “clear: both” for the footer div, so that it doesn’t end up below the “sidebar”, but truly below BOTH content and sidebar divs.

Moving on …

Problem 1) Previously, the “theme01″ showed that ALL of the post was a “link”
Solution — an unclosed “anchor” (that is
Interesting way I figured this out.

Using the firefox extension “Edit CSS”, I was able to open up each theme, delete the ENTIRE theme, and then see the results … basically, my own theme was STILL an entire “link” … therefore the problem was clearly the “index.htm” file, which, as mentioned had an unclosed anchor

Problem 2) The fonts don’t look nice.
Solution: I was using the right font “Georgia” … but it was important to write “font-weight: none”, because “Bold” looks damn ugly!

Problem 3) Links and Divs needing improvment
Solution: Easy to do … a: hover had to changed so that the bacckground highlighted with hovering; then added a “div” so that the time is put in a nice box.