Gosdot » Design

Hacking Wordpress When You’ve Forgotten Your Password

jon — Tue, 02 Dec 2008 11:18:17 +0000

Do you have multiple Wordpress self-hosted blogs? If so, you’ve likely run into a scenario where you just can’t remember the password to one. With Wordpress 2.5 and beyond there’s an annoying bug that sometimes generates passwords that don’t work when you click the “Forgot Password” option. Usually that button generates a query that will send an email with a temporary password that allows you to reset your password to whatever you wish. The bug in 2.5 will still do that but when you click on the link that should allow you to reset your password, nothing happens.

Actually something does happen, Wordpress resets the password internally (in the MySQL database) but the link that it sent you to activate that password fails to connect with the database effectively locking you out of your blog. In this scenario, at least for me, all the potentially viable solutions lead to dead ends.

Although it should’ve, launching the database manager to reset the password manually didn’t work. I tried doing this in various ways including this method from Codex, this one from Watching The Net and this one from Thought Outflux. But none of them worked!

Opening up wp-config.php and trying to reset the password there didn’t work there either.

I was at a loss as to what to do. That is until I found the Village Idiot Emergency Password Recovery software. Using it is simple:

Download the script from Village Idiot WordPress Emergency Password Script.
Unpack the downloaded zip file.
Upload the file emergency.php to the root of your WordPress installation (the same directory that contains wp-config.php).
In your browser, open http://example.com/emergency.php.
As instructed, enter the administrator username (usually admin) and the new password, then click Update Options. A message is displayed noting the changed password. An email is sent to the blog administrator with the changed password information.
Delete emergency.php from your server when you are done. Do not leave it on your server as someone else could use it to change your password.

For whatever reason this worked flawlessly where the other methods failed and I was able to regain access to my wordpress blog and set the password to something I’ll (hopefully) never forget again. I’m not ruling out operator error on the other methods but the aptly titled Village Idiot software makes the process fool-proof.

Note: Keep in mind that all of these options will only work if you are the site administrator or have direct access to the server at which the blog is hosted.

^{Look familiar? I originally published this article as a writer for DeveloperTutorials}

Free Wordpress Theme: Aqua Marina

jon — Thu, 01 May 2008 18:24:00 +0000

Theme: Aqua Marina
Author: Jon Gos
Version: 0.5 Rosie
Description: An original Wordpress theme.

This was my first attempt at a bespoke wordpress theme. I created it in Photoshop then marked up to XHTML and then PHP. This is a public beta, please help me work out all the bugs and kinks by posting any errors as a comment here! The photoshop file used to make it is included for anyone who wants to redesign it.

Download Aqua Marina

Improve Image Quality of Boonex Dolphin

jon — Thu, 20 Mar 2008 20:55:06 +0000

Recently I’ve begun building a community using the open source Boonex Dolphin software CMS. One problem I was having was that, even after using the the site UI to improve image quality, it still seemed as if uploading images was ‘lossy’. After some research and a chat with the admins I came up with the following solution:

The quality of the output JPEG files can be adjusted in inc/images.inc.php, where you need to replace the following line:

$writeResult = imagejpeg( $dst_im, $dstFilename );

with this one

$writeResult = imagejpeg( $dst_im, $dstFilename, quality_in_percent );

where quality_in_percent is a number from 0 to 100

More on Visualization

jon — Sun, 16 Mar 2008 17:24:50 +0000

More on data visualization which I talked about here.

http://www.readwriteweb.com/archives/the_best_tools_for_visualization.php

Free Wordpress Theme – Tech Blogger

jon — Mon, 10 Mar 2008 17:19:00 +0000

Theme: Tech Blogger v1
Author: Jon Gos
Based on: CMS2 by Wonder
Includes: PSDs, CSS, javascript, New Media font, all image files
Plug-Ins: All-In-One SEO Pack, I Love Social Bookmarking, Image Scaler, User Photo and Simple Tags
Notes: Widegtized, Validated and ready to roll!

Download it from Mediafire

About the Theme

I began modifying this theme when I noticed that the author had stuffed it full of his own Adsense codes. I removed them from every page and I also changed the color profile because the original was hideous (purple, orange, blue and green wtf?). The Basic layout reminded me of a few popular tech blogs so I created a logo for it, added some rounded corners and gave it a new name. The download includes source files including the font and PSD used to make the logo.

48 Uses for Wordpress

jon — Sun, 09 Mar 2008 18:40:00 +0000

Want to roll your own Twitter or Feedburner? Who know of all the things you could do with WP?

48 Uses for Wordpress

The Untold History of Web 2.0 Fonts Pt. 1

jon — Wed, 27 Feb 2008 03:24:00 +0000

Web 2.0 and everything that came along with it has reshaped every industry it’s touched, including typography and logo design. I was compiling a list of alternative fonts for Web 2.0 when I started to wonder, “Where do all these fonts come from?”

The result is a list of 7 or so of my favorite 2.0 logos and a brief history of the fonts used to make them. I’ve also included the estimated price for legal use of each font and a free alternative from DaFont for designers on a budget. If you’d like to read more about these fonts, click the [ref] tags I’ve included and you’ll be taken to my various sources of information. Come back tomorrow for part 2.

Note: In some cases prices are for the entire family and not just individual fonts.

Font – VAG Rounded
Used By – Wayfaring.com
Price – Anywhere from $20 to $104.00
History – Part of the Bitstream family, this original design was first used by Volkswagen A.G. as a corporate face for their advertising and marketing use. [ref]
Free Alternative – Arista by Studio Kmzero
My Opinion – “While it isn’t a perfect substitute if you add a few stokes to make it bold, I think you’ll find it’s closer than it initially appears!”

Font – FF Cocon Bold
Used By – Shozu.com
Price – $40 to $146
History – Evert Bloemsma was attempting ‘to eliminate all traces of handwriting’ when he created this font in 1998. Apparently he failed miserably as there are indeed traces towards calligraphy. [ref]
Free Alternative – Danube by No Images Fonts
My Opinion – “Danube is clearly more whetted and acuate but it matches FF Cocon in its nod towards industry and mechanics.”

Font – ITC Ronda (Customized)
Used By – Last.Fm
Price – $34.50
History – Herb Lubalin designed this font in 1970 around the same time he founded the International Typeface Corporation. [ref]
Free Alternative – Rezland by Fraser Davidson
My Opinion – “Ronda is certainly a classic but Rezland has a contemporary modern edge that I feel works well.”

Font – Arial Rounded
Used By – TracksLife.com and MySpace.com
Price – $79.00
History – In 1982 Robin Nichols developed a sans serif typeface for bitmap font laser printers. It was later developed, with Patricia Saunders, into the Arial typeface family which was later chosen by Microsoft as a core font for Windows 3.1 (and subsequent versions). [ref]
Free Alternative – Folks by Manfred Klein
My Opinion – “It’s thin and rounded. You can’t really be too picky when you’re being cheap.”

Font – FF DIN OT
Used By – standpoint.com
Price – $269
History – The font’s designer Albert-Jan Pool was born in 1960 in Amsterdam and went on to study at the Royal Academy of Arts in The Hague. He was one of the co-founders of a group of young Dutch typographers called “Letters”. Many members of that gone on to become famous designers in their own right. Pool is currently working on several new series in order to extend the family of FF DIN. [ref]
Free Alternative – Old Sans Black by Manfred Klein
My Opinion – “The FF family looks so basic but it was pretty damn hard to find anything that came close!”

Font – Frutiger
Used By – Dropsend.com and Flickr.com
Price – $29
History – Adrian Frutiger is the designer of this font, hence it’s name. Adrian is widely regarded as of the twentieth century’s most prolific typeface designers. The font Frutiger was commissioned in 1968 by the newly built Charles De Gaulle International Airport at Roissy, France. Instead of using one of his previously designed typefaces like Univers, Frutiger chose to design a new one. The resulting typeface was Frutiger, originally called Roissy. It was released publicly in 1976 by the Stempel type foundry in conjunction with Linotype. [ref]
Free Alternative – Verdana by Matthew Carter and Tom Rickner.
My Opinion – “It’s come as a default font for computers for as long as I can remember so it wins for convenience.”

Font – Avenir
Used By – Purevolume.com and Shutterfly.com
Price – $29
History – The name ‘avenir’ is French for future, and takes inspiration from early geometric sans-serif typefaces Erbar (1926) designed by Jakob Erbar, and Futura (1927) designed by Paul Renner. Frutiger also designed this font and intended Avenir to be a more organic interpretation of these highly geometric types. While similarities can be seen with Futura, the two-story lowercase ‘a’ is more like Erbar. [ref]
Free Alternative – Siple by Tomoyuki “Tee-Wat” Watanabe or Am Sans by Volker Busse
My Opinion – “The alternative’s not too close in appearance but match many of Avenir’s basic characteristics: clean, modern and stylish.”

Candy Coated Photoshop Tutorial

jon — Thu, 21 Feb 2008 07:46:00 +0000

In this tutorial I’ll teach you how to make a web 2.0 logo so damn sugary sweet it’ll give your website a cavity. Then I’ll give you the PSD, the font, and all the patterns used in the image so that you can play with it yourself. If you want to skip the tutorial altogether, you can download the PSD here. The beauty of the correct way to design logos in Photoshop or Illustrator comes when we keep everything as editable text layers from start to finish. That way if we need to make changes or reuse the idea, we can just pop open a Photoshop file and quickly output a new version of an old idea. This will also make it easy for you to duplicate my steps.

1. Open up Photoshop and Create a new layer.

2. Use the Text Tool to write something in black using the “Creampuff” font.

3. Choose “Color Overlay” from the Layer Style options.

4. Select a pinkish color. Because it makes most people think of candy or something edible(….like babies). For your reference, I’m using these settings….. Color Overlay >> #9e5859. Let’s name this layer ‘Base’.

5. Duplicate this current layer twice by dragging it to the layer button two times.

6. Name one of the duplicates ‘Hard’ and the other ‘Sugar’. This is just for the sake of the tutorial, really you could name them whatever you want. Make sure you order the three layers so that ‘Base’ is underneath ‘Hard’ and ‘Sugar’ is topmost.

7. Hide the layer named ‘Sugar’ for now. Select ‘Hard’ so we can make it look like hard candy (now you see why I named it that?). Use the following settings in your layer style.

Drop Shadow Settings
Opacity = 50%, Angle = 90%, Distance = 2px, Spread = 3px, Noise = 0%, Layer Knocks Out Drop Shadow = Yes

Bevel and Emboss Settings
Style = Inner Bevel, Technique = Smooth, Depth = 471%, Direction = Up, Size = 8px, Soften = 0px, Use Global Light = Yes, Gloss Contour = Gaussian, Anti-Aliased = No, Highlight Mode = Screen at 42% with a White (#ffffff) Color Setting, Shadow Mode = Multiply at 17% with a Black (#000000) Color Setting.

These settings serve to make your candy text look three dimensional.

8. Next we want to select a Pattern Overlay. This step isn’t necessary but a little decoration will make your candy look more appetizing. Before you attempt this, make sure you’ve loaded ‘candy_stripes.pat’ into your version of Photoshop.

Make the following setting changes.

Pattern Overlay Settings
Blend Mode = Exclusion, Pattern = Pattern 1 (my choice, you can choose differently), Scale = 61%, Link With Layer = Yes

We’re all done making the candy look hard. Now it’s time to lick it….no seriously.

9. In this step we’re going to make our candy look like someone has salivated all over it…either that or maybe someone dipped it in a sugary sweet candy coating! (note: This is the hardest part of tutorial to explain but you’ll figure it out.”)

Activate the layer named ‘Sugar’. Hold down the ‘command’ (’control’ on a PC) and click on the layer to select all the letters in your word. Add a layer mask to it.

Hit ‘L’ to select the Lasso Tool and select the ‘Intersect with Selection’ option. Make sure you CLICK ON THE LAYER MASK FIRST before you go to Step 10.

10. Now that you’ve selected the layer mask and not your actual text, draw around your selection loosely and fluidly. The idea is to make this look like liquid. It doesn’t matter if you go out side of the lines or get too crazy, you can fix it later by editing the mask. Once you’ve made a selection through the whole word, go back to your starting point and let go of the mouse. This will subtract everything from the selection except for what you’ve just drawn! (note: click the image below for a close-up view!)

11. Now Make the following settings to the Layer Style of the topmost layer ‘Sugar’.

Bevel and Emboss Settings (note: this makes it look like a candy coating)
Style = Inner Bevel, Technique = Smooth, Depth = 100%, Direction = Up, Size = 5px, Soften = 0″

Color Overlay Settings (note: this gives the liquid a bit sugary glow and a bit of pop)
Blend Mode = Overlay, Opacity = 23%

Gradient Overlay Settings
Blendmode = Screen, Opacity = 35%, Style = Linear, Align with Layer = Yes, Angle = 90%, Scale = 100%
Gradient Color = #6f1d1d as the darker hue with #FFFFFF as the lighter hue.

12. Lo and behold you’re done! You’ve got hard candy dipped in sugary sweetness!

13. We COULD stop there but I always like to ’sweaten’ (no pun intended) my designs with color backgrounds. Create blank layer. Add a Color Overlay in the Layer Styles and set the color to #0f0702.

14. Add a new layer. Add a Layer Mask. Select the Gradient Tool (Hit the ‘G’ Key) with the normal black/white colors. Set it to Radial and Reversed. Drag from the center of your image to the outside of the screen. Bam. Instant spotlight. Now add the Color Overlay of your choice.

Simple right? Don’t you just want to lick the screen? Of course we could get far more detailed with this but this tutorial is long enough! Make sure you download the files below to make sure you’ve done things correctly! Email me your derivative works or your improvements and I’ll profile them on this blog. jongos [at] gmail [dot] com

Download this Tutorial with all relevant PSD, Font and Pattern Files here! Download just the font here!

Rounded Corners

jon — Tue, 19 Feb 2008 21:48:00 +0000

In amendment to my last round up of web based design tools, I need to make sure I mention Roundpic which allows you to upload any image from your desktop or any website, and round the corners with a nifty and easy to use UI. It’s definitely at it than Photoshop. Check it out.

Processing A Programming Handbook

jon — Wed, 06 Feb 2008 23:59:00 +0000

I haven’t done much in Proce55ing lately but I plan on getting back to it soon enough. One of my new tools in helping me learn is Casey Reas’ Processing: A Programming Handbook for Visual Designers and Artists from MIT PRess. I highly recommend it as it’s full of great examples and instructions that are already deepening my understanding of the platform.